Grid布局
Grid布局
概述
Grid 布局即网格布局，目前css布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格，然后利用这些网格组合做出各种各样的布局。比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系，目前唯一一种 CSS 二维布局。在兼容性方面，截至目前，几乎所有的浏览器都对 CSS Grid 提供了原生的支持。
Grid布局优点：这是一个二维布局系统，最大优点就是可以同时处理列和行.
Grid 布局和 flex 布局
flex 布局和 Grid 布局有实质的区别:
flex布局是一维布局Grid布局是二维布局
flex 布局一次只能处理一个维度上的元素布局，一行或者一列。
Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。
网格布局的属性
属性的基本概念：
- 容器（container）——有容器属性
- 项目（items）——有项目属性
- 行（row)
- 列（column）
- 间距（gap) ——单元格之间的距离
- 区域（area）—— 自己划分每个单元格占据的区域
- 内容（content)
容器和项目
Grid 和 flex 类似，布局的属性都是分为两类，一类定义在容器上，称为容器属性，一类定义在项目上，称为项目属性
采用网格布局的区域，称为“容器”。容器内部的采用网格定位的子元素称为“项目”
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
上面的代码中，box就是容器，item就是项目
网格轨道
通过 grid-template-rows 和 grid-template-columns 指定当前容器的行和列后，这里的行和列就是网格轨道。但在实际页面中，由于页面的内容不确定，内容可能会超过 grid-template-columns和 grid-template-rows 指定的网格轨道个数，这个时候网格将会在隐式网格中创建行和列。按照默认，这些轨道将自动定义尺寸，所以会根据它里面的内容改变尺寸。
网格线
网格线是Grid布局规范中最重要的概念之一。网格线是用来在水平和垂直方向分割网格的线。水平方向的网格线是从左向右；垂直方向是从上往下。网格线的编号都是从 1 开始的。
Grid 布局属性
Grid 布局属性分为两大类
- 一类是容器属性，
- 一类是项目属性。
容器属性
容器属性声明 display：grid 则该容器是一个块级元素，设置成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 属性定义每一行的行高。
.box {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
/*指定了一个三行三列的网格，列宽和行高都是100px*/
}
repeat() 函数
有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用 repeat() 函数，简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。比如上面行高都是一样的，我们可以这么去实现，实际效果是一模一样的
.box {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}
grid-template-columns、grid-template-rows设置的行或者列比较多的时候，可以使用repeat() 这个函数简化重复的值
auto-fill 关键字
表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格，这时可以使用 auto-fill 关键字表示自动填充。
有的时候，父容器的尺寸是不确定的，我们需要把子元素往父容器中逐个填充，这个时候我们可以利用auto-fill不确定容器尺寸下的自动填充：
box {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
表示每列宽度 100px ，然后自动填充，直到容器不能放置更多的列
fr 关键字
fr 是单词fraction的缩写，表示分数。
Grid 布局还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。 fr 单位代表网格容器中可用空间的一等份。 grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。
.box {
display: grid;
grid-template-columns: 200px 1fr 2fr;
}
minmax() 函数
我们有时候想给网格元素一个最小和最大的尺寸， minmax() 函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值。grid-template-columns: 1fr 1fr minmax(300px, 2fr)的意思是，第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍。
.box {
display: grid;
grid-template-columns: 1fr 1fr minmax(300px, 2fr);
}
auto 关键字
auto 关键字表示由浏览器自己决定长度。通过 auto关键字，我们可以轻易实现三列或者两列布局。
grid-template-columns: 100px auto 100px 表示第一第三列为 100px，中间由浏览器决定长度。
.box {
display: grid;
grid-template-columns: 100px auto 100px;
}
row-gap 属性
row-gap属性设置行与行的间隔（行间距）
row-gap: 10px表示行间距是 10px
column-gap 属性
column-gap属性设置列与列的间隔
column-gap: 20px 表示列间距是 20px
gap 属性
gap属性是 column-gap 和 row-gap 的合并简写形式：gap: 10px 20px
grid-auto-flow
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行
这个顺序由 grid-auto-flow 属性决定，默认值是 row ，即"先行后列"。也可以将它设成 column ，变成"先列后行"。
grid-auto-flow: column;
