1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

/* 父元素 */

.grid {

  display: grid;

  /* 定义「网格容器」里有多少列，以及每列的宽度 */

  /* repeat 是个「重复函数」，表示后面的模式会被重复多次 */

  /* auto-fit 是一个特殊值，自动根据容器宽度，能放下几个就放几个，每列都用后面的规则 */

  /* minmax 也是一个函数，每列最小 200px，最大可以占 1fr（剩余空间的平分） */

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}

/* 子元素 */

.item {

  height: 200px;

  background-color: rgb(141, 141, 255);

  border-radius: 10px;

}