创建css网格
将任何HTML元素的display属性设置为grid，即可将其变成网格容器。这使您能够使用与CSS Grid关联的所有其他属性。
注意：在CSS Grid中，父元素称为容器，其子元素称为items。
将container类的div的显示更改为grid。
.container {
font-size: 40px;
100%;
background: LightGray;
/* Only change code below this line */
display:grid;
/* Only change code above this line */
}
使用grid-template-columns添加列
仅仅创建一个网格元素并不会使您走得太远。您还需要定义网格的结构。要将某些列添加到网格，请使用grid-template-columns网格容器上的属性，如下所示：
.container {
display: grid;
grid-template-columns: 50px 50px;
}
这将为您的网格提供两列，每列分别为50px宽。赋予grid-template-columns属性的参数数量表示网格中的列数，每个参数的值表示每列的宽度。
为网格容器分别指定三列100px。
display: grid;
grid-template-columns:100px 100px 100px;
使用grid-template-rows添加行
在网格中添加两行，50px每行都高。
grid-template-rows:50px 50px;
使用CSS网格单位更改列和行的大小
您可以使用绝对和相对单位，比如px和em在CSS网格定义的行和列的大小。您也可以使用这些：
-
fr：将列或行设置为可用空间的一小部分，
-
auto：自动将列或行设置为其内容的宽度或高度，
-
%：将列或行调整为容器宽度的百分比。
这是在预览中生成输出的代码：
grid-template-columns: auto 50px 10% 2fr 1fr;
此代码段创建了五列。第1列与其内容一样宽，第2列为50px，第3列为容器的10％，最后两列为它的容器；剩余的空间分为三部分，第4列分配两个空间，第5列分配一个空间。
使用grid-column-gap创建列间隙
有时您希望在各列之间留出空隙。要在列之间添加间隙，请使用如下grid-column-gap属性：
grid-column-gap: 10px;
这将在我们所有列之间创建10px的空白空间。
使用grid-row-gap创建行间隙
您可以使用grid-row-gap与在上一个挑战中在列之间添加间隙的相同方法，在网格的行之间添加间隙。
为高行创建间隙5px。
grid-row-gap:5px;
利用网格间隙更快地添加间隙
grid-gap是一个速记属性grid-row-gap，并grid-column-gap从更方便使用前两个挑战。如果grid-gap具有一个值，则将在所有行和列之间创建间隙。但是，如果有两个值，它将使用第一个值设置行之间的间隔，并使用第二个值设置列。
用于在行之间grid-gap引入10px间隙，在列之间引入间隙20px。
grid-gap：10px 20px;