答案：grid-template-rows和columns定义网格行列结构，配合fr、px、minmax等单位实现响应式布局，并通过grid-area或行列定位分配元素区域。
在使用 CSS Grid 布局时，grid-template-rows 和 grid-template-columns 是定义网格结构的核心属性。它们分别控制行高和列宽，合理搭配能实现灵活、响应式的布局。
明确网格结构设计思路
在编写 grid-template-rows 与 columns 前，先规划好页面的分区。比如常见的“头部 + 内容区 + 侧边栏 + 底部”布局，可以按以下方式划分：
- 用 grid-template-rows 定义垂直方向的区块高度（如 header 占固定高度，main 区自适应）
- 用 grid-template-columns 设置水平方向的列宽（如 sidebar 固定宽度，content 区弹性伸缩）
示例：
.grid-container {display: grid;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 250px 1fr;
}
灵活使用单位搭配
合理组合不同单位能让布局更具适应性：
立即学习“前端免费学习笔记（深入）”；
- fr：表示可用空间的份数，适合主内容区域
- px / rem：用于固定尺寸区域（如导航栏、侧边栏）
- minmax()：设置最小最大范围，增强响应性
- auto：根据内容自动调整大小
例如让中间列至少 300px，但可随窗口变大：
grid-template-columns: 200px minmax(300px, 1fr);grid-template-rows: auto 1fr auto;
配合 grid-area 精准定位元素
当行列结构定义完成后，可通过 grid-row 和 grid-column 或简写 grid-area 将子元素放入指定区域。
示例：将 aside 放在右侧第一行
aside {grid-column: 2;
grid-row: 1;
}
或使用命名区域更直观：
grid-template-areas:"header header"
"sidebar main"
"footer footer";
header { grid-area: header; }
sidebar { grid-area: sidebar; } 基本上就这些。掌握行列定义的逻辑和单位搭配，再结合命名区域或坐标定位，就能高效构建复杂且响应式的页面结构。
