网格布局
网格布局是一个双向的布局，
单词：
- grid：网格、栅格
- Row：行
- column 列
- template：模板
- justify：调整
- content：内容
- item：项目
- container：容器
- self：自己
- fraction 片段
- area：区域、地区
grid布局系统术语
- Grid container 网格内容
- grid item 网格项目
- 网格（Grid）
- 网格线（Grid lines）
- 网格轨道（Grid tracks）
- 网格单元格（Grid cell）
- 网格区域（Grid areas）
- 网格间隙（Gutters）
- 网格轴（Grid Axis）
- 网格行（Grid row）
- 网格列（Grid column）
定义网格
display：grid；
定义显示网格--父元素
grid-template
语法：
box{
grid-template:
}
设置行列
grid-template-columns
定义显式网格的列宽和列数
box{
grid-template-columns: repeat(3,1fr);
}
grid-template-rows
定义显式网格行高和行数
box{
grid-template-rows: repeat(3,1fr);
}
grid-template-areas
语法：
box{
grid-template-areas:
"header header header"
"main main main"
"footer footer footer"
;
}
设置子元素的布局
步骤：
第一步：创建网格系统
第二步：创建模板（确定父元素和子元素）
第三步: 创建名称
第四步：指定列数列宽 行数行宽
定义隐式网格
grid-auto-rows
定义隐式网格行高
语法：
box{
grid-auto-rows:lenth；
}
grid-auto-columns
定义隐式网格列宽
语法：
box{
grid-auto-columns:lenth；
}
设置间距
gap
设置网格间距
语法：
box{
gap: 10px;
}
column-gap
设置列间距
语法：
box{
column-gap: 10px;
}
row-gap
设置行间距
语法：
box{
row-gap: 10px;
}
对齐项目
align-items
定义网格单元沿列轴的对齐方式
align-content
定义定义网格沿列轴的对齐方式
justify-content
定义定义网格沿行轴的对齐方式
justify-items
定义网格单元沿行轴的对齐方式
子元素
对齐
align-self
垂直对齐子元素
justify-self
水平对齐子元素
跨行与跨列
grid-column
跨列复合属性
box{
grid-column：1 / 3
}
gird-column-start
定义跨列起始线
gird-column-end
定义跨列结束线
grid-row
跨行复合属性
box{
grid-row：1 / 3
}
grid-row-start
定义跨行结束线
grid-row-end
定义跨行结束线
grid-area
他是跨行和跨列的简写属性
定义网格区域
语法：
box{
grid-area:1 / 3 / 1 / 3
}
