如何在 CSS Grid 中利用自适应长度？-JavaScript中文网-JavaScript教程资源分享门户

CSS Grid 是一个强大的布局工具，它可以让我们轻松地创建复杂的网格布局。但是，在实际使用中，我们经常需要让网格中的某些元素自适应长度，以便适应不同的屏幕大小和内容长度。本文将介绍如何在 CSS Grid 中利用自适应长度，以及一些实用的技巧和示例代码。

使用 auto 关键字

CSS Grid 中的 auto 关键字可以让网格中的元素自动适应长度。当一个网格项的长度设置为 auto 时，它会自动根据内容和其他元素的长度来调整自己的宽度。例如，下面的代码将创建一个包含两个网格项的网格，第一个网格项的宽度为 200 像素，第二个网格项的宽度为自适应长度：

.grid {
  display: grid;
  grid-template-columns: 200px auto;
}

在这个例子中，第一个网格项的宽度为 200 像素，第二个网格项的宽度会自动调整，以填充剩余的空间。这样，当屏幕尺寸发生变化时，第二个网格项会自动适应不同的宽度。

使用 minmax 函数

除了使用 auto 关键字，我们还可以使用 minmax 函数来控制网格项的自适应长度。minmax 函数可以让我们设置一个元素的最小和最大宽度，以便在不同的情况下自动调整宽度。例如，下面的代码将创建一个包含两个网格项的网格，第一个网格项的宽度为 200 像素，第二个网格项的宽度为 200 像素到自适应长度之间：

.grid {
  display: grid;
  grid-template-columns: 200px minmax(200px, auto);
}

在这个例子中，第一个网格项的宽度为 200 像素，第二个网格项的宽度将在 200 像素和自适应长度之间自动调整。这样，当屏幕尺寸发生变化时，第二个网格项会自动适应不同的宽度，并且不会超过 200 像素。

使用 repeat 函数

除了使用 auto 和 minmax 函数，我们还可以使用 repeat 函数来控制网格项的自适应长度。repeat 函数可以让我们设置一个元素的重复宽度，以便在不同的情况下自动调整宽度。例如，下面的代码将创建一个包含四个网格项的网格，前三个网格项的宽度为 100 像素，最后一个网格项的宽度为自适应长度：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 100px) auto;
}

在这个例子中，前三个网格项的宽度为 100 像素，最后一个网格项的宽度将自动调整，以填充剩余的空间。这样，当屏幕尺寸发生变化时，最后一个网格项会自动适应不同的宽度。

结论

在 CSS Grid 中利用自适应长度可以让我们轻松地创建适应不同屏幕大小和内容长度的网格布局。我们可以使用 auto 关键字、minmax 函数和 repeat 函数来控制网格项的自适应长度。通过这些技巧，我们可以更加灵活地设计网页布局，提高用户体验。

参考代码：

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

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