grid网格布局使用
定义
grid布局是指对网页进行划分成一个一个网格，然后根据自己的要求，可以任意组合。
以前写类似的功能，很麻烦，需要写很多的CSS去控制，有了grid就很方便了，可以随意进行组合。
跟flex有很多地方相似，包括有部分属性。不同的地方也很突出，尤其是flex是一维，只有横向。而grid是有横向和纵向。另外grid功能要更强大点。
基本属性
display
通过对父元素进行设置display:grid，表示里面包裹的元素全是网格布局。
display:grid
grid-template-columns/grid-template-cols
grid-template-columns：表示每行的宽度，有几个表示每行有几列，多出部分会往下排列
grid-template-cols：表示每列的宽度
.grid{
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: 50px 50px 50px 50px;
}
以上的代码表示横向的每个item宽度和高度是50px，多出一个就会被自动排布下去。
单位
单位既可以是px，也可以是百分比，或者用auto
- px
.grid{
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: 50px 50px 50px 50px;
}
- 百分比
.grid{
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
}
- auto 表示宽度或高度是剩余的部分
.grid{
display: grid;
grid-template-columns: 33.33% 10% auto;
grid-template-rows: 33.33% 20% auto;
}
repeat()
repeat()用来处理几个item宽度相同的时候，避免写相同的数值，或者是重复某种模式
.grid{
display: grid;
grid-template-columns: repeat(3,20%);
grid-template-rows: repeat(3,20%);
}
.grid{
display: grid;
grid-template-columns: repeat(3,100px 50px 100px);
grid-template-rows: repeat(3,100px 50px 100px);
}
auto-fill
当容器的宽度不确定，但是item的宽度确定，一行尽可能多的容纳item，这时可以使用auto-fill
.grid{
display: grid;
grid-template-columns: repeat(auto-fill,100px);
}
fr
方便表示比例关系，使用fr来表示
.grid{
display: grid;
grid-template-columns: 1fr 2fr;
}
这表示后者是前者的2倍
fr也可跟px结合，会更方便
.grid{
display: grid;
grid-template-columns:100px 1fr 2fr;
}
上面代码表示第一列是100px，第二列是第三列的一半。
minmax
表示最大值最小值
.grid{
display: grid;
grid-template-columns:1fr 2fr minmax(100px,1fr);
}
上面代码表示，最小值不小于100px，最大值不大于1fr
row-gap，column-gap，gap
row-gap：每行之间的间距
column-gap：每列之间的间距
gap：缩写行/列间距
.grid{
display: grid;
grid-template-columns:1fr 2fr 1fr;
row-gap: 10px;
column-gap: 10px;
}
或者简便的写法：gap
.grid{
display: grid;
grid-template-columns:1fr 2fr 1fr;
gap: 10px;
}
上面代码表示行/列之间的间隔是10px
grid-area/grid-template-area
grid-area和grid-template-area，用来划分区域,grid-area用来指定item的名称，grid-template-area根据子区域的名称来排布，表示展现的方式
.grid{
display: grid;
grid-template-columns:100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: "div1 div1 div1"
"div2 div3 div4"
"div5 div6 div7"
"div8 div9 div9";
}
.div1{
grid-area: div1;
background-color: tan;
}
上面代码表示div区域指代的grid的div1，整个页面想展示的布局是如下图：
grid-auto-flow
网格布局一般根据横向依次排布，如果想竖向排序，可以设置grid-auto-flow
.grid{
display: grid;
grid-template-columns:100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-auto-flow: column;
}
上面的代码表示按照竖向排序。
justify-items/align-items/place-items
justify-items/align-items类似，一个是水平方向上的展示，一个是垂直方向上的展示，属性一致
start：对齐起始位置
end：对齐结束位置
center：居中展示
stretch:拉伸至整个宽度
justify-items：设置的是item的水平方向展现方式。
.grid{
display: grid;
grid-template-columns:100px 100px 100px;
grid-template-rows: 100px 100px 100px;
justify-items: center;
}
上面代码表示每个item居中展示
align-items：设置的是垂直方向上的展现方式。
.grid{
display: grid;
grid-template-columns:100px 100px 100px;
grid-template-rows: 100px 100px 100px;
align-items: center;
}
上面代码表示item在垂直方向上居中展示
place-items是align-items和justify-items的结合
place-items:<align-items><justify-items>
justify-content/align-content/place-content
justify-content/align-content类似，一个是展示水平方向上，一个是展示垂直方向
justify-content：是指整个grid在整个容器中的水平方向展示位置
.grid{
display: grid;
grid-template-columns:100px 100px 100px;
grid-template-rows: 100px 100px 100px;
justify-content: center;
}
上面代码表示整个grid水平展现方式
grid-column-start/grid-column-end/grid-row-start/grid-row-end
可以指定项目的位置，通过控制左右上下的网格线
grid-column-start:左边框的网格线
grid-column-end：右边框的网格线
grid-row-start：上边框的网格线
grid-row-end：下边框的网格线
.div1{
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
background-color: tan;
}
上面代码表示第一个item的位置，开始位置是2，结束位置是4，上面的位置是1，下的位置是3，其他的item根据浏览器排布，由grid-auto-flow来决定，默认是先行后竖
tips:参考阮一峰的文章CSS Grid网格布局教程
