CSS学习笔记【Grid布局】

总结

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。

div {
  display: grid;
}

容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

还可以利用百分比等

grid-template-columns属性对于网页布局非常有用。两栏式布局只需要一行代码。

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。

justify-items 属性
align-items 属性
place-items 属性 justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）

place-items属性是align-items属性和justify-items属性的合并简写形式。

justify-content 属性
align-content 属性
place-content 属性 justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。

place-content属性是align-content属性和justify-content属性的合并简写形式。

rid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。

grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

参考文献：阮一峰 CSS Grid 网格布局教程

历史文章： CSS学习笔记【Flex布局】