前端 CSS 经典:grid 栅格布局

前言:Grid 布局是将容器划分成"行"和"列",产生单元格,然后将"项目"分配给划分好的单元格,因为有行和列,可以看作是二维布局。

一 术语

1. 容器

采用网格布局的区域,也就是外层盒子。

2. 项目

容器包裹的一级子元素,不包含二级及其以下的子元素。当容器使用了 grid 布局,项目的 float,display 等设置都将失效。

3. 单元格

通过容器设置行列属性,切割出来的单元格。单元格不等于项目,打个比方,容器相当于一个房子,单元格相当于在房子里划分出的一个个房间,项目相当于房间里的家具等东西。

二 容器属性

demo 默认样式,未设置 grid 属性。

<template><div class="container"><span v-for="i in 10" :class="`item${i}`">{{ i }}</span></div>
</template><style lang="scss" scoped>.container {background: green;span {border: 1px solid;}}
</style>

1. display

设置网格布局

1.1 display: grid

项目宽度填充整行

.container {background: green;display: grid;span {border: 1px solid;}
}

1.2 display: inline-grid

项目宽度根据内容撑宽。

.container {background: green;display: inline-grid;span {border: 1px solid;}
}

2. grid-template-columns

划分容器列和列宽,可以单独或混合使用:绝对值 px,百分比 %,比例 fr,关键字 auto,函数 minmax,函数 repeat,函数 fit-content

2.1 绝对值 px

例:设置 3 列,每列宽 300px

.container {background: green;display: grid;grid-template-columns: 300px 300px 300px;span {border: 1px solid;}
}

2.2 百分比 %

例:设置 3 列,每列宽 33.33 %

.container {background: green;display: grid;grid-template-columns: 33.33% 33.33% 33.33%;span {border: 1px solid;}
}

2.3 比例 fr

总宽度除以总的 fr,得到每份 fr 所占宽度,然后分给设置的列宽,例:设置 3 列,第 2 列是第 1 列的 1 倍,第 3 列是第 1 列的 3 倍

.container {background: green;display: grid;grid-template-columns: 1fr 2fr 3fr;span {border: 1px solid;}
}

2.4 关键字 auto

宽度自适应,例:设置 3 列,第 1 列 100px,第 3 列 100px,第 2 列宽度自适应

.container {background: green;display: grid;grid-template-columns: 100px auto 100px;span {border: 1px solid;}
}

2.5 函数 minmax

minmax(min, max),用于产生一个长度范围,例:设置 3 列,第 2 列 自适应宽度在 100px 到 300px 之间,第 1 列和第 3 列宽度为 300px。

.container {background: green;display: grid;grid-template-columns: 300px minmax(100px, 300px) 300px;span {border: 1px solid;}
}

2.6 函数 repeat

repeat(n, content),n 代表重复次数,可以是数字代表几次,可以 auto-fill 自动填充满,content 代表重复内容。例:设置 3 列,每列 1fr。

.container {background: green;display: grid;grid-template-columns: repeat(3, 100px);span {border: 1px solid;}
}

例:设置每列 100px,每行自动填充最多的 100px 列

.container {background: green;display: grid;grid-template-columns: repeat(auto-fill, 100px);span {border: 1px solid;}
}

2.7 函数 fit-content

fit-content(length),当内容小于 length,以内容为准,如果大于 length 以 leng 为长度,例:设置 3 列,每列最大宽度 200px,当小于 200px,以内容撑开宽度。

.container {background: green;display: grid;grid-template-columns: repeat(3, fit-content(200px));span {border: 1px solid;}
}

3. grid-template-rows

划分容器行和行高,属性同 grid-template-columns 一致,比例 fr 略有不同。如果不设置项目高度,1fr 代表的高度就是项目高度,如果设置有项目设置了高度,那就以该项目的高度除以该项目所分的 fr 算出 1fr 的大小。例:设置列宽 200px,自动铺满列,不设置项目高度,第 1 行 2fr,第 2 行 2fr,第 3 行 3fr。

.container {background: green;display: grid;grid-template-columns: repeat(auto-fill, 200px);grid-template-rows: 1fr 2fr 3fr;span {border: 1px solid;}
}

例:设置列宽 200px,自动铺满列,设置项目 item5 高度 200 px,第 1 行 2fr,第 2 行 2fr,第 3 行 3fr。

