grid布局

PS：整理自阮一峰 CSS Grid 网格布局教程后续会加上自己练习内容。

一、容器属性

1.display: grid;&display: inline-grid; 指定一个容器采用网格布局 PS：默认容器元素都是块级元素
备注a 网格布局，float、display:inline-block、display:table-cell、vertical-align和column-*等设置都将失效
2.grid-template-columns&grid-template-rows 属性定义每一列的列宽&属性定义每一行的行高
备注b 单位可以使用绝对单位百分比
3.row-gap 行间距 column-gap 列间距例：row-gap: 20px;column-gap: 20px; gap是row-gap和column-gap合并简写形式 gap: <row-gap> <column-gap>
4.grid-template-areas 定义区域 display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px;grid-template-areas: 'a a a' 'b b b' 'c c c';
5.grid-auto-flow 划分网格后，容器子元素排列顺序。PS：默认会先行后列
6.justify-items 设置单元格内容的水平位置排列(左中右) & align-items 设置单元格内容的垂直位置(上中下)
例:justify-items: start | center | end | stretch; align-items: start | center | end | stretch;
7.justify-content 整个内容区域在容器里面的水平位置(左中右) & align-content 整个内容区域的垂直位置(上中下)
例:justify-content: start | center | end | stretch | space-around | space-between | space-evenly
align-content: start | center | end | stretch | space-around | space-between | space-evenly
8.grid-auto-columns和grid-auto-rows用来设置，浏览器自动创建的多余网格的列宽和行高。
PS: 如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高
例：display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px;grid-auto-rows: 50px;
9.grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式
grid属性是grid-template-rows 、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。PS: 不推荐使用简写

二、项目属性

1.grid-column-start 属性：左边框所在的垂直网格线
grid-column-end 属性：右边框所在的垂直网格线
grid-row-start 属性：上边框所在的水平网格线
grid-row-end 属性：下边框所在的水平网格线
例：.item-1 {grid-column-start: 2;grid-column-end: 4;}
例：设置了dense
.item-1 {grid-column-start: 1; grid-column-end: 3; grid-row-start: 2; grid-row-end: 4;}
指定网格线名字设置：.item-1 {grid-column-start: header-start;grid-column-end: header-end;}
span关键字表示"跨越"，即左右边框(上下边框)之间跨越多少个网格
.item-1 {grid-column-start: span 2;}
.item-1 {grid-column-end: span 2;}这个效果和上面一样的
2.grid-column&grid-row分别是grid-column-start和grid-column-end&grid-row-start和grid-row-end的合并简写形式
语法：.item {grid-column: <start-line> / <end-line>; grid-row: <start-line> / <end-line>}
例：.item-1 {grid-column: 1 / 3; grid-row: 1 / 2;}
等同于：.item-1 {grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2;}
例2：.item-1 {background: #b03532; grid-column: 1 / 3; grid-row: 1 / 3;}
等同于：.item-1 {background: #b03532; grid-column: 1 / span 2; grid-row: 1}
注：斜杠以及后面的部分可以省略，默认跨越一个网络
3.grid-area指定项目放在哪一个区域 .item-1 { grid-area: e; } PS: item-1位于名字是e区域
grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式
.item {grid-area: <row-start> / <column-start> / <row-end> / <column-end>;}
4.justify-self属性设置单元格内容的水平位置(左中右) & align-self属性设置单元格内容的垂直位置(上中下)
place-self属性是align-self属性和justify-self属性的合并简写形式
如果省略第二个值，place-self属性会认为这两个值相等
place-self: <align-self> <justify-self>
例：.item-1 {justify-self: start;}
place-self: center center;