简介
CSS Grid 是一种强大的布局系统，它能够轻松地创造具有复杂性的网格布局，而仅仅使用少量的代码。然而，在实现网格布局时，如何控制网格项的大小是非常重要的。在这篇文章中，我们将深入探讨如何在 CSS Grid 中控制网格项的大小。
网格项大小属性
CSS Grid 具有用于控制网格项大小的几个属性：
grid-template-rows：用于设置网格行的大小。grid-template-columns：用于设置网格列的大小。grid-row-gap：用于设置网格行之间的空隙。grid-column-gap：用于设置网格列之间的空隙。grid-template-areas：用于指定网格项的位置和大小。
在使用这些属性时，我们可以采用固定的单位，例如 px 或 em，也可以采用相对单位，例如百分比、fr 和 minmax()。
使用固定单位
例如，我们可以通过以下方式设置一行和一列宽度为 100px，网格行之间的间隔为 20px，网格列之间的间隔为 30px：
.grid-container {
display: grid;
grid-template-rows: 100px;
grid-template-columns: 100px;
grid-row-gap: 20px;
grid-column-gap: 30px;
}在上面的示例中，我们首先将 display 属性设置为 grid，表示这是一个网格容器。然后，我们通过 grid-template-rows 和 grid-template-columns 分别设置网格行和列的大小，以 px 为单位。
接下来，我们使用 grid-row-gap 和 grid-column-gap 设置行和列之间的间隔。
使用相对单位
相对单位可以根据容器的大小进行自适应，这对于制作响应式设计很有用。
例如，我们可以通过以下方式设置一行和一列的宽度为所有可用宽度的 20%，并使用 fr 单位来指定其他可用空间的比例：
.grid-container {
display: grid;
grid-template-rows: repeat(1, 1fr);
grid-template-columns: repeat(1, 20%);
}在上面的示例中，我们使用 repeat() 函数来指定一个行或列的重复数量，这里我们只有一个行和一列，因此重复数量为 1。然后，我们使用 1fr 单位设置行高和列宽。
使用 minmax() 函数
minmax() 函数是一种非常灵活的方式，可根据容器的大小来确定网格项的大小。
例如，我们可以通过以下方式使用 minmax() 函数设置网格项的最小值为 100px，最大值为 1fr：
.grid-container {
display: grid;
grid-template-rows: minmax(100px, 1fr);
grid-template-columns: minmax(100px, 1fr);
}在上面的示例中，我们使用 minmax() 函数分别设置行高和列宽的最小值和最大值。当网格容器的大小大于等于 200px（最小值的两倍）时，网格项将根据可用空间自动调整大小，直到占用整个可用空间。
使用 grid-template-areas
grid-template-areas 是一种非常有用的方式，可帮助我们指定网格项的位置和大小。
例如，我们可以通过以下方式设置 3 行 3 列的网格，其中第一行和第一列为固定宽度为 100px 的网格项，其他网格项大小自适应，网格项位置如下：
-- -------------------- ---- -------
--------------- -
-------- -----
------------------- --------- -----
---------------------- --------- -----
--------------------
------- ------ -------
---- ---- -----
---- ---- ------
-
------- -
---------- -------
------ ------
-
---- -
---------- ----
-
----- -
---------- -----
-在上面的示例中，我们首先通过 grid-template-rows 和 grid-template-columns 分别设置 3 行和 3 列的网格。然后，我们通过 grid-template-areas 将网格项分配到网格中。每个区域的名称在双引号中指定，并使用空格和换行符将它们组合在一起。
接下来，我们定义了三个网格项，并通过 grid-area 属性将它们放置在网格中。
结论
在本文中，我们讨论了如何在 CSS Grid 中控制网格项的大小。我们展示了使用固定单位、相对单位、minmax() 函数和 grid-template-areas 的不同方法。希望这篇文章能够帮助你更好地理解 CSS Grid，并能够更好地掌握网格项大小的控制方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670c6ec266ef9cf37fb117a7