CSS 创建一个按列流动的 CSS 网格，根据内容动态设置列和行

在本文中，我们将介绍如何使用CSS创建一个按列流动的网格，并根据内容的多少动态设置网格的列和行。CSS网格是一个灵活且功能强大的布局工具，可以帮助我们轻松地创建复杂的网格结构。

阅读更多：CSS 教程

理解CSS网格

在开始创建我们的网格之前，让我们先了解一下CSS网格的基本概念和属性。

CSS网格属性

CSS网格通过一些关键属性来定义网格布局。以下是一些常用的CSS网格属性：

display: grid;：用于将一个元素指定为网格容器，该元素的所有直接子元素都成为网格项目。
grid-template-columns：用于设置网格的列。我们可以指定固定的像素值、百分比、网格尺寸或自动尺寸。
grid-template-rows：用于设置网格的行。与grid-template-columns类似，我们可以指定固定的像素值、百分比、网格尺寸或自动尺寸。
grid-column-gap：用于设置网格项目之间的列间距。
grid-row-gap：用于设置网格项目之间的行间距。
grid-column：用于设置网格项目的列位置和宽度。
grid-row：用于设置网格项目的行位置和高度。

创建按列流动的网格

现在让我们开始创建一个按列流动的网格。我们将在网格容器中放置一些网格项目，并使用CSS网格属性进行布局。

<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 class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 100px;
  grid-gap: 10px;
}

.grid-item {
  background-color: #ccc;
  text-align: center;
  line-height: 100px;
}

在上面的示例中，我们创建了一个带有9个网格项目的网格容器，并设置了每列的最小宽度为200px，每行的高度为100px。使用repeat(auto-fit, minmax(200px, 1fr))可以实现根据内容动态设置网格的列数，当屏幕空间足够时会显示更多的列，否则会自动调整为占满一整行。grid-gap属性设置了网格项目之间的间距。

我们可以在网格项目的CSS样式中添加一些颜色和对齐属性，以便更好地看到网格效果。

动态设置列和行

除了根据内容动态设置列数外，我们还可以根据内容的多少动态设置行数。在上面的示例中，我们已经设置了每行的高度为100px，并且当内容超出网格容器的高度时，会自动创建新的行。

<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 class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
  <div class="grid-item">13</div>
  <div class="grid-item">14</div>
  <div class="grid-item">15</div>
</div>

在上面的示例中，我们添加了一些额外的网格项目，使得内容超出网格容器的高度。我们可以看到，CSS网格会自动创建新的行来容纳这些项目。