grid布局学习笔记

Grid 布局

网格布局的基本步骤: 1. 生成网格; 2. 放置项目; 3.设置属性

1. 创建 Grid 容器

stt	属性	描述
1.1	display: grid;	声明使用网格布局的容器元素
1.2	grid-template-columns: 100px 100px 100px;	显式地划分列,生成指定数量的单元格来放置项目
1.3	grid-template-rows: 100px 100px;	显式地划分行,与列一起组成单元格（网格）
1.4	grid-auto-columns: auto;	根据项目数量,在容器中隐式生成行与列来放置它们,列宽自动
1.5	grid-auto-rows: 150px;	根据项目数量,在容器中隐式生成行与列来放置它们,行高 150px
1.6	grid-auto-flow: column;	声明项目在网格中自动填充方案(列优先)
1.7	grid-auto-flow: row;	声明项目在网格中自动填充方案(行优先)

---

2. 设置网格元格数量尺寸单位

stt	单位	示例
2.1	固定宽度px	grid-template-columns: 100px 100px 100px;
2.2	百分比%	grid-template-columns: 20% 30% auto;
2.3	自动计算auto	grid-template-columns: 20% 30% auto;
2.4	比例fr	grid-template-columns: 1fr 2fr 2fr;
2.5	重复生成repeat('重复次数', '每次大小')	grid-template-columns: repeat(3, 100px);
2.6	分组	grid-template-columns: repeat(2, 50px 100px);
2.7	区间minmax(min,max)	grid-template-columns: repeat(2, minmax(50px, 100px));
2.8	自动填充auto-fill	grid-template-columns: repeat(auto-fill, 100px);

---

3. 将项目填充到指定单元格中

stt	示例	描述
3.1	grid-row-start: 1; grid-row-end: 3;	开始行线编号，默认;线束行线编号
3.2	grid-column-start: 1; grid-column-end: 3;	开始列线编号，默认 ;结束列线编号
3.3	grid-row: 1 / 3;	简写，开始行线/结束行线
3.4	grid-column: 3 / 5;	简写，开始列线/结束列线
3.5	grid-row-start: 3; grid-row-end: span 2;	开始行线编号;结束行线编号跨 2 行
3.6	grid-column-start: 1; grid-column-end: span 2;	开始列线编号;结束列线编号跨 2 行
3.7	grid-row: 3 / span 2;	开始行线编号/跨 2 行
3.8	grid-column: 1 / span 2;	开始列线编号/跨 2 列
3.9	/_grid-row-start: 3;_/ grid-row-end: span 2;	开始行线编号是当前项目默认编号，可以省略

• 默认从左上角开始,从左到右,从上到下,依次从 1 开始编号
• 如果从右下角开始,由下向上,由右向左,依次由从-1 开始编号
• 根据数字网格线,可以将项目放到网格线形成的封闭矩形区域中

4.2 使用命名网格线划分单元格

划网格的时候自定义命名

• 使用语义化的名称替代容器自动生成的数字网线线编号
• 同一条网络线可以有多个别名

grid-template-columns:
  [columns1-s] 100px [columns1-e columns2-s] 100px
  [columns2-e columns3-s] 100px [columns3e];
grid-template-rows:
  [row1-s] 100px [row1-e row2-s] 100px
  [row2-e row3-s] 100px [row3-e];
.item1 {
  background-color: lightgreen;
  grid-column-start: columns3-s;
  grid-column-end: columns3-e;
  grid-row-start: row3-s;
  grid-row-end: row3-e;
}

4.3 使用repeat重复设置单元格时, 命名网格线会自动添加索引

• repeat(3, [col-start] 100px [col-end]): 只需设置命名前缀,编号会自动生成
• grid-column-end: col-end 3;: 前缀加索引就可以引用到自动生成的命名网格线

---

5. 将项目填充到网格区域中

5.1 默认网格区域

• 设置项目属性grid-area: 将项目填充到指定容器的区域中
• 语法: grid-area: 起始行 / 起始列 / 结束行 / 结束列

.item1 {
  background-color: lightgreen;
  grid-area: 1 / 1 / 2 / 5;
}

5.2 自定义命名网格区域：grid-template-areas:

