简介
Grid 布局是一种用于二维的网格布局模型，它允许创建基于行和列的网格布局。与传统的单维布局方式（如 Flexbox）不同，Grid 布局提供了同时沿水平方向和垂直方向布局的能力，使其非常适合创建复杂的网页布局。
特点
- 灵活性：可以轻松创建响应式设计，并且能够适应不同的屏幕尺寸。
- 控制性：对元素的位置和大小有着高度的控制力。
- 兼容性：现代浏览器广泛支持 Grid 布局，包括 IE11+。
基本概念
- 容器：使用
display: grid或display: inline-grid的元素称为 Grid 容器。 - 项目：Grid 容器内的直接子元素称为 Grid 项目。
- 行与列：通过定义行（
grid-row）和列（grid-column），可以创建一个网格系统。 - 单元格：行与列交叉形成的矩形区域称为单元格。
- 行轴与列轴：沿水平方向的轴称为行轴，沿垂直方向的轴称为列轴。
使用场景
- 响应式布局：创建可以随着屏幕尺寸变化而调整的布局。
- 复杂布局：适用于需要精细控制的复杂页面布局设计。
- 多列布局：构建多列的新闻网站或博客页面。
- 卡片布局：创建一系列均匀分布的卡片或块。
属性
- 定义轨道的列表 <track-list>:
[ <line-names>? [ <track-size> | <track-repeat> ] ]+;
<track-size>可选值：<length>、<percentage>、<flex>、max-content、min-content、auto、minmax(min, max)、fit-content([ <length> | <percentage> ])。
<track-repeat>可选值：repeat([ <length> | <percentage> ], [ <line-names>? <track-size> ]+)。 - 一种特殊的 <track-list>，定义自动放置轨道列表 <auto-track-list>:
[ <line-names>? [ <track-size> | <fixed-repeat> ] ];
<fixed-repeat>可选值：repeat([ auto-fill | auto-fit ], [ <line-names>? <track-size> ]+)。
auto-fit会不断拉伸各元素，auto-fill会判断剩余空间是否足够增加元素数量，足够时优先增加数量，不足以增加时再对现有元素进行拉伸。 - 网格行轨道名称及尺寸 grid-template-rows:
none（默认）、<track-list>、<auto-track-list>、subgrid; - 网格列轨道名称及尺寸 grid-template-columns:
none（默认）、<track-list>、<auto-track-list>、subgrid; - 未被显式定义的行轨道，采用隐式定义行轨道 grid-auto-rows:
<track-size>; - 未被显式定义的列轨道，采用隐式定义列轨道 grid-auto-columns:
<track-size>; - 定义网格命名区域排列方式 grid-template-areas:
<string>;
使用子项中定义的grid-area进行布局。 - 简写属性 grid-template: [
grid-template-rows, grid-template-columns|[ <line-name>? <string> <track-size> ]+ [ / [ <line-names>? <track-size> ]+ ]?]; - 网格自动布局排列方式 grid-auto-flow:
row（默认）、column、row dense、column dense;
dense关键字指定使用稠密堆积算法，后面较小元素会填充前面元素留下的空白，可能会打乱次序。省略它时，保证元素填充按次序排列。 - 网格行对齐方式 justify-content:
flex-start（默认）、flex-end、center、space-between、space-around、space-evenly； - 网格列对齐方式 align-content:
flex-start（默认）、flex-end、center、space-between、space-around、space-evenly； - 简写属性 place-content:
align-content,justify-content； - 网格行方向对齐方式 justify-items:
stretch（默认）、flex-start、flex-end、center、baseline； - 网格列方向对齐方式 align-items:
stretch（默认）、flex-start、flex-end、center、baseline； - 简写属性 place-items:
align-items,justify-items； - 单个子项的网格行方向对齐方式 justify-self:
auto（默认）、stretch、flex-start、flex-end、center、baseline； - 单个子项的网格列方向对齐方式 align-self:
auto（默认）、stretch、flex-start、flex-end、center、baseline； - 简写属性 place-self:
align-self,justify-self； - 行间隔 row-gap:
[ <length> | <percentage> ]; - 列间隔 column-gap:
[ <length> | <percentage> ]; - 简写属性 gap:
row-gap,column-gap; - 网格行轨道起始位置 grid-row-start:
auto（默认）、<number [0, ∞]>、none、span <number [0, ∞]>、<line-name>; - 网格行轨道结束位置 grid-row-end:
auto（默认）、<number [0, ∞]>、none、span <number [0, ∞]>、<line-name>; - 网格行轨道起始位置 grid-column-start:
auto（默认）、<number [0, ∞]>、none、span <number [0, ∞]>、<line-name>; - 网格列轨道结束位置 grid-column-end:
auto（默认）、<number [0, ∞]>、none、span <number [0, ∞]>、<line-name>; - 简写属性 grid-row:
grid-row-start/grid-row-end; - 简写属性 grid-column:
grid-column-start/grid-column-end; - 简写属性或定义命名区域 grid-area: [
grid-row-start / grid-column-start / grid-row-end / grid-column-end|<string>]; - 显示顺序 order:
<number>默认值：0;
