CSS Grid 网格布局教程

CSS网格的两个核心要素是包装器（父级）和项目（子级）。包装器是实际的网格，项目是网格中的内容。
这是其中包含六个项目的包装器的标记：

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

要将包装器div变成网格，我们只需要显示以下内容
grid：
但是，这还没有做任何事情，因为我们还没有定义我们希望网格的外观。它会简单地将6堆叠div’s在一起。

我添加了一些样式，但这与CSS网格没有任何关系。

列和行

为了使其成为二维，我们需要定义列和行，让我们创建三列和两行。我们将使用grid-template-row和grid-template-column属性。

当我们为编写了三个值时grid-template-columns，我们将获得三列。我们将获得两行，因为我们已为指定了两个值grid-template-rows。

这些值指示我们希望列的宽度为（100px），我们希望行的高度为（50px）。结果如下：

为了确保您正确理解值之间的关系以及网格的外观，还请看一下此示例。

.wrapper {
    display: grid;
    grid-template-columns: 200px 50px 100px;
    grid-template-rows: 50px 50px;
}

尝试掌握代码和布局之间的联系。
播放方法如下：

放置物品

您需要学习的下一件事是如何将项目放置在网格上。这是您获得超能力的地方，因为它使创建布局变得非常简单。

让我们使用与之前相同的标记创建一个3x3网格。

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

这将导致以下布局：

请注意，我们在页面上仅看到3x2网格，而我们将其定义为3x3网格。这是因为我们只有六个项目可用于填充网格。如果再增加三个，则最低行也将被填充。

要定位和调整项目的大小，我们将其定位为目标，并使用grid-column和grid-row属性：

.item1 {
    grid-column-start: 1;
    grid-column-end: 4;
}

这里我们要说的是，我们希望item1在第一条网格线上开始，在第四列线上结束。换句话说，它将占用整行。

这是在屏幕上显示的方式：

您是否感到困惑，为什么只有3列却有4列？看一下这张图片，我在其中绘制了黑色的列线：

注意，我们现在正在使用网格中的所有行。当我们使第一个项目占据整个第一行时，它会将其余项目推下。

最后，我想展示一种编写上述语法的简单方法：

为了确保您正确理解了这个概念，让我们重新排列一下项目。

.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
}
.item3 {
    grid-row-start: 2;
    grid-row-end: 4;
}
.item4 {
    grid-column-start: 2;
    grid-column-end: 4;
}

这是页面上的外观。试着绕着为什么看起来像这样。应该不会太难。