网格布局

网格布局是一个双向的布局，

单词：

• 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
}