.container {background: green;display: grid;grid-template-columns: repeat(auto-fill, 200px);grid-template-rows: 1fr 2fr 3fr;span {border: 1px solid;}.item5 {height: 200px;}
}

4. grid-template-areas

区域命名,区域命名形成区域一定要是矩形区域,无论是 L,凹,凸都是无效属性值。可以配合 grid-template-rows、grid-template-columns 使用。例:设置 3 列每列 100px,3 行每行 100px,通过区域命名实现如图布局。

.container {background: green;display: grid;grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(3, 100px);grid-template-areas:"left top top""left middle right""bottom bottom right";span {border: 1px solid;}.item1 {grid-area: left;}.item2 {grid-area: top;}.item3 {grid-area: middle;}.item4 {grid-area: right;}.item5 {grid-area: bottom;}
}

5. grid-template

是 grid-template-columns、grid-template-rows 这 2 个属性的合并简写形式。

grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);// 简写
grid-template: repeat(3, 100px) / repeat(3, 100px);

6. column-gap

列间距,支持数值和百分比。例:设置列间距为 20px。

.container {background: green;display: grid;grid-template-columns: repeat(auto-fill, 200px);column-gap: 20px;span {border: 1px solid;}
}

7. row-gap

行间距,支持数值和百分比。例:设置行间距 10px。

.container {background: green;display: grid;grid-template-columns: repeat(auto-fill, 200px);row-gap: 10px;span {border: 1px solid;}
}

8. grid-gap

行间距和列间距简写,grid-gap: 行间距,列间距,如果第二个值省略,默认两个值相等。例:设置行间距,列间距都为 20px。

.container {background: green;display: grid;grid-template-columns: repeat(auto-fill, 200px);grid-gap: 20px;span {border: 1px solid;}
}

9. grid-auto-flow

定义栅格元素的排列规则:row、column、row dense、column dense。

9.1 row

默认水平顺序排列

.container {background: green;display: grid;grid-template-columns: repeat(auto-fill, 200px);grid-template-rows: repeat(3, 200px);grid-auto-flow: column;span {border: 1px solid;}
}

9.2 column

垂直顺序排序

.container {background: green;display: grid;grid-template-columns: repeat(auto-fill, 200px);grid-template-rows: repeat(3, 200px);grid-auto-flow: column;span {border: 1px solid;}
}

10. justify-items

单元格内容水平位置设置:stretch、start、end、center

10.1 stretch

默认单元格内容水平填充单元格

.container {background: green;display: grid;grid-template-columns: repeat(auto-fill, 200px);grid-template-rows: repeat(3, 200px);justify-items: stretch;span {border: 1px solid;}
}

10.2 start

单元格内容水平靠右

.container {background: green;display: grid;grid-template-columns: repeat(auto-fill, 200px);grid-template-rows: repeat(3, 200px);justify-items: start;span {border: 1px solid;}
}

10.3 end

单元格内容水平靠左

.container {background: green;display: grid;grid-template-columns: repeat(auto-fill, 200px);grid-template-rows: repeat(3, 200px);justify-items: end;span {border: 1px solid;}
}

10.4 center

单元格内容水平居中

.container {background: green;display: grid;grid-template-columns: repeat(auto-fill, 200px);grid-template-rows: repeat(3, 200px);justify-items: center;span {border: 1px solid;}
}

11. align-items

单元格内容垂直位置:stretch、start、end、center

11.1 stretch

单元格内容垂直填充

.container {background: green;display: grid;grid-template-columns: repeat(auto-fill, 200px);grid-template-rows: repeat(3, 200px);align-items: stretch;span {border: 1px solid;}
}

11.2 start

单元格内容垂直靠上

.container {background: green;display: grid;grid-template-columns: repeat(auto-fill, 200px);grid-template-rows: repeat(3, 200px);align-items: start;span {border: 1px solid;}
}

11.3 end

单元格内容垂直靠下

.container {background: green;display: grid;grid-template-columns: repeat(auto-fill, 200px);grid-template-rows: repeat(3, 200px);align-items: end;span {border: 1px solid;}
}

11.4 center

单元格内容垂直居中

.container {background: green;display: grid;grid-template-columns: repeat(auto-fill, 200px);grid-template-rows: repeat(3, 200px);align-items: center;span {border: 1px solid;}
}

