grid概念

• 容器和项目：采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）
• 行和列：容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）
• 行和列的交叉区域，称为"单元格"（cell）
• 网格线：划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。

grid布局特有长度单位

容器属性

项目属性

代码示例

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;
}

使用参考

• CSS Grid 网格布局教程 - 阮一峰的网络日志
• grid - CSS：层叠样式表 | MDN