在前端开发中，实现网格布局是非常常见的任务。为此，我们可以使用 CSS Grid，一个灵活强大的工具，可以轻松地实现网格布局。本文将深入介绍 CSS Grid 中的 grid-template-rows 和 grid-template-columns 属性，来帮助我们更好地使用它们创建网格布局。
grid-template-rows
grid-template-rows 属性用来定义网格的行数和行高。它可以接受多个值，用空格分隔，它们将按照从上到下的顺序排列。
例如，以下代码将创建一个包含三行的网格，第一行高度为 100px，第二行高度为 auto，第三行高度为 50%。
.grid {
display: grid;
grid-template-rows: 100px auto 50%;
}我们还可以使用 repeat() 函数来简化行数的定义。例如，以下代码将创建一个包含五行的网格，行高度都为 50px。
.grid {
display: grid;
grid-template-rows: repeat(5, 50px);
}值得注意的是，如果我们将一个行的高度设置为 auto，它将会根据内容自适应高度。如果行高度的总和大于了网格容器的高度，那么超出部分将会溢出。因此，我们需要小心使用 auto。同时，我们可以使用 minmax() 函数来定义一个行高的最小和最大值。例如，以下代码将创建一个行高最小值为 100px，最大值为 200px 的自适应行。
.grid {
display: grid;
grid-template-rows: 100px minmax(auto, 200px) 50%;
}grid-template-columns
grid-template-columns 属性与 grid-template-rows 类似，用于定义网格的列数和列宽。它也可以接受多个值，用空格分隔，它们将按照从左到右的顺序排列。
例如，以下代码将创建一个包含两列的网格，第一列宽度为 100px，第二列宽度为 50%。
.grid {
display: grid;
grid-template-columns: 100px 50%;
}同样，我们也可以使用 repeat() 函数来简化列数的定义。例如，以下代码将创建一个包含四列的网格，列宽都为 25%。
.grid {
display: grid;
grid-template-columns: repeat(4, 25%);
}类似 grid-template-rows，我们也可以使用 minmax() 函数和 auto 来定义列宽。
网格布局实例
为了更好地理解 grid-template-rows 和 grid-template-columns 的使用方法，我们来看一个实例。以下代码会创建一个包含四个网格子项的网格布局，其中第一个子项跨越两行，第二个子项跨越两列。
<div class="grid"> <div class="item a">A</div> <div class="item b">B</div> <div class="item c">C</div> <div class="item d">D</div> </div>
-- -------------------- ---- ------- ----- - -------- ----- ------------------- --- ---- ---------------------- --- ---- ---- ----- ------- ------ ------- --- ----- ----- - -- - --------- - - -- - -- - ------------ - - -- - ----- - -------- ----- ---------------- ------- ------------ ------- ---------- ----- ------------ ----- ------ ----- - -- - ----------------- -------- - -- - ----------------- -------- - -- - ----------------- -------- - -- - ----------------- -------- -
这段代码通过定义 grid-template-rows 和 grid-template-columns 来创建一个包含两行两列的网格。然后我们通过 grid-row 和 grid-column 属性来定义子项的位置和跨度。子项的样式通过背景色、字体、大小等属性定义。
最终的效果如下：
通过这个实例，我们可以更好地理解 grid-template-rows 和 grid-template-columns 属性的使用方法，以及如何通过它们来创建网格布局。
总结
CSS Grid 中的 grid-template-rows 和 grid-template-columns 属性非常强大和灵活，可以用来实现各种复杂的网格布局。通过本文的讲解和示例代码，我们希望读者能够更好地理解它们的用法，并能够熟练地运用它们来创建网格布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6596a97aeb4cecbf2da72c55