CSS Grid 布局是一种强大的网格布局系统，它可以让我们更轻松地创建复杂的布局。在 CSS Grid 布局中，我们可以使用 grid-template-rows 和 grid-template-columns 属性来设置网格的行和列的大小、宽度和高度。
grid-template-rows 和 grid-template-columns 的基本语法
grid-template-rows 和 grid-template-columns 属性的基本语法如下：
.container {
display: grid;
grid-template-rows: 100px 200px 300px;
grid-template-columns: 1fr 2fr 1fr;
}在上面的示例中，我们使用 grid-template-rows 属性来设置网格的行的大小，使用 grid-template-columns 属性来设置网格的列的大小。它们的值可以是一个固定的长度值，也可以是一个相对值（如 fr）。
固定长度值
我们可以使用固定的长度值来设置网格的行和列的大小。例如，我们可以使用像素或百分比来设置它们的大小。例如：
.container {
display: grid;
grid-template-rows: 100px 200px 300px;
grid-template-columns: 20% 30% 50%;
}在上面的示例中，我们设置了三行，分别为 100 像素、200 像素和 300 像素，同时设置了三列，分别为 20%、30% 和 50%。
相对值
相对值是相对于网格容器的大小来设置网格行和列的大小。在 CSS Grid 布局中，我们可以使用 fr 单位来设置相对大小。例如，我们可以设置一个网格容器，其中一列是两个其他列的大小：
.container {
display: grid;
grid-template-rows: 100px 200px 300px;
grid-template-columns: 1fr 2fr 1fr;
}在上面的示例中，我们设置了三行，分别为 100 像素、200 像素 和 300 像素，同时设置了三列，第一列和第三列的大小都是 1fr，第二列的大小是第一列和第三列大小的两倍。
自动调整大小
在 CSS Grid 布局中，我们还可以使用 auto 关键字来设置网格行和列的大小。如果一个行或列被设置为 auto，它将自动调整大小以适应其内容。例如：
.container {
display: grid;
grid-template-rows: 100px auto 300px;
grid-template-columns: auto 2fr 1fr;
}在上面的示例中，我们设置了三行，第一行的高度为 100 像素，第二行的高度将自动调整以适应其内容，第三行的高度为 300 像素，同时设置了三列，第一列的宽度将自动调整以适应其内容，第二列的宽度是第一列的两倍，第三列的宽度是第一列的一半。
实例代码
下面是一个简单的使用 grid-template-rows 和 grid-template-columns 设置行列的宽度高度的示例：
-- -------------------- ---- -------
--------- -----
------
------
-------
---------- -
-------- -----
------------------- ----- ----- ------
---------------------- --- --- ----
--------- -----
-
----- -
----------------- -----
------- --- ----- -----
----------- -------
-------- -----
-
-------------------- -
----------------- -----
-
--------
-------
------
---- ------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
------
-------
-------在上面的示例中，我们使用了 grid-gap 属性来设置网格项之间的间距。这将在每个网格项之间创建一个 10 像素的间距。运行代码，您将看到一个 3 行 3 列的网格布局。第一列和第三列的宽度都是第二列的一半，第一行的高度为 100 像素，第二行的高度为 200 像素，第三行的高度为 300 像素。
总结
在 CSS Grid 布局中，grid-template-rows 和 grid-template-columns 属性是设置网格行和列的大小、宽度和高度的重要属性。我们可以使用固定长度值、相对值和自动调整大小来设置它们的大小。通过使用这些属性，我们可以轻松地创建复杂的网格布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fefcc1d10417a222a2d5f3