CSS grid 网格布局

一个网格通常具有许多的列（column）与行（row），以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽（gutter）。

创建一个网格容器

display: grid;

设置列

grid-template-columns: 200px 200px 200px ···;
// fr 单位： 占居可用空间的份数

设置网格间隙

grid-gap: 20px;

显隐式网格 可以类比 flex 的主、副轴

minmax(100px, auto) 设置行列长度的最小最大值

自动使用多列填充

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

放置元素到网格中

基于 网格线

grid-column-start (en-US)

grid-column-end (en-US)

grid-row-start (en-US)

grid-row-end (en-US)

grid-column

grid-row

基于 grid-template-areas

grid 简写

显式网格属性 grid-template

• grid-template-rows
• grid-template-columns
• grid-template-areas，

隐式网格属性

• grid-auto-rows
• grid-auto-columns
• grid-auto-flow

间距属性

• grid-column-gap
• grid-row-gap

仅可在一个 grid 属性中声明 显式 或 隐式网格。

此简写声明无法设置网格的槽（gutter），槽会被该声明重置。