-
开启 Grid 网格布局
- 块级元素开启：
display:grid - 行内元素开启：
display:inline-grid - 容器设置网格布局后，外面顶层子元素成为容器成员，但子元素外部元素不属于容器成员，并且 float、clear、vertical-aligin、display:inline-block / table-cell 款式都会生效
- 容器程度区域称为行，垂直区域称为列，行与列穿插造成的区域称为单元格，划分网格的线叫网格线
- 块级元素开启：
-
作用与容器上的款式
- 单位：像素 (px)、百分比 (px)、网格比例调配（fr）
- 划分网格的行：
grid-template-rows -
划分网格的列：
grid-template-columns
反复值简化写法：repeat(反复次数, 单元格大小)- 自适应划分个数：
auto-fill - 单元格范畴值：
minmax(最小，最大) - 单元格自适应宽度：
auto
- 自适应划分个数：
grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(auto-fill,minmax(20px,auto)); grid-template-columns: repeat(auto-fill,minmax(20px,auto));- 定义划分的网格区域名称
语法：grid-template-ares
区域名字与 grid-ares 绝对应 - grid-template-rows
、grid-template-columns、grid-template-ares 复合语法：grid-template:'区域名称' 行 / 列
// 书写形式一：grid-template: [header-left] "head head" 30px [header-right] [main-left] "nav main" 1fr [main-right] [footer-left] "nav foot" 30px [footer-right] / 100px 1fr; / [header-left] 示意阐明区域作用 // 书写形式二：grid-template: "a b c" 30px "e f g" 30px "h i j" 30px / auto;- 设置单元格行间距：
grid-column-gap - 设置单元格列间距：
grid-row-gap
grid-column-gap: 10px; grid-row-gap: 10px;- grid-column-gap
、grid-row-gap 复合语法：grid-gap: 行间距 列间距 - 设置单元格内容程度对齐形式：
justify-items -
设置单元格内容垂直对齐形式：
align-items- 单元格起始地位对齐：
start - 单元格两头地位对齐：
center - 单元格完结地位对齐：
end - 内容拉伸占满整个单元格：
stretch
- 单元格起始地位对齐：
- justify-items
、align-items 复合语法：place-items: 垂直对齐 程度对齐 - 设置整体网格程度对齐：
justify-content -
设置整体网格垂直对齐:
align-content- 绝对于容器起始地位对齐：
start - 绝对于容器两头地位对齐：
center - 绝对于单元格完结地位对齐：
end - 单元格拉伸占满整个容器：
stretch - 单元格两侧空白区域相等散布在容器内：
space-between - 单元格与单元格均分空白区域散布在容器内：
space-evenly
- 绝对于容器起始地位对齐：
- justify-content、align-content 复合语法：
place-content: 垂直对齐 程度对齐
-
作用在子元素上的款式
- 子元素程度方向占据单元格起始地位：
grid-column-start - 子元素程度方向占据单元格完结地位：
grid-column-end - 子元素垂直方向占据单元格起始地位：
grid-row-start - 子元素垂直方向占据单元格完结地位：
grid-row-end
grid-column-start: 第几条网格线; grid-column-end: 第几条网格线; grid-row-start: 第几条网格线; grid-row-end: 第几条网格线; grid-column-start:span 2; grid-row-start:span 2;- 复合写法：
grid-column: 起始线 / 完结线;grid-row: 起始线 / 完结线 - 设置单元格内容程度地位：
justify-self -
设置单元格内容垂直地位：
align-self- 单元格起始地位对齐：
start - 单元格两头地位对齐：
center - 单元格完结地位对齐：
end - 内容拉伸占满整个单元格：
stretch
- 单元格起始地位对齐：
- justify-self、align-self 复合语法：
place-self: 垂直对齐 程度对齐;
- 子元素程度方向占据单元格起始地位：