将网页划分为一个个网格，可以任意组合不同的网格，做出各种各样的布局。
最强大的CSS布局方案。
Grid布局与Flex布局对比
相同：
- 都可以指定容器内部多个项目的位置
不同：
- Flex：轴线布局，即只能指定项目针对轴线的位置。一维布局
- Grid：将容器划分成行和列，产生单元格，然后指定项目所在的单元格。二维布局
基本概念
容器与项目
- 容器：采用网格布局的区域，container
- 项目：容器内部采用网格定位的子元素。item
注意：
项目只能是容器的顶层子元素，不包含项目的子元素。Grid布局只对项目生效
小栗子：
<div>
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
<!--对于这段代码，Grid布局对<p>标签不产生作用-->
行和列
- 容器里的水平区域称为“行”，row
- 容器中的垂直区域称为“列”，column
单元格（cell）
行和列的交叉区域则称为单元格。
m行n列则会产生m*n个单元格。
网格线
网格线：划分网格的线。grid line
正常情况下，n行有n+1个水平网格线，m列有m+1个垂直网格线。
容器属性
display属性
为容器设置display属性
div{
display:grid;
}
默认情况下，容器元素是块级元素，网格布局独占一行，即
也可将容器元素设置为行内元素
div{
display:inline-grid;
}
即与其兄弟元素显示在一行
注意：设置为网格布局之后，容器子元素的float、display:inline-block、display：table-cell、vertical-align、column-*等设置都将失效。
grid-template-columns和grid-template-rows
在容器指定了网格布局后，要对网格划分行和列。
- grid-template-columns定义列宽
- grid-template-rows定义行高
小栗子：
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
使用绝对单位px，也可以使用百分比
repeat()
由于设置网格时经常需要设置重复的值，所以为了简化，可以使用repeat()函数
小栗子：
.container {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}
repeat()函数中的第一个参数代表重复的次数，第二个参数代表所要重复的值。
grid-template-columns: repeat(2, 100px 20px 80px);
使用repeat()函数也可以进行某种模式的重复，上述栗子实现了对宽分别为100px，20px，80px的三个盒子的重复设置宽度
效果为：
auto-fill关键字
在单元格大小固定，但容器大小不固定时，尽可能的使每一行容纳更多的单元格，则使用auto-fill自动填充。
使用：在repeat()函数的第一个参数的位置使用auto-fill关键字
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
fr关键字
为了方便表示比例关系，网格布局提供了fr关键字（fraction 片段的缩写）。
小栗子：
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
表示两列宽度相同
.container {
display: grid;
grid-template-columns: 150px 1fr 2fr;
}
与绝对宽度同时使用，表示第三列宽度为第二列的二倍
minmax()
minmax()函数产生了长度范围，他接受两个参数，分别为最小值和最大值
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
上述代码表示：列宽不小于100px，不大于1fr
auto关键字
auto关键字表示由浏览器自己决定长度
grid-template-columns: 100px auto 100px;
上述代码表示：中间一栏的宽度随页面宽度自适应
网格线名称
可以在grid-template-columns和grid-template-rows属性中使用[]对网格线进行命名
.container {
display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
网格布局允许同一根线有多个名字
布局实例
对于两栏布局：
.wrapper {
display: grid;
grid-template-columns: 70% 30%;
}
传统12格布局：
grid-template-columns: repeat(12, 1fr);
grid-row-gap、grid-column-gap、grid-gap
- grid-row-gap属性设置行与行之间的间距
- grid-column-gap属性设置列于列之间的间隔
.container {
grid-row-gap: 20px;
grid-column-gap: 20px;
}
- grid-gap是grid-row-gap，grid-column-gap的简写合并形式
- 若grid-gap省略了第二个值，则默认与第一个值相等
grid-gap: <grid-row-gap> <grid-column-gap>;
例：
.container {
grid-gap: 20px 20px;
}
这三个属性的前缀grid-已删除
grid-template-areas
网格布局允许指定区域，grid-template-areas用于定义区域
每个区域可以包含一个或多个单元格
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
'd e f'
'g h i';
}
该代码将九个单元格分为了九个区域
grid-template-areas: 'a a a'
'b b b'
'c c c';
该代码将九个区域分为了三个区域
grid-template-areas: 'a . c'
'd . f'
'g . i';
若某些区域不需要被利用，则用(.)来表示
(.)表示没有用到该单元格，或者该单元格不属于任何区域
注意：
区域的命名会影响到网格线的命名，对于一个区域的起始和终止网格线的，会自动命名为区域名-start和区域名-end
grid-auto-flow
划分网格后，子元素会按顺序放置在每一个网格中，默认放置顺序是先行后列。
即：grid-auto-flow：row
先列后行：grid-auto-flow：column;
row dense和column dense:用于某些项目指定位置，剩余的项目尽可能填满
小栗子：让1，2项目各占据两个单元格，默认情况则为
设置了grid-auto-flow: row dense;后
设置了grid-auto-flow: column dense;后
justify-items、align-items、place-items
justify-items设置单元格内容的水平位置
align-items设置单元格内容的垂直位置
属性值：
- start：对齐单元格的起始边缘
- end：对齐单元格的结束边缘
- center：单元格内部居中
- stretch：拉伸，占满整个单元格的宽度（默认值）
.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}
place-items是align-items、justify-items的合并简写模式
place-items: <align-items> <justify-items>;
若省略第二个值，则默认与第一个值相等
justify-content、align-content、place-content
justify-content是整个内容区域在容器里面的水平位置
align-content是整个内容区域在容器里的垂直位置
属性值：
- start
- end
- center
- stretch
- space-around
- space-between
- space-evenly
start：对齐容器的起始边框
place-content属性是align和justify属性的合并简写模式。
place-content: <align-content> <justify-content>
若第二个值省略，则默认与第一个值相等
grid-auto-columns、grid-auto-rows
有时候，某些项目的指定位置在网格的外部。出现这种情况浏览器会自动生成多余的网格。
grid-auto-columns、grid-auto-rows对浏览器自动生成的多余网格进行行宽和列高的设置。
使用方法与grid-template-rows相同
grid-template、grid（不建议使用）
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
项目属性
grid-column-start、grid-column-end、grid-row-start、grid-row-end
项目的位置是可以指定的，通过指定项目的边框在哪根网格线上来指定
- grid-column-start：左边框的垂直网格线
- grid-column-end：右边框的垂直网格线
- grid-row-start：上边框的水平网格线
- grid-row-end：下边框的水平网格线
小栗子：
.item-1 {
grid-column-start: 2;
grid-column-end: 4;
}
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}
该属性值可以为第几跟网格线，也可为网格线名字
span关键字：表示跨越几个网格
.item-1 {
grid-column-start: span 2;
}
若产生项目的重叠，则使用z-index指定项目重叠顺序
grid-column 、grid-row
grid-column是grid-column-start和grid-column-end的合并简写形式
grid-row属性是grid-row-start属性和grid-row-end的合并简写形式
使用方式：
.item {
grid-column: / ;
grid-row: / ;
}
/前后可以为起始和终止网格线的数字，
也可是起始网格线/跨越网格数span
grid-area
指定项目放在哪一个区域
.item-1 {
grid-area: e;
}
也可以用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式
.item {
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
justify-self、align-self、place-self
justify-self设置单元格内容的水平位置
align-self设置单元格的垂直位置
.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}
place-self是align-self属性和justify-self属性的合并简写形式
place-self: <align-self> <justify-self>;
部分属性的应用效果及代码
