CSS Grid 中使用 repeat() 函数实现自适应网格-JavaScript中文网-JavaScript教程资源分享门户

CSS Grid 是一项非常强大的前端技术，它允许我们以一种非常灵活的方式布局网格，从而使网站更具可读性、易于维护和响应式设计。在此基础上，repeat() 函数则允许我们更加精细地控制网格的数量和大小。在本文中，我们将探讨如何使用 repeat() 函数实现自适应网格。

repeat() 函数简介

repeat() 函数是 CSS Grid 中的一个函数，它允许我们重复某个模式来创建一组规则的网格线。repeat() 函数有两个参数：第一个参数表示重复的次数，第二个参数表示我们要重复的规则。例如：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

这个例子中，我们将网格列分成三份，每一份都占据一份可用空间。

使用 repeat() 函数创建自适应网格

使用 repeat() 函数可以方便地创建一个自适应网格，我们可以通过给自适应的网格条目添加自动流布局来创建它们。

<div class="grid">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 20px;
}

在这个例子中，我们使用 repeat() 函数中的 auto-fill 参数来创建一个自适应的网格，这意味着我们可以根据可用空间的大小，自动分布条目。

我们进一步使用 minmax() 函数来限制每个网格列的大小。minmax() 函数有两个参数：第一个参数是指定最小值，第二个参数是指定最大值。通过使用 1fr ，我们保证了每个网格列将占据等分的空间，而我们的网格非常适应可用的空间。

此外，我们使用 grid-gap 属性来添加一些空白的空间，并提高网格的可读性。

repeat() 函数的深度使用

除了用来创建自适应网格之外，repeat() 函数还可以用于更高级的布局，例如指定列的数量来设置响应式设计。

在下面例子中，我们设置网格的列，当视口的宽度小于 400 像素时，我们会显示 1 列，当视口的宽度大于或等于 400 像素时，我们会显示 2 列。

-- -------------------- ---- -------
----- -
  -------- -----
  ---------------------- ---------------- ------------- ------
-

------ ----------- ------ -
  ----- -
    ---------------------- --------- ------------- ------
  -
-

在上面的例子中，我们使用了 auto-fit 参数来创建一个自适应列的网格。这意味着我们的列将会自动布局，以填充可用空间。我们也使用 minmax() 函数来限制每列的最小和最大大小。

另外需要注意的是我们通过媒体查询来设置这个网格的响应式设计。当视口的宽度小于 400 像素时，我们将来使用网格布局生成一个列，并且当视口的宽度大于或等于 400 像素时，我们将使用两列。

结论

repeat() 函数是一个非常强大的工具，可以让我们更加灵活地设计网格布局。它可以用于创建自适应的网格，以及更高级的布局，例如响应式设计。我们希望在这篇文章中能够帮助您更深入地了解它的使用方法。

最后，我们提供一个完整的示例代码，并希望您可以尝试使用 repeat() 函数，进一步探索 CSS Grid 在前端中的应用。

<div class="grid">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

-- -------------------- ---- -------
----- -
  -------- -----
  ---------------------- ----------------- ------------- ------
  --------- -----
-

------ ----------- ------ -
  ----- -
    ---------------------- --------- ------------- ------
  -
-

------ ----------- ------- -
  ----- -
    ---------------------- --------- ------------- ------
  -
-

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/674905fc93696b02680ae9e5