在css中如何用grid-template-rows控制行高-css教程-PHP中文网

在css中如何用grid-template-rows控制行高

P粉602998670

发布： 2025-10-26 22:47:01

原创

279人浏览过

grid-template-rows用于定义网格行高，支持px、%、auto、fr等单位，可使用repeat()简化重复值，如60px 1fr 40px实现固定与自适应混合布局。

在css中如何用grid-template-rows控制行高

在 CSS Grid 布局中，grid-template-rows 属性用于定义网格容器中每一行的高度。你可以通过它精确控制每行的尺寸，适应内容或固定布局需求。

使用 grid-template-rows 时，为每一行指定一个高度值，多个值用空格分隔：

grid-template-rows: 100px 50px auto;

这表示第一行高 100px，第二行为 50px，第三行根据内容自动调整。

你可以使用多种单位来设置行高：

假设你有一个三行布局，顶部导航栏固定 60px，中间内容区域占满剩余空间，底部固定 40px：

.container {
  display: grid;
  grid-template-rows: 60px 1fr 40px;
  height: 100vh;
}

这里 1fr 让中间行自动填充除去顶部和底部后的所有可用高度。

行者AI

行者AI绘图创作，唤醒新的灵感，创造更多可能

100

如果有多行相同高度，可以用 repeat() 简化：

grid-template-rows: repeat(3, 100px);

等同于：100px 100px 100px

也可以混合使用，例如：

grid-template-rows: 50px repeat(2, 1fr) 60px;

表示第一行 50px，接下来两行各占 1fr，最后一行 60px。

基本上就这些。合理使用 grid-template-rows 能让你轻松实现灵活且响应式的行高控制。不复杂但容易忽略细节，比如容器是否有明确高度，否则 fr 单位可能无法正确计算。

以上就是在css中如何用grid-template-rows控制行高的详细内容，更多请关注php中文网其它相关文章！

大家都在看：