Grid 网格布局
display:grid、行列定义、fr 单位、grid-area 区域命名
Grid 网格布局
Grid 是 CSS 最强的二维布局系统——同时控制行和列，适合页面级布局。
学完本章你将： 掌握 display:grid、行列定义、fr 单位、grid-area。
基本用法
css
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 三列，比例 1:2:1 */
/* grid-template-columns: repeat(3, 1fr); 三等分 */
gap: 20px; /* 行列间距 */
}行列定义
css
.container {
display: grid;
grid-template-columns: 200px 1fr 1fr; /* 第一列固定，后两列弹性 */
grid-template-rows: auto 1fr auto; /* header/main/footer 布局 */
gap: 20px 10px; /* 行间距 列间距 */
}区域命名（最直观）
css
.container {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }子项定位
css
.item {
grid-column: 1 / 3; /* 从第 1 条线到第 3 条线（跨 2 列） */
grid-row: 2 / 4; /* 跨 2 行 */
}
/* 简写 */
.item { grid-area: 2 / 1 / 4 / 3; } /* row-start / col-start / row-end / col-end */Flexbox vs Grid
| Flexbox | Grid | |
|---|---|---|
| 维度 | 一维（行或列） | 二维（行和列） |
| 适用 | 组件级布局 | 页面级布局 |
| 配合 | ✅ 可以互相嵌套 |