CSS grid-template-rows 属性

CSS grid-template-rows 属性

简介

CSS grid-template-rows 属性用于定义网格容器中的行（rows）。该属性用于指定每一行的高度，可以使用长度值或百分比表示。

语法

grid-template-rows: none | | inherit;

  • none：表示没有行高，通常用于自动分配行高的情况（auto fr）。

  • ：表示一系列的行高，可以使用长度值、百分比或 fr 值表示。其中，百分比值是相对于网格容器的高度计算的，fr 值表示弹性网格轨道。

  • inherit：表示继承自父元素的行高设置。

的语法如下：

? ?

其中：

  • 是行高的宽度，可以使用长度值、百分比或 fr 值表示；

  • 是一个以空格分隔的行名称列表；

  • ? 表示可选项。

示例

以下示例定义了一个由三行组成的网格容器，第一行高度为100px，第二行高度为2/1（即原始大小的两倍），第三行高度为25%（相对于网格容器的高度计算）：

.grid-container {
  display: grid;
  grid-template-rows: 100px 2fr 25%;
}

注意事项

  • 如果网格容器设置了 grid-auto-rows 属性，则该属性会覆盖 grid-template-rows 属性中为自适应轨道分配的任何行高。

  • 不同的网格轨道可能无法共享相同的行高。这通常发生在网格容器中出现大量的空白空间的情况下。

  • 在使用 grid-template-rows 属性的同时，建议同时使用 grid-template-columns 属性，以扩展其布局功能。

总结

CSS grid-template-rows 属性用于定义网格容器中的行高，通过指定每一行的高度大小来进行布局，支持使用长度值、百分比和 fr 值进行设置。通过掌握网格布局的基本知识，可以快速实现网站的布局设计。

CSS grid-template-columns 属性 CSS height 属性