基础 CSS XY 网格自动调整大小

CSS 网格布局是 Web 开发中最强大的布局系统之一。 在这种布局中，我们可以通过样式表定义行和列，以创建任意数量的动态网格。

其中一项强大的功能是基于单元格的自适应大小，这意味着可以在 CSS 中定义网格的大小，使其根据屏幕大小自适应布局。

创建网格

创建网格非常简单。 我们只需要将父容器的 display 属性设置为 grid，然后定义网格的行和列。

以下是一个基本的 CSS 网格布局示例：

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

上述示例将创建一个包含 3 行和 3 列的网格。每个单元格都是 100 像素高，1 分数单位宽（即根据可用的空间平均分配）。

自适应大小

要创建自适应大小的网格，我们只需要使用 minmax() 函数来定义每个网格的大小范围。

以下是一个示例：

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

上述示例将创建一个包含多行和多列的网格，其中每个单元格的最小宽度为 200 像素，并且在可用的空间中平均分配。

您还可以使用 auto-fit 而不是 auto-fill。 这将使网格项自动适应整个网格容器，从而在浏览器窗口大小更改时自动调整大小。

以下是一个将其组合起来的示例：

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

这将创建一个具有自适应大小的多行和多列网格。

总结

网格布局是 Web 开发中最强大的布局系统之一，还具有自适应布局的功能，可根据屏幕大小自动调整大小。

通过使用 minmax() 函数，您可以为每个单元格定义大小范围，并使用 auto-fill 或 auto-fit 使其自动适应网格容器。

希望您现在已经掌握了 CSS 网格布局的自适应大小技巧。