12. place-items

是 align-items 属性和 justify-items 属性的合并简写形式。如果省略第二个值,则浏览器认为与第一个值相等。例:设置单元格内容垂直和水平居中

.container {background: green;display: grid;grid-template-columns: repeat(auto-fill, 200px);grid-template-rows: repeat(3, 200px);place-items: center;span {border: 1px solid;}
}

13. justify-content

容器内容水平位置:start、end、center、stretch、space-around、space-between、space-evenly

13.1 start

默认容器内容水平靠左

.container {background: green;display: grid;grid-template-columns: repeat(auto-fill, 200px);grid-template-rows: repeat(3, 200px);justify-content: start;span {border: 1px solid;}
}

13.2 end

例:设置容器内容水平靠右

.container {background: green;display: grid;grid-template-columns: repeat(auto-fill, 200px);grid-template-rows: repeat(3, 200px);justify-content: end;span {border: 1px solid;}
}

13.3 center

例:设置容器内容水平居中

.container {background: green;display: grid;grid-template-columns: repeat(auto-fill, 200px);grid-template-rows: repeat(3, 200px);justify-content: center;span {border: 1px solid;}
}

13.4 space-around

例:设置容器内容水平平均分布,项目间距是项目距离容器边框的两倍

.container {background: green;display: grid;grid-template-columns: repeat(auto-fill, 200px);grid-template-rows: repeat(3, 200px);justify-content: space-around;span {border: 1px solid;}
}

13.5 space-between

例:设置容器内容水平平均分布,靠近容器边框项目紧贴容器,其余水平项目平均间距

.container {background: green;display: grid;grid-template-columns: repeat(auto-fill, 200px);grid-template-rows: repeat(3, 200px);justify-content: space-between;span {border: 1px solid;}
}

13.6 space-evenly

例:设置容器内容水平平均分布,项目间距和项目距离容器边框间距相等

.container {background: green;display: grid;grid-template-columns: repeat(auto-fill, 200px);grid-template-rows: repeat(3, 200px);justify-content: space-evenly;span {border: 1px solid;}
}

14. align-content

容器内容垂直位置:start、end、center、stretch、space-around、space-between、space-evenly,同 justify-content 属性一致。一般需要给容器设置固定高度。align-content 属性才有效。例:设置容器内容垂直居中

.container {height: 500px;background: green;display: grid;grid-template-columns: repeat(auto-fill, 200px);grid-template-rows: repeat(3, 100px);align-content: center;span {border: 1px solid;}
}

15. place-content

是 align-content 属性和 justify-content 属性的合并简写形式。如果省略第二个值,浏览器就会假定第二个值等于第一个值。例:设置容器内容水平居中,垂直居中。

.container {height: 500px;background: green;display: grid;grid-template-columns: repeat(auto-fill, 200px);grid-template-rows: repeat(3, 100px);place-content: center;span {border: 1px solid;}
}

三 项目属性

1. grid-column-start、grid-column-end、grid-column、grid-row-start、grid-row-end、grid-row、grid-area

grid-column-start: number; 左边框垂直网格线

grid-column-end: number; 右边框垂直网格线

grid-column: grid-column-start / grid-column-end; 左、右边框垂直网格线简写

grid-row-start: number; 上边框垂直网格线

grid-row-end: number; 下边框垂直网格线

grid-row: grid-column-start / grid-column-end; 左、右边框垂直网格线简写

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end; 上、左、下、右边框垂直网格线简写

number 值默认从 1 开始依次递增。

例:设置一个 3 列每列宽 200px,3 行每行高 200px,让内容为 1 的项目居中。

.container {background: green;display: grid;grid-template-columns: repeat(3, 200px);grid-template-rows: repeat(3, 200px);span {border: 1px solid;}.item1 {grid-column-start: 2;grid-column-end: 3;grid-row-start: 2;grid-row-end: 3;background: red;}
}// grid-column、grid-row 简写
.container {background: green;display: grid;grid-template-columns: repeat(3, 200px);grid-template-rows: repeat(3, 200px);span {border: 1px solid;}.item1 {grid-column: 2 / 3;grid-row: 2 / 3;background: red;}
}// grid-area 简写
.container {background: green;display: grid;grid-template-columns: repeat(3, 200px);grid-template-rows: repeat(3, 200px);span {border: 1px solid;}.item1 {grid-area: 2 / 2 / 3 / 3;background: red;}
}

