CSS Grid 布局是一种强大的布局方式，它可以让我们更加灵活地控制网格系统。在实际开发中，我们常常需要使用自动创建的单元格，但是这些单元格的宽度和高度如何控制呢？本文将介绍如何使用 grid-auto-rows 和 grid-auto-columns 属性来控制自动创建的单元格宽度和高度。
grid-auto-rows 属性
grid-auto-rows 属性用于控制自动创建的行的高度。它可以设置一个固定的值，也可以使用 minmax() 函数来设置一个最小值和最大值。
固定值
当我们希望自动创建的行的高度是一个固定值时，可以使用 grid-auto-rows 属性来设置。例如：
--------------- - -------- ----- ---------------------- --------- ----- --------------- ------ -
以上代码中，我们设置了一个网格容器，它包含 3 列，每一列的宽度都是相等的。同时，我们使用 grid-auto-rows 属性来设置自动创建的行的高度为 100px。
minmax() 函数
当我们希望自动创建的行的高度在一定范围内浮动时，可以使用 minmax() 函数来设置最小值和最大值。例如：
--------------- - -------- ----- ---------------------- --------- ----- --------------- ------------- ------ -
以上代码中，我们设置了一个网格容器，它包含 3 列，每一列的宽度都是相等的。同时，我们使用 grid-auto-rows 属性来设置自动创建的行的高度在 100px 和自动高度之间浮动。
grid-auto-columns 属性
grid-auto-columns 属性用于控制自动创建的列的宽度。它可以设置一个固定的值，也可以使用 minmax() 函数来设置一个最小值和最大值。
固定值
当我们希望自动创建的列的宽度是一个固定值时，可以使用 grid-auto-columns 属性来设置。例如：
--------------- - -------- ----- ------------------- --------- ----- ------------------ ------ -
以上代码中，我们设置了一个网格容器，它包含 3 行，每一行的高度都是相等的。同时，我们使用 grid-auto-columns 属性来设置自动创建的列的宽度为 100px。
minmax() 函数
当我们希望自动创建的列的宽度在一定范围内浮动时，可以使用 minmax() 函数来设置最小值和最大值。例如：
--------------- - -------- ----- ------------------- --------- ----- ------------------ ------------- ------ -
以上代码中，我们设置了一个网格容器，它包含 3 行，每一行的高度都是相等的。同时，我们使用 grid-auto-columns 属性来设置自动创建的列的宽度在 100px 和自动宽度之间浮动。
示例代码
下面是一个完整的示例代码，演示了如何使用 grid-auto-rows 和 grid-auto-columns 控制自动创建的单元格的宽度和高度：
--------- -----
------
------
-------
--------------- -
-------- -----
---------------------- --------- -----
------------------- --------- -----
--------- -----
--------------- ------------- ------
------------------ ------------- ------
-
---------- -
----------------- --------
------- --- ----- -----
-------- -----
----------- -------
-
--------
-------
------
---- -----------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
------
-------
-------以上代码中，我们设置了一个网格容器，它包含 3 行和 3 列，每一行和每一列的大小都是相等的。同时，我们使用 grid-auto-rows 和 grid-auto-columns 属性来控制自动创建的单元格的宽度和高度在 100px 和自动大小之间浮动。我们还设置了 grid-gap 属性来设置单元格之间的间隔。最终，我们得到了一个如下所示的网格布局：
总结
通过本文的介绍，我们学习了如何使用 grid-auto-rows 和 grid-auto-columns 控制自动创建的单元格宽度和高度。这些属性可以让我们更加灵活地控制网格系统，为我们的布局带来更多的可能性。希望本文对你有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65ff8ac8d10417a222ab75e5