Grid网格布局
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Grids
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GYBBug8W-1640574336106)(imgs/grid_terms.png)]
CSS网格是一个用于web的二维布局系统。利用网格，你可以把内容按照行与列的格式进行排版。另外，网格还能非常轻松地实现一些复杂的布局。这一部分介绍关于使用网格进行页面排版的基本内容。
网格是由一系列水平及垂直的线构成的以一种布局模式。根据网格，我们能够将设计元素进行排列，帮助我们设计一系列具有固定位置以及宽度的元素的页面，使我们的网站页面更加统一。
一个网格通常具有许多的列（column）与行（row），以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽（gutter）。
决定好你的设计所需要的网格后，你可以创建一个CSS网格版面并放入各类元素。我们先来看看网格的基础功能，然后尝试做一个简单的网格系统。
定义一个网格
首先，将容器的 display 属性设置为 grid 来定义一个网络。与弹性盒子一样，将父容器改为网格布局后，他的直接子项会变为网格项。把下面的css规则加到你的文件中。
.container { display: grid; }
与弹性盒子不同的是，在定义网格后，网页并不会马上发生变化。因为 display: grid 的声明只创建了一个只有一列的网格，所以你的子项还是会像正常布局流那样从上而下一个接一个的排布。
为了让我们的容器看起来更像一个网格，我们要给刚定义的网格加一些列。那就让我们加三个宽度为 200px 的列。当然，这里可以用任何长度单位，包括百分比。
.container { display: grid; grid-template-columns: 200px 200px 200px; }
使用fr单位的灵活网格
除了长度和百分比，我们也可以用fr这个单位来灵活地定义网格的行与列的大小。这个单位表示了可用空间的一个比例，可能有点抽像，看看下面的例子吧。
使用下面的规则来创建3个1fr的列：
.container { display: grid; grid-template-columns: 1fr 1fr 1fr; }
每一列的宽度可以会随着可用空间变小而变小。fr 单位按比例划分了可用空间，这个与弹性盒子布局中的 flex 属性类似，再看下面的代码
.container { display: grid; grid-template-columns: 2fr 1fr 1fr; }
这个定义里，第一列被分配了 2fr 可用空间，余下的两列各被分配了 1fr 的可用空间，这会使得第一列的宽度是第二第三列的两倍。另外，fr 可以与一般的长度单位混合使用，比如 grid-template-columns: 300px 2fr 1fr，那么第一列宽度是 300px，剩下的两列会根据除去 300px 后的可用空间按比例分配。
网格间隙
使用 grid-column-gap 属性来定义列间隙；使用 grid-row-gap 来定义行间隙；使用 grid-gap 可以同时设定两者。
.container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-gap: 20px; }
重复构建列
你可以使用 repeat 来重复构建具有某些宽度配置的某些列。举个例子，如果要创建多个等宽轨道，可以用下面的方法。
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; }
和之前一样，你仍然得到了3个 1fr 的列。第一个传入 repeat 函数的值（3）表明了后续列宽的配置要重复多少次，而第二个值（1fr）表示需要重复的构建配置，这个配置可以具有多个长度设定。例如 repeat(2, 2fr 1fr)，如果你仍然不明白，可以实际测试一下效果，这相当于填入了 2fr 1fr 2fr 1fr。