• 可以为每一个网格区域设置一个语义化的名称
• 具有名称的网络区域称之为命名区域
• 名称相同的网格区域会合并, 形成更大的区域空间
• 项目设置的区域名称后,会自动填充到容器中应对的命名区域中

.container {
  /* 创建grid容器 */
  display: grid;
  grid-template-columns: 80px 1fr 80px;
  grid-template-rows: 40px 1fr 40px;
  /* 设置命名网格区域, 相同名称的命名区域会合并 */
  grid-template-areas:
    "header header header"
    "left main right"
    "footer footer footer";
}
/* 把项目放到网格区域中：grid-area */
.item1 {
  background-color: lightgreen;
  grid-area: header;
}

5.3 网格区域占位符

• 当项目默认已到填充到正确的区域中,无需设置时,可使用"."做为占位符

.container {
  grid-template-areas:
    "header header header"
    "..."
    "footer footer footer";
}

5.4 命名网格区域线默认名称

• 区域起始行/列: 区域名称-start, 如header-start / header-start,表示区域起始行/区域起始列
• 区域结束行/列: 区域名称-end,如header-end / header-end,表示区域结束行/区域结束列

.item1 {
  background-color: lightgreen;
  grid-area: header-start / header-start / header-end / header-end;
}

---

6. 设置网格在容器中的对齐方式

stt	属性	描述
6.1	justify-content: start/end/center;	设置所有项目在容器中水平方向的对齐方式: 开始/结束/居中，默认开始
6.2	align-content: start/end/center;	设置所有项目在容器中垂直方向的对齐方式: 开始/结束/居中，默认开始
6.3	place-content: align-content justify-content;	上面二个属性的简写, place-content: 垂直对齐方式 水平对齐方式

---

7. 设置所有项目网格在容器中的对齐方式

容器中有剩余空间设置网格在容器中的对齐方式

stt	属性	描述
7.1	justify-content: space-between;	设置所有项目在单元格/网格区域中水平方向
7.2	justify-content: space-around;	设置所有项目在单元格/网格区域中水平方向
7.3	justify-content: space-evenly;	设置所有项目在单元格/网格区域中水平方向
7.2	align-content: space-between;	设置所有项目在单元格/网格区域中垂直方向
7.2	align-content: space-around;	设置所有项目在单元格/网格区域中垂直方向
7.2	align-content: space-evenly;	设置所有项目在单元格/网格区域中垂直方向
7.3	place-content: align-content justify-content;	上面二个属性的简写, place-content: 垂直对齐方式 水平对齐方式

---

8. 统一设置所有项目在单元格或网格区域中对齐方式

stt	属性	描述
8.1	justify-items: start;	设置所有项目在单元格/网格区域中水平方向
8.2	justify-items: end;	设置所有项目在单元格/网格区域中水平方向
8.3	justify-items: center;	设置所有项目在单元格/网格区域中水平方向
8.2	align-items: start;	设置所有项目在单元格/网格区域中垂直方向
8.2	align-items: end;	设置所有项目在单元格/网格区域中垂直方向
8.2	align-items: center;	设置所有项目在单元格/网格区域中垂直方向
8.3	place-items: align-items justify-item;	上面二个属性的简写, place-items: 垂直对齐方式 水平对齐方式

---

9. 设置某个项目在单元格或网格区域内的对齐方式

stt	属性	描述
9.1	justify-self: start;	设置某个项目在单元格/网格区域中水平方向的对齐方式
9.2	justify-self: end;	设置某个项目在单元格/网格区域中水平方向的对齐方式
9.3	justify-self: center;	设置某个项目在单元格/网格区域中水平方向的对齐方式
9.2	align-self: start;	设置某个项目在单元格/网格区域中垂直方向的对齐方式
9.2	align-self: end;	设置某个项目在单元格/网格区域中垂直方向的对齐方式
9.2	align-self: center;	设置某个项目在单元格/网格区域中垂直方向的对齐方式
9.3	place-self: align-self justify-self;	上面二个属性的简写, place-self: 垂直对齐方式 水平对齐方式

---

10. 设置容器中行与列之间的间距/间隙

• column-gap: 列间距
• row-gap: 行间距
• gap: 行间距 列间距: 简写
• gap: 值: 行与列相等,可只写一个值