CSS Grid 网格布局 — 二维布局终极方案
全面掌握CSS Grid布局：网格容器、行列定义、fr单位、网格区域、对齐方式、响应式网格、常见布局模式 · 难度：进阶 · +15XP
CSS Grid 网格布局 — 二维布局终极方案
如果说Flexbox是"一维布局之王"，那CSS Grid就是"二维布局之神"。Flexbox擅长处理行或列上的排列，而Grid同时控制行和列，让你用声明式的方式构建复杂的二维网格布局。
Grid核心概念
Grid布局同样有容器和项目。设置 display: grid 后，容器内的直接子元素自动成为网格项目。Grid使用行（row）和列（column）的网格线来定位元素。
定义网格
/* 基础网格：3列2行 */
.grid {
display: grid;
grid-template-columns: 200px 1fr 200px; /* 3列：固定-弹性-固定 */
grid-template-rows: auto 1fr; /* 2行 */
gap: 20px; /* 行列间距 */
}
/* fr单位：弹性份数（最强大的Grid特性） */
.fluid-grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 三等分，中间列宽是两边的2倍 */
/* total = 1+2+1 = 4份，每份 = 容器宽/4 */
}
/* repeat()函数：重复定义 */
.grid-12 {
display: grid;
grid-template-columns: repeat(12, 1fr); /* 12等分网格 */
gap: 16px;
}
/* minmax()：设置最小最大范围 */
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
/* 自动填充，每列最小280px，空间富余时平均分配 */
gap: 24px;
}
Grid项目定位
/* 按网格线定位 */
.item {
grid-column-start: 1;
grid-column-end: 3; /* 从列线1到列线3，跨2列 */
grid-row-start: 1;
grid-row-end: 3; /* 从行线1到行线3，跨2行 */
}
/* 简写 */
.item-big {
grid-column: 1 / 3; /* 跨2列 */
grid-row: 1 / span 2; /* 跨2行 */
}
/* 网格区域命名（最直观的定位方式） */
.layout {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 250px;
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; }
Grid对齐属性
| 属性 | 作用于 | 说明 |
|---|---|---|
justify-items | 容器内所有项目 | 行轴（水平）对齐：stretch/start/center/end |
align-items | 容器内所有项目 | 列轴（垂直）对齐 |
place-items | 容器内所有项目 | 前两者的简写 |
justify-content | 整个网格 | 网格在容器中的水平对齐 |
align-content | 整个网格 | 网格在容器中的垂直对齐 |
justify-self | 单个项目 | 覆盖justify-items |
align-self | 单个项目 | 覆盖align-items |
Grid vs Flexbox 选用指南
| 场景 | 推荐 | 原因 |
|---|---|---|
| 页面整体布局（header+main+footer） | Grid | 同时控制行列，grid-template-areas语义化 |
| 导航栏/工具栏 | Flexbox | 单行/单列排列，对齐灵活 |
| 卡片网格 | Grid | auto-fill + minmax自动响应 |
| 表单布局（标签+输入框） | Grid | 两列对齐完美 |
| 水平居中按钮组 | Flexbox | 一句话搞定: justify-content:center |
动手练习
- 页面骨架布局：使用grid-template-areas制作一个完整的页面骨架：页头（全宽）、导航（左侧200px）、主内容区（中间弹性）、侧边栏（右侧250px）、页脚（全宽）。
- 响应式卡片墙：使用grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 制作一个自动适应的卡片网格，至少12张卡片，调整浏览器宽度观察自动换行效果。
- 仪表盘布局：使用Grid制作一个数据仪表盘页面，包含：一个全宽概览区、4个等分指标卡片、一个2/3宽图表区、一个1/3宽列表区。