grid概念
- 容器和项目：采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）
- 行和列：容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）
- 行和列的交叉区域，称为"单元格"（cell）
- 网格线：划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。
grid布局特有长度单位
| 单位 |
解释 |
| fr |
相对比例数 |
| minmax(min,max) |
尺寸范围，表示此范围内的宽度都可接受 |
| repeat(重复次数，重复内容) |
重复 |
| auto-fill |
只能在repeat函数中使用，自动填充(多余时用空格子填满剩余宽度) |
| auto-fit |
只能在repeat函数中使用，自动填充(多余时尽量扩大单元格宽度) |
| fit-content(argument) |
min(max-content , max(auto,argument) ) |
容器属性
| 名称 |
解释 |
| grid-template-columns |
定义每一列的列宽 |
| grid-template-rows |
定义每一行的行高 |
| column-gap |
设置列与列的间隔（列间距） |
| row-gap |
设置行与行的间隔（行间距） |
| gap |
grid-column-gap和grid-row-gap简写形式 |
| grid-template-areas |
指定区域 |
| grid-auto-flow |
顺序 |
| align-items |
设置单元格内容的垂直位置 |
| justify-items |
设置单元格内容的水平位置 |
| place-items |
align-items和justify-items简写形式 |
| align-content |
设置整个内容区域的垂直位置 |
| justify-content |
设置整个内容区域在容器里面的水平位置 |
| place-content |
align-content和justify-content简写形式 |
| grid-auto-columns |
设置多余（隐形）网格列宽 |
| grid-auto-rows |
设置多余（隐形）网格高度 |
| grid-template |
不建议使用。grid-template-rows、grid-template-columns、grid-template-areas简写形式 |
| grid |
不建议使用。grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow简写形式 |
项目属性
| 名称 |
解释 |
| grid-column-start |
指定左边框所在的垂直网格线，可使用span从左往右合并单元格 |
| grid-column-end |
指定右边框所在的垂直网格线，可使用span从右往左开始合并单元格 |
| grid-row-start |
指定上边框所在的水平网格线，可使用span从上往下合并单元格 |
| grid-row-end |
指定下边框所在的水平网格线，可使用span从下往上合并单元格 |
| grid-column |
grid-column-start和grid-column-end简写形式，使用/分隔 |
| grid-row |
grid-row-start和grid-row-end简写形式，使用/分隔 |
| grid-area |
指定项目放在哪一个区域。也可作为grid-row-start、grid-column-start、grid-row-end、grid-column-end简写形式 |
| align-self |
设置单元格内容的垂直位置 |
| justify-self |
设置单元格内容的水平位置 |
| place-self |
align-self和justify-self简写形式 |
代码示例
grid-template-columns
grid-template-columns: 100px 100px 100px;
grid-template-columns: repeat(3, 100px);
grid-template-columns: repeat(2, 100px 20px 80px);
grid-template-columns: repeat(auto-fill, 100px);
grid-template-columns: 1fr 1fr;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-row-gap
grid-row-gap: 20px;
grid-template-areas
grid-template-areas: 'a b c'
'd e f'
'g h i';
grid-template-areas: 'a a a'
'b b b'
'c c c';
grid-template-areas: 'a . c'
'd . f'
'g . i';
注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end
grid-auto-flow
grid-auto-flow: column;
grid-auto-flow: row dense;
justify-items
.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}
justify-content
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
grid-column-start
.item-1 {
grid-column-start: 1;
}
.item-1 {
grid-column-start: header-start;
}
.item-1 {
grid-column-start: span 2;
}
grid-column
.item-1 {
grid-column: 1 / 3;
}
使用参考
