网格区域(Grid Area)
使用 grid 布局使用 grid 布局很简单，通过display属性设置属性值为 grid 或 inline-grid 或者是 subgrid（该元素父元素为网格，继承父元素的行和列的大小） 就可以了。
网格容器中的所有子元素就会自动变成网格项目（grid item），然后设置列（grid-template-columns）和 行（grid-template-rows）的大小，设置 grid-template-columns 有多少个参数生成的 grid 列表就有多少个列。
注：当元素设置了网格布局，column、float、clear、vertical-align属性无效。
如果没有设置 grid-template-columns，那么默认只有一列，宽度为父元素的 100%，例如
比如我们设置如下的 HTML，
<div class="grid-container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
</div>复制代码
在 CSS 中，我们不设置 grid-template-columns，只设置 grid-template-row
.grid-container{
display: grid;
grid-template-rows: 50px 80px 100px;
background: pink;
}
.item{
border: 2px solid palegoldenrod;
color: #fff;
text-align: center;
font-size: 20px;
}复制代码
显示如下
不设置 grid-template-columns
设置了 grid-template-columns 的话，设置了几个参数，就有几列（不超过 grid item 的个数），然后设置的 grid-template-row 参数就是每一列的高度（超出列数的高度无效）
比如：
.grid-container{
padding: 20px;
display: grid;
grid-template-rows: 50px 100px 60px 80px;
grid-template-columns: 50px 40px 100px 80px;
background: pink;
}
.item{
border: 2px solid palegoldenrod;
color: #fff;
}复制代码
虽然我们设置了四个 grid-template-rows，但是因为只有两行，所以只有前两个值生效。效果如下：
设置 grid-template-columns
当然，我们也可以像 flex 一样设置每一列的宽度：
.grid-container{
padding: 20px;
display: grid;
grid-template-rows: 50px 100px 60px;
grid-template-columns: 1fr 1fr 2fr;
background: pink;
}复制代码
注意到我们使用了一个新的单位：fr
css fr 单位是一个自适应单位，fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。
tips：fr 是基于网格容器可用空间来计算的（flex 也是一样），所以我们可以和其他单位混合使用，如果需要的话
是不是找到了 flex 的感觉，这样设置效果如下：
使用 fr 按比例设置宽度
行或列最小和最大尺寸minmax() 函数来创建行或列的最小或最大尺寸，第一个参数定义网格轨道的最小值，第二个参数定义网格轨道的最大值。可以接受任何长度值，也接受 auto 值。auto 值允许网格轨道基于内容的尺寸拉伸或挤压。
.grid-container{
padding: 20px;
display: grid;
grid-template-rows: minmax(100px,200px) minmax(50px,200px);
grid-template-columns: 1fr 1fr 2fr;
background: pink;
height: 300px;
}复制代码
我们将第一行的高度设置为 minmax(100px,200px)，第二行的高度设置为minmax(50px,200px)，容器总高度设置为 300px，这时每一列的高度要怎么算呢？
先判断总高度是小于第一列高度的最大值和第二列高度的最大值之和的，如果大于最大值之和，那么第一列和第二列的高度都为设置的最大值，如果是小于最小值之和的话，那么第一列和第二列的高度都为设置的最小值。
现在问题来了，我们这种情况是总高度是小于第一列高度的最大值和第二列高度的最大值之和的，这样就是先用 总高度 300px - 第一列最小高度 100px - 第二列最小高度 50px = 150px。第一列高度：第一列最小高度 100px 150px/2 = 175px;第二列高度：第一列最小高度 50px 150px/2 = 125px;
效果如下：
