在 CSS Grid 中，我们可以轻松地布局网格，并在每个网格中放置内容。但是有时候，我们希望能够控制网格中行与行之间的间距，以达到更好的视觉效果和可读性。本文将介绍如何在 CSS Grid 中实现控制行高的效果。
利用 grid-template-rows 属性来控制行高
在 CSS Grid 中，可以使用 grid-template-rows 属性来定义整个网格的行高。该属性使用空格或斜杠分隔开每一行的高度值。
.grid {
display: grid;
grid-template-rows: 50px 100px 150px;
}在上面的示例中，我们定义了一个包含三个行的网格，每个行的高度依次为 50px、100px 和 150px。如果需要网格中的每一行都有相同的高度，可以使用 repeat() 函数来简化代码。
.grid {
display: grid;
grid-template-rows: repeat(3, 100px);
}在上述代码中，我们使用 repeat() 函数将三个相同的高度值 100px 缩写成 repeat(3, 100px)。
利用 grid-row-gap 属性来控制行间距
如果我们需要在每行之间添加一些间距，可以使用 grid-row-gap 属性。该属性用于定义行之间的空隙大小。
.grid {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-row-gap: 20px;
}在上面的示例中，我们定义了一个包含三个行的网格，并将每行的高度设置为 100px，行间距设置为 20px。此时，每行之间就会有 20px 的空隙了。
利用 grid-row-start 和 grid-row-end 属性来控制行高
除了使用 grid-template-rows 和 grid-row-gap 属性来控制行高外，还可以使用 grid-row-start 和 grid-row-end 属性来控制某个网格项所跨越的行数，从而间接地控制行高。
-- -------------------- ---- ------- ----- - -------- ----- ------------------- --------- ------- - ----- - --------------- -- -- ------ -- ------------- -- -- ------ -- -
在上述代码中，我们定义了一个包含三个行的网格，每行的高度为 100px。然后，我们创建了一个网格项，并设置它的 grid-row-start 和 grid-row-end 属性的值，使其跨越了网格的第一行和第二行。由于网格项的高度等于跨越的行数乘以行高，所以这种方式也可以控制行高。
总结
以上就是 CSS Grid 中控制行高的常用方法。通过使用 grid-template-rows 和 grid-row-gap 属性，我们可以轻松地控制整个网格的行高和行间距；通过使用 grid-row-start 和 grid-row-end 属性，我们可以间接地控制某个网格项所跨越的行数，从而控制行高。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64549fe0968c7c53b0872209