Grid 布局
准备工作
- 编辑器: VSCODE
- 浏览器: FireFox
- 浏览器同步插件: Live Server
1. 基本术语
- 容器: 使用网格布局的元素
- 项目: 容器中的子元素
- 网格线: 将容器划分为行与列的直线
- 显式网络: 由用户根据项目数量指示容器生成的网格
- 隐式网格: 由容器根据项目数量自动生成的网格
- 单元格: 项目放置的具体空间
- 网格区域: 一个以上的单元格组成的矩形区域
网格布局的基本步骤: 1. 生成网格; 2. 放置项目
2. 创建 Grid 容器
display: 声明使用网格布局的容器元素grid-auto-flow: 声明项目在网格中自动填充方案(行优先/列优先)grid-template-columns/rows: 在容器中显式地划分行与列,生成指定数量的单元格来放置项目grid-auto-rows/columns: 根据项目数量,在容器中隐式生成行与列来放置它们
3. 设置单元格数量与尺寸
- 固定宽度
px: 固定大小 - 百分比
%: 以容器大小为依据来计算 - 自动计算
auto: 由浏览器决定长度 - 比例
fr: 将容器空间按比例分配给每一个单元格 - 区间
minmax(min,max): 设置单元格尺寸变化范围 - 重复生成
repeat(): 快速生成相同大小单元格的 自动填充
auto-fill: 单元格固定,但容器不确定时,可以让一行/列容纳尽可能多的项目
4. 将项目填充到指定单元格中
4.1 使用默认网格线划分单元格
- 默认从左上角开始,从左到右,从上到下,依次从 1 开始编号
- 如果从右下角开始,由下向上,由右向左,依次由从-1 开始编号
根据数字网格线,可以将项目放到网格线形成的封闭矩形区域中
4.2 使用命名网格线划分单元格
- 使用语义化的名称替代容器自动生成的数字网线线编号
同一条网络线可以有多个别名
4.3 重复设置单元格时, 命名网格线会自动添加索引
repeat(3, [col-start] 100px [col-end]): 只需设置命名前缀,编号会自动生成grid-column-end: col-end 3;: 前缀加索引就可以引用到自动生成的命名网格线
5. 将项目填充到网格区域中
5.1 默认网格区域
- 设置项目属性
grid-area: 将项目填充到指定容器的区域中 语法:
grid-area: 起始行 / 起始列 / 结束行 / 结束列
5.2 命名网格区域
- 可以为每一个网格区域设置一个语义化的名称
- 具有名称的网络区域称之为命名区域
- 名称相同的网格区域会合并, 形成更大的区域空间
项目设置的区域名称后,会自动填充到容器中应对的命名区域中
5.3 网格区域占位符
当项目默认已到填充到正确的区域中,无需设置时,可使用”.”做为占位符
5.4 命名网格区域线默认名称
- 区域起始行/列:
区域名称-start, 如header-start / header-start,表示区域起始行/区域起始列 - 区域结束行/列:
区域名称-end,如header-end / header-end,表示区域结束行/区域结束列
6. 设置所有项目在容器中的对齐方式
justify-content: 设置所有项目在容器中水平方向的对齐方式align-content: 设置所有项目在容器中垂直方向的对齐方式place-content: 上面二个属性的简写,place-content: 垂直对齐方式 水平对齐方式
7. 设置所有项目在单元格或网格区域内的对齐方式
justify-items: 设置所有项目在单元格/网格区域中水平方向的对齐方式align-items: 设置所有项目在单元格/网格区域中垂直方向的对齐方式place-items: 上面二个属性的简写,place-items: 垂直对齐方式 水平对齐方式demo11.html: 所有项目在单元格中的对齐方式
8. 设置某个项目在单元格或网格区域内的对齐方式
justify-self: 设置某个项目在单元格/网格区域中水平方向的对齐方式align-self: 设置某个项目在单元格/网格区域中垂直方向的对齐方式place-self: 上面二个属性的简写,place-self: 垂直对齐方式 水平对齐方式
9. 设置容器中行与列之间的间距/间隙
column-gap: 列间距row-gap: 行间距gap: 行间距 列间距: 简写gap: 值: 行与列相等,可只写一个值
个人总结：
- 经过学习，大致了解到了网格布局的各个属性，最开始我是完全不知道这个布局怎么使用，我想着这个布局我们的数据放到那里去，怎么布局呢，完全没想明白，但是现在我知道了，就是首先将页面变成一个一个的格子，然后将我们的数据放到一个一个的格子里面，这样我们布局就改变格子的布局就行，这样方便快捷很多，一开始真是脑筋完全没有转变过来，所以完全不知道这个布局有啥作用，但是现在真正了解了以后，会发现这个布局确实很强大且方便，很实用，属性还是特别多的，还是要靠自己去记忆，多练习，多敲代码，才能熟能生巧。