CSS Grid：九宫格画廊
css · beginner · 10-15 min · Step 1/5CSS Grid 网格布局
Grid 是 CSS 中最强大的二维布局工具，可以同时控制行和列。
Grid vs Flexbox
| 维度 | Flexbox | Grid |
|---|---|---|
| 布局 | 一维（行或列） | 二维（行和列同时） |
| 适合 | 导航栏、卡片列表 | 页面整体布局、图片画廊 |
| 对齐 | 主轴 + 交叉轴 | 行轨道 + 列轨道 |
基本用法
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 等宽列 */
gap: 16px; /* 行列间距 */
}
关键属性
grid-template-columns— 定义列grid-template-rows— 定义行gap— 间距grid-column: span 2— 跨列fr单位 — 弹性比例分配
Grid 是做图片画廊、仪表板布局的首选！