入门 CSS 网格嵌套

如果您想要创建一个强大的响应式布局，那么网格系统是不可或缺的。一些框架和库，如Bootstrap和Foundation，已经包含了他们自己的网格系统，但是实际上您可以使用CSS本身来创建一个简洁、灵活和易于维护的网格。

CSS 网格简介

CSS 网格是一个二维中的布局系统，意味着它可以将项目放置在水平和垂直方向上。它允许您创建一个网格容器，并定义具有相应的尺寸和位置的项目。

普通的网格通常以行和列的形式定义，并且可以很容易地进行扩展和缩小。这使得他们非常适合于响应式设计，因为它允许项目在不同的设备上进行重新排列和重构。

CSS 网格嵌套简介

CSS 网格嵌套是指将网格容器放置在另一个网格容器中的操作。这就允许您更好地控制内部项目的布局和排列。您可以在一个网格容器中创建一组项目，而这些项目本身也是一个网格。

在以下代码段中，我们将创建一个主容器，其中包含两个列，每个列包含两个行。我们也将添加几个少些样式，这样您就可以更好地理解每个项目的位置和尺寸。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  height: 300px;
  background-color: #ddd;
}
.grid-column {
  border: 1px solid #333;
  padding: 10px;
  background-color: #eee;
}
.grid-row {
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #fff;
}

.inner-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.inner-grid-item {
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #fff;
}

.inner-grid-item.large {
  grid-column: span 2;
}

.inner-grid-item.tall {
  grid-row: span 2;
}

<div class="grid-container">
  <div class="grid-column">
    <div class="grid-row">ROW 1</div>
    <div class="grid-row">ROW 2</div>
  </div>
  <div class="grid-column">
    <div class="grid-row">ROW 3</div>
    <div class="grid-row">ROW 4</div>
  </div>
</div>

在这段代码中，我们首先创建了一个主网格容器，其中包含两个网格列。我们还将网格容器和每个项目之间的距离设置为10像素，以便它们之间有一些间隔。

然后，我们在每个列中添加了两个行。每行都有一定的填充、边框和背景色，以便我们更好地看到它们在网格容器中的位置。

但我们现在想在这两个行中每个行都有一些更多的子项目。这就是我们需要用到嵌套了。

我们从创建另一个网格容器开始，这将放置在第二列的第二个行中。然后定义具有相应尺寸和位置的子项目。

首先，我们定义子项的列宽，然后设置跟外层网格容器一样的10像素的距离。

.inner-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

然后我们定义了子项，这里我们将创建4个网格项，其中两个item有一个更大的宽度（2列），而另外两个item则有更多的高度（2行）。

.inner-grid-item {
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #fff;
}

.inner-grid-item.large {
  grid-column: span 2;
}

.inner-grid-item.tall {
  grid-row: span 2;
}

最后，我们将这些子项目放置在网格容器中，如下所示：

<div class="grid-container">
  <div class="grid-column">
    <div class="grid-row">ROW 1</div>
    <div class="grid-row">ROW 2</div>
  </div>
  <div class="grid-column">
    <div class="grid-row">ROW 3</div>
    <div class="grid-row">
      <div class="inner-grid-container">
        <div class="inner-grid-item">Item 1</div>
        <div class="inner-grid-item">Item 2</div>
        <div class="inner-grid-item large">Item 3 (large)</div>
        <div class="inner-grid-item tall">Item 4 (tall)</div>
      </div>
    </div>
  </div>
</div>

总结

CSS 网格嵌套可以帮助您更好地控制项目的布局和排列，使您可以创建出更复杂、更动态的响应式设计。如果您还没有尝试过网格布局，请务必花些时间来学习它！