重复自动填充 CSS 网格 minmax

简介

在 CSS 网格布局中，minmax() 函数允许我们设置一个可变的网格项大小，而不必为每个项目指定一个确切的大小。通过使用 minmax() 函数，我们可以在一个容器中自动填充网格项，并使它们重复地达到容器的末尾。

语法

函数的语法如下：

minmax(minimum, maximum)

其中，minimum 是网格项的最小大小，maximum 是网格项的最大大小。

示例

假设我们有一个包含 3 个网格项的容器，我们希望这些网格项自动填充并重复达到容器的末尾。我们可以使用下面的 CSS：

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

在这个例子中，我们使用了 repeat() 函数和 auto-fill 关键字来重复网格的列数，以便填充容器的可用空间。然后，我们使用 minmax() 函数来设置网格项的大小，在这种情况下，我们设置最小大小为 200 像素，最大大小为 1fr，以便使网格项根据可用空间自动调整大小。

总结

minmax() 函数是一个非常强大的 CSS 网格布局工具，可以让我们自动填充网格，而无需硬编码每个项目的确切大小。使用 minmax() 函数，我们可以轻松管理网格项的大小，并使它们自适应不同的屏幕尺寸。