CSS Grid 布局是一种强大的排版方式，可以实现复杂的网格布局。除了常见的固定大小的网格，CSS Grid 布局还支持自动填充，可以根据网格容器的大小自动计算网格的数量和大小，自动适应不同的设备和视口。
本文将介绍 CSS Grid 布局如何实现自动填充，包括如何设置网格容器和网格项的属性，如何使用 minmax() 函数和 repeat() 函数实现自动填充，以及如何使用 grid-template-areas 属性和命名网格实现更灵活和可读性更好的自动填充布局。
网格容器和网格项
在 CSS Grid 布局中，网格布局是通过设置网格容器和网格项的属性来实现的。网格容器是指包含网格子元素的元素，可以通过 display 属性设置为 grid 或 inline-grid 来创建一个网格布局。网格项是指网格容器中的每个子元素，可以通过 grid-column 和 grid-row 属性设置每个子元素所占据的网格行和列。
例如，以下代码创建一个 3 行 3 列的网格布局：
-- -------------------- ---- ------- ---- ----------------------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ------ ------- --------------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- - ---------- - ------- --- ----- ------ -------- ---- - --------
这里使用了 repeat() 函数来设置网格容器的列和行，每个网格项设置了边框和内边距，显示为一个 3 行 3 列的网格布局。
minmax() 和 repeat() 函数
在 CSS Grid 布局中，可以使用 minmax() 函数和 repeat() 函数来实现自动填充。minmax() 函数可以设置网格项的最小和最大宽度或高度，用于根据网格容器的大小自动计算网格项的大小。repeat() 函数可以重复一个模式，用于自动创建一组网格行或列。
例如，以下代码创建一个自动填充的网格布局，每个网格项的宽度为 200 像素到 1 列的最大宽度：
-- -------------------- ---- ------- ---- ----------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ------ ------- --------------- - -------- ----- ---------------------- ---------------- ------------- ------ --------------- ------ --------- ----- - ---------- - ----------------- ----- ------ ------ ---------- ---- -------- ----- ---------------- ------- ------------ ------- - --------
这里使用了 auto-fit 关键字来自动填充空白区域，minmax() 函数设置了网格项的最小宽度为 200 像素，最大宽度为 1 列的最大宽度，grid-auto-rows 属性设置了网格项的高度为 200 像素，grid-gap 属性设置了网格项之间的间距。因此，这个自动填充的网格布局可以自适应不同的容器大小，并根据剩余空间自动填充空白区域。
grid-template-areas 和命名网格
除了以上介绍的自动填充方式，CSS Grid 布局还支持使用 grid-template-areas 属性和命名网格来实现更灵活和可读性更好的自动填充布局。grid-template-areas 属性是一个字符串，可以使用点号（.）表示空白区域，使用单引号或双引号表示命名的网格区域。
例如，以下代码创建一个命名网格的自动填充布局，每个网格项按顺序自动填充，但在第一行和第一列有一个大的元素占据了两个网格，而第一行和第一列的其他网格项也是命名的网格区域：
-- -------------------- ---- -------
---- -----------------------
---- ---------------- ----------
---- ---------------- ----------
---- ---------------- ----------
---- ---------------- ----------
---- ---------------- ----------
---- ---------------- ----------
---- ---------------- ----------
---- ---------------- ----------
---- ---------------- ----------
------
-------
--------------- -
-------- -----
---------------------- ----------------- ------------- ------
--------------- ------
--------- -----
--------------------
-- - - --
-- - - --
-- - - ---
-
---------- -
----------------- -----
------ ------
---------- ----
-------- -----
---------------- -------
------------ -------
-
-- -
---------- --
--------- ---- --
------------ ---- --
-
-- -
---------- --
-
-- -
---------- --
-
-- -
---------- --
-
-- -
---------- --
-
-- -
---------- --
-
-- -
---------- --
-
-- -
---------- --
-
-- -
---------- --
-
--------这里使用了命名网格和 grid-area 属性来定义网格项的位置，grid-row 和 grid-column 属性也可以用来设置网格项的位置，如 span 2 表示跨越 2 行或 2 列为一个网格区域。由于 grid-template-areas 属性和命名网格可以更直观地描述布局，因此在实际项目中也有广泛的应用。
总结
CSS Grid 布局是一种强大的排版方式，支持自动填充和命名网格等高级功能，可以实现复杂的网格布局。在实现自动填充时，可以使用 minmax() 函数和 repeat() 函数来设置网格项的大小和重复模式，也可以使用 grid-template-areas 属性和命名网格来描述布局。通过结合这些技术和属性，可以创造出更灵活和可读性更好的自动填充布局。
以上是本文对 CSS Grid 布局如何实现自动填充的介绍和实例示范。希望对前端开发者了解和应用 CSS Grid 布局有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6517ab9895b1f8cacdfd6123