CSS网格重复

介绍

CSS网格重复是一种重复网格布局的CSS属性。它可以让我们创建可重复使用的网格模板，从而更方便地布局我们的网站。

我们可以使用repeat()函数定义网格重复的规则。例如，如果我们想要重复3列50像素宽度的网格，我们可以这样定义：

.grid-template-columns: repeat(3, 50px);

这将使得网格具有以下布局：

| 50px | 50px | 50px |

我们也可以定义不同的网格的规则。例如，下面的代码将创建一个3行3列的网格，其中第一行高度为100像素，第二行高度为50像素，第三行高度为75像素，所有的列都是100像素宽度：

.grid-template-rows: 100px 50px 75px;
.grid-template-columns: repeat(3, 100px);

这将使得网格具有以下布局：

| 100px | 100px | 100px |
|  50px |  50px |  50px |
|  75px |  75px |  75px |

实例

下面是一个示例，展示如何使用CSS网格重复创建一个3行3列的网格：

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

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  grid-gap: 10px;
}

.item {
  background-color: #ddd;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

这将创建一个3行3列的网格，其中每个单元格都是100像素宽度和高度，并且有10像素的间距：

总结

CSS网格重复是一个非常有用的CSS属性，它可以使我们更轻松地创建可重复使用的网格布局。记得使用repeat()函数定义网格重复的规则，并根据需要定义不同的行和列的高度或宽度。