display: grid;

1

2

3

4

5

6

* { margin: 0; padding: 0; } // grid布局的关键代码！！！ // grid布局的关键代码！！！ // grid布局的关键代码！！！ .container { display: grid; /* 下面句的意思就是这个容器里面的子元素分成三列，每列都是100px宽 */ grid-template-columns: 100px 100px 100px; /* 下面这句的意思就是这个容器里面的子元素分成俩行，每行都是50px的高 */ grid-template-rows: 50px 50px; } .container div { text-align: center; line-height: 50px; border: 2px solid; margin: 2px; } .container div:nth-child(1) {background: yellow;} .container div:nth-child(2) {background: orange;} .container div:nth-child(3) {background: red;} .container div:nth-child(4) {background: yellowgreen;} .container div:nth-child(5) {background: paleturquoise;} .container div:nth-child(6) {background: greenyellow;} 让我们让列开始具有自适应特性吧。 CSS 栅格布局带来了一个全新的值:fraction单位，fraction单位通常简写为fr，它允许你根据需要将容器拆分为多个块。

让我们将每一列更改为一个 fraction 单位宽:
容器的CSS样式更改为：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50px 50px;
}
结果是栅格布局将会把整个宽度分成三个 fraction，每列占据一个 fraction 单位。

如果我们将grid-template-columns的值更改为1fr 2fr 1fr，第二列的宽度将会是其它两列的两倍。总宽现在是四个 fraction 单位，第二列占据两个 fraction 单位，其它列各占一个 fraction。

朋友们请自行观看效果，此时你的这些子元素都会随着你的屏幕宽度的变化而跟着变化了。

总的来说，fraction 单位值将使你可以很容易的更改列的宽度。

高级响应：
然而，上面列子并没有给出我们想要的响应性，因为网格总是三列宽。我们希望网格能根据容器的宽度改变列的数量。要做到这一点，你必须学习如下三个概念：

repeat()
首先我们学习repeat()函数。这是一个强大的指定列和行的方法。让我们使用repeat()函数来更改网格:
容器CSS更改为：
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 50px);
}
在上面代码中，repeat(3, 100px)等于100px 100px 100px。第一个参数指定行与列的数量，第二个参数指定它们的宽度，因此它将为我们提供与开始时完全相同的布局。

auto-fit
然后是auto-fit。让我们跳过固定数量的列，将3替换为自适应数量：
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, 100px);
grid-template-rows: repeat(2, 100px);
}
请注意，所有响应都发生在一行 css 代码中
现在的效果堪称完美。minmax()函数定义的范围大于或等于 min， 小于或等于 max。

因此，现在每列将至少为 100px。但如果有更多的可用空间，栅格布局将简单地将其均分给每列，因为这些列变成了 fraction 单位，而不是 100px。

如果朋友们要在子元素里面添加图片的话请继续向下看，CSS属性的object-fit: cover;

我们现在可以将你所有子元素当中的数字改成图片了，比如：

为了使图片适应于每个条目，我们将其宽、高设置为与条目本身一样，我们使用object-fit:cover。这将使图片覆盖它的整个容器，根据需要，浏览器将会对其进行裁剪。 增加CSS样式

.container > div > img {
width: 100%;
height: 100%;
object-fit: cover;
}