display: grid 网格布局

Grid 是一个二维布局系统，通过行和列的网格结构精确控制元素位置。以下是核心概念的可视化解析：

🟦 网格容器与网格项

css

.container {
  display: grid; /* 启用网格布局 */
  grid-template-columns: 100px 200px 1fr; /* 3列 */
  grid-template-rows: 80px auto 120px;    /* 3行 */
  gap: 15px; /* 网格间距 */
}

结构图解：

text

┌────────────┬──────────────┬─────────┐
│  100px     │    200px     │  1fr    │ ← 列定义
├─────┬──────┼──────┬───────┼────┬────┤
│     │      │      │       │    │    │
│  A  │      │  B   │       │ C  │    │ ← 行1 (80px)
│     │      │      │       │    │    │
├─────┼──────┼──────┼───────┼────┼────┤
│     │      │      │       │    │    │
│  D  │      │  E   │       │ F  │    │ ← 行2 (auto)
│     │      │      │       │    │    │
├─────┼──────┼──────┼───────┼────┼────┤
│     │      │      │       │    │    │
│  G  │      │  H   │       │ I  │    │ ← 行3 (120px)
│     │      │      │       │    │    │
└─────┴──────┴──────┴───────┴────┴────┘
   ▲           ▲           ▲
   │           │           └── 第三列 (1fr = 剩余空间)
   │           └── 第二列 (固定200px)
   └── 第一列 (固定100px)

关键点：

• fr 单位：按比例分配剩余空间

• auto：根据内容自适应高度

• gap：控制行列间距（替代旧版 grid-gap）

📏 网格线定位

css

.item {
  grid-column-start: 1; /* 从垂直线1开始 */
  grid-column-end: 3;   /* 到垂直线3结束 */
  grid-row: 2 / 4;      /* 从水平线2到4（简写）*/
}

网格线编号图解：

text

列线编号:  1       2       3       4
          │       │       │       │
        ┌───┬─────┬───┬─────┬───┐
行线1→  │ A │     │ B │     │ C │
        ├───┼─────┼───┼─────┼───┤
行线2→  │═══D═══════════╗   │ F │  ← 元素D跨越列1-3,行2-4
        ├───┼─────┼─╔──┼─────┼───┤
行线3→  │ G │     │ ║  │     │ I │
        ├───┼─────┼─╚──┼─────┼───┤
行线4→  │   │     │   │     │   │
        └───┴─────┴───┴─────┴───┘

🔲 合并单元格

css

.item {
  /* 简写：row-start / col-start / row-end / col-end */
  grid-area: 1 / 2 / 3 / 4; /* 占据行1-2, 列2-3 */
}

合并效果：

text

┌───────┬───────────────┐
│   A   │               │ 
├───────┤      B        │  ← B元素跨越2行2列
│   C   │               │
├───────┼───────┬───────┤
│   D   │   E   │   F   │
└───────┴───────┴───────┘

🏷️ 命名区域布局

css

.container {
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }

区域映射：

text

       header (跨两列)
┌───────────────────────┐
│         HEADER        │
├─────────────┬─────────┤
│   SIDEBAR   │ CONTENT │
├─────────────┴─────────┤
│         FOOTER        │
└───────────────────────┘

📱 响应式网格示例

css

.container {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

不同宽度下的自适应效果：

text

────────── 大屏幕 (4列) ──────────
┌───┐ ┌───┐ ┌───┐ ┌───┐
│ A │ │ B │ │ C │ │ D │
└───┘ └───┘ └───┘ └───┘

──────── 中屏幕 (2列) ────────
┌───────┐ ┌───────┐
│   A   │ │   B   │
├───────┤ ├───────┤
│   C   │ │   D   │
└───────┘ └───────┘

─────── 小屏幕 (1列) ────────
┌───────┐
│   A   │
├───────┤
│   B   │
├───────┤
│   C   │
├───────┤
│   D   │
└───────┘

关键函数：

• repeat(4, 1fr) → 创建4个等宽列

• minmax(200px, 1fr) → 最小200px，最大1fr

• auto-fit → 自动填充可用空间

核心属性速查表

实战代码：经典布局

html

<div class="grid-container">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>Content</main>
  <footer>Footer</footer>
</div>

css

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr; /* 侧边栏固定 + 内容自适应 */
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  gap: 12px;
  height: 100vh;
}

header { grid-area: header; background: #3498db; }
aside  { grid-area: sidebar; background: #2ecc71; }
main   { grid-area: content; background: #e74c3c; }
footer { grid-area: footer; background: #f39c12; }

渲染效果：

text

┌──────────────────────────┐
│         Header           │
├─────────────┬────────────┤
│  Sidebar    │  Content   │
│             │            │
├─────────────┴────────────┤
│         Footer           │
└──────────────────────────┘

💡 Grid vs Flexbox：

• Flexbox：一维布局（行或列）

• Grid：二维布局（同时控制行和列）
  两者可结合使用：Grid 管理整体结构，Flexbox 控制内部元素排列