css 网格

创建css网格

将任何HTML元素的display属性设置为grid，即可将其变成网格容器。这使您能够使用与CSS Grid关联的所有其他属性。

注意：在CSS Grid中，父元素称为容器，其子元素称为items。

将container类的div的显示更改为grid。

  .container {
    font-size: 40px;
    width: 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;