1.Grid 栅格系统概述：
CSS 网格布局(Grid Layout) 是 CSS 中最强大的布局系统。 这是一个二维系统，这意味着它可以同时处理列和行。栅格系统与 FLEX 弹性布局有相似之处理，都是由父容器包含多个项目元素的使用。
2.使用栅格系统：
声明当前布局使用 grid 栅格栏布局：
display: grid;
设置栅格行列单元格数量和占比：
/* 使用栅格系统 行 */ grid-template-rows: repeat(2, 50%); /* 设置栅格系统 列 */ grid-template-columns: repeat(4, 25%);
使用平均分配：
/* 平均分成4份，每一个单元格占1份 */ grid-template-rows: repeat(4, 1fr); grid-template-columns: repeat(2, 1fr);
3.设置栅格间距：
/* 设置栅格间距 */ row-gap: 20px; column-gap: 20px;
gap: 20px
4.栅格元素定位：
注意，当前情况下只能放置规则的矩形元素，对于不规则元素无法正常防止，可以在外部加上div包裹其进行防止。
样式属性 |
说明 |
grid-row-start |
行开始栅格线 |
grid-row-end |
行结束栅格线 |
grid-column-start |
列开始栅格线 |
grid-column-end |
列结束栅格线 |
上面几个样式属性可以使用以下值
属性值 |
说明 |
Line |
栅格络 |
span 数值 |
栅格包含的栅格数量 |
span 区域名称 |
栅格包含到指定的区域名称 |
auto |
自动设置，默认为一个网格宽度和高度 |
4.1 根据栅格线编号放置元素：
上顶边为行开始边，下底边为行结束边；左边为列起始边，右边为列结束边。
/* 通过编号将元素放置内容 */ grid-row-start: 1; grid-column-start: 2; grid-row-end: 2; grid-column-end: 3;
4.2 固定命名放置元素：
独立命名：
grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end]; grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-start c3-start] 100px [c3-end];
grid-row-start: r2-start; grid-column-start: c1-end; grid-row-end: r2-end; grid-column-end: c3-start;
自动命名：
对于重复设置的栅格系统会自动命名，使用时使用 c1、c2 的方式定位栅格。
grid-template-rows: repeat(3, [r-start] 100px [r-end]); grid-template-columns: repeat(3, [c-start] 100px [c-end]);
grid-row-start: r-start 2; grid-column-start: c-start 2; grid-row-end: r-start 2; grid-column-end: c-end 2;
4.3 简写模式：
可以使用 grid-row 设置行开始栅格线，使用 grid-column 设置结束栅格线。上例中的居中对齐元素，可以使用以下简写的方式声明（推荐）。
grid-row: 2/4; grid-column: 2/4;
4.4 根据偏移量定位：
使用 span 可以设置包含栅格的数量或包含到的区域名称。
grid-row-end: span 1; grid-column-end: span 1;
4.4 grid-area：
grid-area更加简洁是同时对 grid-row 与 grid-column 属性的组合声明。语法结构如下：
grid-area: grid-row-start/grid-column-start/grid-row-end/grid-column-end。
命名方式：
grid-template-rows: repeat(auto-fill, [r] 100px); grid-template-columns: repeat(auto-fill, [l] 100px);
grid-area: r 2/l 2/r 4/l 4;
5.栅格区域布局：
5.1 区域声明：
区域是由多个单元格构成，使用 grid-template-areas可以定义栅格区域，并且栅格区域必须是矩形的。
display: grid; grid-template-rows: 80px 1fr 50px; grid-template-columns: 100px 1fr 50px 60px; grid-template-areas: "header header header header" "nav main main aside" "footer footer footer footer";
main { /* 完整的写法，推荐使用下面的简写方式*/ /* grid-area: main-start/main-start/main-end/main-end; */ grid-area: main; background: #E9EEEF; } header { background: #2EC56C; grid-area: header; } nav { background: #E1732C; grid-area: nav; } aside { grid-area: aside; background: #EEBC31; } footer { grid-area: footer; background: #904FA9; }
使用 grid-template 进行栅格划分会更简洁：
grid-template: '栅格名称 栅格名称 栅格名称 栅格名称' 行高 '栅格名称 栅格名称 栅格名称 栅格名称' 行高 '栅格名称 栅格名称 栅格名称 栅格名称' 行高/列宽 列宽 列宽 列宽;