2. justify-self

单元格内容的水平位置,同 justify-items 但只作用于单个项目。赋值:start、end、center、stretch。

3. align-self

单元格内容的垂直位置,同 align-items 但只作用于单个项目。赋值:start、end、center、stretch。

4. place-self

justify-self 和 align-self 简写,同 place-items 但只作用于单个项目。只有一个值时,第二个值默认与第一个值相同。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/287913.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL使用教程:数据库、表操作

目录 1. 免密码登录MySQL1.1 免密码配置1.2 登录选项介绍 2. MySQL基础配置&#xff1a;my.cnf3. 开机自启动设置&#xff08;可选设置&#xff09;4. 查看存储引擎5. 查看系统的编码规则和校验规则6. 数据库的操作6.1 查看数据库6.2 创建数据库 create database6.3 删除数据库…

航空实时监控

1、从Kafka中读取飞机数据&#xff0c;并进行清洗 此步骤在前面的“使用Spark清洗统计业务数据并保存到数据库中”任务阶段应该已经完成。如果没有完成&#xff0c;请参考源代码自行完成。核心类主要有三个&#xff1a;SparkStreamingApplication类、SparkUtil类和MapManager类…

3.1 SQL概述

SQL&#xff08;Structured Query Language&#xff09; 结构化查询语言&#xff0c;是关系数据库的标准语言 SQL是一个通用的、功能极强的关系数据库语言 功能&#xff1a;查询&#xff0c;数据库模式创建&#xff0c;数据库数据的插入与修改&#xff0c;数据库完整性、安全…

pytest之fixture结合conftest.py文件使用+断言实战

pytest之fixture结合conftest.py文件使用 conftest.py--存放固件固件的优先级pytest执行流程pytest之断言实战pytest结合allure-pytest插件生成美观的报告 conftest.py–存放固件 在一个项目的测试中&#xff0c;大多数情况下会有多个类、模块、或者包要使用相同的测试夹具。这…

如何使用PHP和RabbitMQ实现延迟队列(方式一)?

前言 今天我们来做个小试验&#xff0c;用PHP和RabbitMQ实现消息队列的延迟功能。 前期准备&#xff0c;需要安装好docker、docker-compose的运行环境。 需要安装RabbitMQ的可以看下面这篇文章。 如何使用PHP和RabbitMQ实现消息队列&#xff1f;-CSDN博客 一、安装RabbitM…

哪个品牌男裤子版型好看?男士春夏季裤子推荐!

最近逐渐开始天气变热&#xff0c;很多朋友都开始挑选换季的衣服了。不过不少朋友都表示现在的男生裤子实在太难选&#xff0c;不仅款式品牌多如牛毛&#xff0c;而且市面上还有不少质量不好的衣裤。 所以我这段时间特别购买了一批衣服回来测评并且上身试穿&#xff0c;今天就…

Vscode循环弹出窗口输入密码的窗口 ‘s password:

今天使用Vscode&#xff0c;连接远程服务器一直不断的弹出窗口&#xff0c;要求输入密码&#xff0c;导致无法显示远程文件。误以为是产品id没有上传成功&#xff0c;导致服务器内没有commid id对应的文件。参考vscode通过ssh链接服务器卡在downloading with wget,但是处理完仍…

java算法第32天 | 贪心算法 part02 ● 122.买卖股票的最佳时机II ● 55. 跳跃游戏 ● 45.跳跃游戏II

122.买卖股票的最佳时机II 本题中理解利润拆分是关键点&#xff01; 不要整块的去看&#xff0c;而是把整体利润拆为每天的利润。假如第 0 天买入&#xff0c;第 3 天卖出&#xff0c;那么利润为&#xff1a;prices[3] - prices[0]。 相当于(prices[3] - prices[2]) (prices[…

STM32不使用中断实现定时器微秒级精确延时

我们在写代码的时候避免不了要使用延时函数&#xff0c;很多延时函数都是使用中断或者tick来实现的&#xff0c;tick的方式最大到毫秒ms级别&#xff0c;通过中断方式的通用定时器来实现&#xff0c;如果实现1us的延时那么每1us就来一次中断&#xff0c;很影响cpu的效率。 本文…

