在CSS网格布局体系中，grid-template-rows和grid-template-columns是定义网格容器行列结构的核心属性，前者用于设置网格的行高，后者用于设置网格的列宽，二者共同决定了网格的整体框架。
grid-template-rows和grid-template-columns基础语法
这两个属性都属于网格容器的属性，需要作用在设置了display: grid或display: inline-grid的元素上，语法格式如下：
/* 定义行高 */ grid-template-rows: 行高取值1 行高取值2 ...; /* 定义列宽 */ grid-template-columns: 列宽取值1 列宽取值2 ...;
取值的数量对应网格的行数或列数，每个取值之间用空格分隔，支持多种不同的取值类型。
常见取值类型及应用场景
1. 固定像素取值
直接使用像素值定义行高或列宽，适合需要固定尺寸的场景，比如固定高度的导航栏、固定宽度的侧边栏。
.container {
display: grid;
/* 定义3行，高度分别为100px、200px、150px */
grid-template-rows: 100px 200px 150px;
/* 定义2列，宽度分别为300px、500px */
grid-template-columns: 300px 500px;
}
2. 百分比取值
百分比取值是相对于网格容器的尺寸计算，适合需要响应式适配的场景，比如列宽占容器宽度的百分比。
.container {
display: grid;
/* 3行高度分别占容器高度的20%、60%、20% */
grid-template-rows: 20% 60% 20%;
/* 2列宽度分别占容器宽度的30%、70% */
grid-template-columns: 30% 70%;
}
3. fr单位取值
fr是Grid布局特有的分数单位，用于表示剩余空间的分配比例，适合需要灵活分配剩余空间的场景。
.container {
display: grid;
/* 3行按1:2:1的比例分配容器高度 */
grid-template-rows: 1fr 2fr 1fr;
/* 3列按1:3:1的比例分配容器宽度 */
grid-template-columns: 1fr 3fr 1fr;
}
4. repeat函数简化写法
当行列的取值存在重复规律时，可以使用repeat函数简化代码，第一个参数是重复次数，第二个参数是重复的取值。
.container {
display: grid;
/* 等价于 grid-template-rows: 100px 100px 100px */
grid-template-rows: repeat(3, 100px);
/* 等价于 grid-template-columns: 1fr 1fr 1fr 1fr */
grid-template-columns: repeat(4, 1fr);
}
5. auto自动取值
auto表示由浏览器自动计算尺寸，会根据内容或者剩余空间自动调整行高或列宽。
.container {
display: grid;
/* 第一行高度固定100px，第二行高度自适应内容 */
grid-template-rows: 100px auto;
/* 第一列固定200px，第二列自适应剩余宽度 */
grid-template-columns: 200px auto;
}
综合应用示例
下面实现一个常见的页面布局：顶部导航栏、中间左侧侧边栏加右侧内容区、底部页脚，完整代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Grid布局示例</title>
<style>
.page {
display: grid;
/* 行高：导航100px，内容区自适应，页脚80px */
grid-template-rows: 100px 1fr 80px;
/* 列宽：侧边栏200px，内容区自适应 */
grid-template-columns: 200px 1fr;
height: 100vh;
margin: 0;
}
.header {
background: #4a90e2;
grid-column: 1 / 3; /* 导航占满两列 */
}
.sidebar {
background: #f5f5f5;
}
.content {
background: #ffffff;
padding: 20px;
}
.footer {
background: #333333;
color: #fff;
grid-column: 1 / 3; /* 页脚占满两列 */
}
</style>
</head>
<body>
<div class="page">
<div class="header">顶部导航</div>
<div class="sidebar">侧边栏</div>
<div class="content">内容区域</div>
<div class="footer">底部页脚</div>
</div>
</body>
</html>
这个示例中通过grid-template-rows定义了三行的高度，通过grid-template-columns定义了两列的宽度，再结合grid-column属性让导航和页脚跨列显示，快速实现了常见的页面结构。
注意事项
- 如果定义的行列数量超过子元素数量，多余的网格会保持定义的尺寸，只是没有内容填充
- fr单位只会分配除去固定尺寸后的剩余空间，不会压缩固定尺寸的网格
- repeat函数可以和不同取值混合使用，比如
grid-template-columns: 200px repeat(2, 1fr) 150px
CSS_Gridgrid-template-rowsgrid-template-columns网格布局修改时间：2026-07-04 09:33:26