CSS Grid 基础教程：通过实例理解栅格的概念

CSS Grid 是一种强大的布局方式，它可以轻松地创建复杂的网格布局，而不需要使用复杂的 CSS 或 JavaScript。本文将介绍 CSS Grid 的基础知识，并通过实例来理解栅格的概念。

栅格的概念

CSS Grid 是一个二维网格系统，它由行和列组成。每个网格单元格可以包含内容，如文本、图像或其他 HTML 元素。网格行和列的数量可以根据需要进行定义，以创建所需的布局。网格项是网格中的内容，可以放置在任何网格单元格中。

创建网格

要创建一个网格，我们需要将一个元素设置为网格容器，并定义其行和列。下面是一个简单的网格示例：

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

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

.grid-item {
  background-color: #ccc;
  padding: 20px;
}

在上面的示例中，我们将 .grid-container 元素设置为网格容器，并定义了三列和两行。我们还添加了一个 grid-gap 属性，以在网格项之间添加间距。

放置网格项

要将元素放置在网格单元格中，我们可以使用 grid-row 和 grid-column 属性。这些属性指定网格项的起始行和列和结束行和列。

<div class="grid-container">
  <div class="grid-item item1">1</div>
  <div class="grid-item item2">2</div>
  <div class="grid-item item3">3</div>
  <div class="grid-item item4">4</div>
  <div class="grid-item item5">5</div>
  <div class="grid-item item6">6</div>
</div>

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

.grid-item {
  background-color: #ccc;
  padding: 20px;
}

.item1 {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

.item2 {
  grid-row: 1 / 2;
  grid-column: 2 / 4;
}

.item3 {
  grid-row: 1 / 2;
  grid-column: 4 / 5;
}

.item4 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

.item5 {
  grid-row: 2 / 3;
  grid-column: 3 / 5;
}

.item6 {
  grid-row: 1 / 3;
  grid-column: 5 / 6;
}

在上面的示例中，我们使用 grid-row 和 grid-column 属性来放置每个网格项。例如，.item1 元素的起始行是 1，结束行是 3，起始列是 1，结束列是 2。

响应式网格

CSS Grid 可以轻松地创建响应式网格布局。我们可以使用 @media 查询来定义不同的网格布局，以适应不同的屏幕尺寸。

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

.item1 {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

.item2 {
  grid-row: 1 / 2;
  grid-column: 2 / 4;
}

.item3 {
  grid-row: 1 / 2;
  grid-column: 4 / 5;
}

.item4 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

.item5 {
  grid-row: 2 / 3;
  grid-column: 3 / 5;
}

.item6 {
  grid-row: 1 / 3;
  grid-column: 5 / 6;
}

@media screen and (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto auto;
  }

  .item1 {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }

  .item2 {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
  }

  .item3 {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
  }

  .item4 {
    grid-row: 4 / 5;
    grid-column: 1 / 2;
  }

  .item5 {
    grid-row: 5 / 6;
    grid-column: 1 / 2;
  }

  .item6 {
    grid-row: 6 / 7;
    grid-column: 1 / 2;
  }
}

在上面的示例中，我们使用 @media 查询来定义一个不同的网格布局，以适应小于 768 像素的屏幕尺寸。在这个布局中，我们将网格容器的行定义为自动，以适应不同的内容高度。

总结

CSS Grid 是一种强大的布局方式，它可以轻松地创建复杂的网格布局。在本文中，我们介绍了 CSS Grid 的基础知识，并通过实例来理解栅格的概念。我们学习了如何创建网格和放置网格项，以及如何创建响应式网格布局。希望本文对您有所帮助，谢谢阅读！

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658a46ebeb4cecbf2df78fd0