elementary OS7 Ubuntu 22.04中硬盘挂载报错

elementary OS7 Ubuntu 22.04中硬盘挂载报错 背景目标思路解决方法 背景 上周末安装elementaryos7的过程中将windows10的引导文件搞丢了&#xff0c;这两天准备修复一下&#xff0c;保险期间将固态硬盘上的文件备份到移动硬盘上&#xff0c;备份过程中出现报错的问题&#xff…

Halcon与C#联合开发——1.读取图片、图像二值化

在vs中引入halcon控件 修改目标平台为 x64 拖出三个控件 代码展示 using System; using System.Windows.Forms; //引用支持halcon的命名空间 using HalconDotNet;namespace _1.HalconDisplay {public partial class Form1 : Form {// HObject 是Halcon库中表示图像和其他图形…

基于springboot+vue+Mysql的超市进销存系统

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

深度学习:基于PyTorch的模型解释工具Captum

深度学习&#xff1a;基于PyTorch的模型解释工具Captum 引言简介示例安装解释模型的预测解释文本模型情绪分析问答 解释视觉模型特征分析特征消融鲁棒性 解释多模态模型 引言 当我们训练神经网络模型时&#xff0c;我们通常只关注模型的整体性能&#xff0c;例如准确率或损失函…

AWS EC2设置root登录

在使用亚马逊的服务器时&#xff0c;官方默认是使用密钥登录&#xff0c;跟国内的云服务器差别较大&#xff0c;本文记录下&#xff0c;如何开放AWS EC2的root登录。 一、通过网页版或者XShell登录服务器 这里略过 二、设置root账户密码 # 切换 root sudo -i # 设置或修改密…

考研数学|《1800》《1000》《880》《660》最佳搭配使用方法

直接说结论&#xff1a;基础不好先做1800、强化之前660&#xff0c;强化可选880/1000题。 首先&#xff0c;传统习题册存在的一个问题是题量较大&#xff0c;但难度波动较大。《汤家凤1800》和《张宇1000》题量庞大&#xff0c;但有些题目难度不够平衡&#xff0c;有些过于简单…

【开发篇】六、查询大量数据导致内存溢出

文章目录 1、溢出场景2、快照文件分析3、本地环境复现4、结论5、解决思路 记录一个问题&#xff0c;工作中有个数据处理服务OOM&#xff0c;查了下镜像的dockerfile&#xff0c;发现JVM参数如下。很明显&#xff0c;一个数据服务&#xff0c;里面经手大量的数据对象&#xff0c…

ArcGIS二次开发(一)——搭建开发环境以及第一个简单的ArcGIS Engine 程序

Arcgis10.2、Arcgis Engine10.2与Microsoft Visual Studio 2012的版本进行安装 1、推荐教程与安装包2、安装顺序3、安装成功测试VS新建项目可以创建ArcGIS项目&#xff0c;并且在VS中拖拽ArcGIS工具 4、搭建第一个简单的ArcGIS Engine 程序 ArcEngine和VS版本是有对应的&#x…

【SpringBoot整合系列】SpringBoot3.x整合Swagger

目录 产生背景官方解释&#xff1a;作用SpringBoot3整合Swagger注意事项swagger3 常用注解SpringBoot3.x整合Swagger1.创建工程(jdk:17,boot:3.2.4)2.引入pom依赖3.application.yml添加配置4.添加swagger3.0配置5.控制器层(Controller)6.模型层(Model)7.启动并测试【Get请求接口…

一口气搞懂分库分表 12 种分片算法,大厂都在用

前言 本文是《ShardingSphere5.x分库分表原理与实战》系列的第五篇文章&#xff0c;我们一起梳理下ShardingSphere框架中的核心部分分片策略和分片算法&#xff0c;其内部针为我们提供了多种分片策略和分片算法&#xff0c;来应对不同的业务场景&#xff0c;本着拿来即用的原则…

大学教材《C语言程序设计》(浙大版)课后习题解析 | 第三、四章

概述 本文主要提供《C语言程序设计》(浙大版) 第三、四章的课后习题解析&#xff0c;以方便同学们完成题目后作为参考对照。后续将更新第五、六章节课后习题解析&#xff0c;如想了解更多&#xff0c;请持续关注该专栏。 专栏直达链接&#xff1a;《C语言程序设计》(浙大版)_孟…