第十天：Grid 二维布局 — 让页面像"Excel 表格"一样排列

蜗牛往上爬 · 前端工业可视化学习笔记第 10 篇
上周掌握了 Flex（一维排列），今天学 Grid（二维网格）。如果说 Flex 是"排队"，Grid 就是"Excel 表格"——同时控制行和列。大屏上那些整齐排列的数据面板，天然就是 Grid 的用武之地。

一、Grid 是什么？与 Flex 的区别
二、Grid 核心属性速查
三、fr 单位：Grid 的均分利器
四、项目放置：grid-column / grid-row
五、grid-template-areas：可视化布局
六、Grid vs Flex 选型指南
七、动手练：数据看板网格布局
八、常见坑点与最佳实践
九、这些知识在工业可视化里用在哪？
十、自测挑战 10 题
十一、总结

一、Grid 是什么？与 Flex 的区别

1.1 一维 vs 二维

Flex：一维排列
[项目1] [项目2] [项目3] [项目4] → 一行排完，换行继续

Grid：二维网格
┌──────┬──────┬──────┐
│  A   │  B   │  C   │  ← 同时控制行和列
├──────┼──────┼──────┤
│  D   │  E   │  F   │
└──────┴──────┴──────┘

1.2 一句话区分

布局	维度	最佳场景
Flex	一维（行或列）	导航栏、按钮组、卡片列表
Grid	二维（行和列）	数据看板、页面骨架、仪表盘

二、Grid 核心属性速查

.container {
  display: grid;                          /* ① 开启 Grid */

  /* ② 列定义 */
  grid-template-columns: 200px 1fr 1fr;   /* 第一列 200px，后两列均分 */

  /* ③ 行定义 */
  grid-template-rows: 60px 1fr 60px;      /* 第一行 60px，中间撑满，最后 60px */

  /* ④ 间距 */
  gap: 16px;                              /* 行列统一间距 */
  gap: 16px 24px;                         /* 行间距 列间距，分开设 */
}

图解

grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 60px 1fr 60px;

┌──────────────────────────────────────────────┐
│  header（200px + 1fr + 1fr = 第一行）         │ 60px
├──────────┬──────────────┬──────────────────────┤
│ sidebar  │  main        │  main               │ 1fr
│  200px   │  (剩余空间)    │  (剩余空间)          │
├──────────┴──────────────┴──────────────────────┤
│  footer（跨三列 = 第二行）                      │ 60px
└──────────────────────────────────────────────┘

三、fr 单位：Grid 的均分利器

fr（fraction，份数）是 Grid 独有的单位，类似 Flex 的 flex: 1。

/* 三列等宽 */
grid-template-columns: 1fr 1fr 1fr;

/* 等效写法 */
grid-template-columns: repeat(3, 1fr);

/* 第一列 200px，剩下两列均分 */
grid-template-columns: 200px 1fr 1fr;

/* 2:1 比例 */
grid-template-columns: 2fr 1fr;

repeat() 函数

/* 重复 4 次 1fr */
grid-template-columns: repeat(4, 1fr);

/* 模式重复：200px 1fr 200px 1fr */
grid-template-columns: repeat(2, 200px 1fr);

四、项目放置：grid-column / grid-row

可以控制某个项目跨越多少列、多少行：

/* 从第 1 条线到第 3 条线，跨两列 */
.item-1 {
  grid-column: 1 / 3;
}

/* 从第 1 条线到最后一条线，占满整行 */
.item-1 {
  grid-column: 1 / -1;   /* -1 表示最后一条网格线 */
}

/* 占两行 */
.item-1 {
  grid-row: 2 / 4;
}

网格线编号

列线：  1     2     3     4
       │  A  │  B  │  C  │
       │     │     │     │
行线：2 ├─────┼─────┼─────┤
       │  D  │  E  │  F  │
      3      │     │     │

五、grid-template-areas：可视化布局

这是 Grid 最直观的布局方式——直接在 CSS 里"画"出页面结构：

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 60px 1fr 60px;
  grid-template-areas:
    "header  header  header"
    "sidebar main    main"
    "footer  footer  footer";
  gap: 16px;
}

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

所见即所得：grid-template-areas 里的文字排布，就是页面上的实际布局。

六、Grid vs Flex 选型指南

场景	推荐	原因
导航栏（一行）	Flex	一维排列，`justify-content: space-between` 一行搞定
卡片列表（自动换行）	Flex	`flex-wrap: wrap` 更灵活，卡片数量不定时自动适配
数据看板（行列对齐）	Grid	二维对齐，行列都需要精确控制
页面整体骨架	Grid	行列固定，`grid-template-areas` 所见即所得
侧边栏 + 主内容	两者都行	简单场景用 Flex，复杂用 Grid
居中单个元素	Flex	`justify-content: center; align-items: center` 一行搞定

🧠 口诀：一行用 Flex，多行多列用 Grid。不确定时，先想"这个布局是更像排队，还是更像表格？"

七、动手练：数据看板网格布局

用 Grid 做一个"数据看板"，模拟大屏的面板排列。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>数据看板 - Grid 布局</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }

      body {
        font-family: "Microsoft YaHei", sans-serif;
        background: #0a1628;
        color: white;
        min-height: 100vh;
        padding: 20px;
      }

      .dashboard {
        display: grid;
        grid-template-columns: 2fr 2fr 1fr 1fr;
        grid-template-rows: auto 1fr 1fr;
        gap: 16px;
        max-width: 1400px;
        margin: 0 auto;
        height: 95vh;
      }

      /* 标题栏：横跨所有列 */
      .dashboard-header {
        grid-column: 1 / -1;
        background: linear-gradient(135deg, #1a3a5c, #2d5a8c);
        padding: 16px 24px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .dashboard-header h1 { font-size: 24px; letter-spacing: 2px; }
      .dashboard-header .time { font-size: 14px; color: #8ecae6; }

      /* 面板通用样式 */
      .panel {
        background: rgba(10, 20, 40, 0.8);
        border: 1px solid rgba(26, 92, 138, 0.4);
        border-radius: 8px;
        padding: 16px;
      }

      .panel h3 {
        font-size: 14px;
        color: #8ecae6;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(26, 92, 138, 0.4);
      }

      .panel .value {
        font-size: 36px;
        font-weight: bold;
        color: #00ff88;
        text-align: center;
      }

      .panel .sub { text-align: center; color: #8ecae6; font-size: 13px; margin-top: 4px; }

      /* 图表区：占两行 */
      .panel-chart {
        grid-row: 2 / 4;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #8ecae6;
        font-size: 18px;
      }

      /* 告警面板：红色边框 */
      .panel-alert { border-color: rgba(214, 40, 40, 0.4); }
      .panel-alert .value { color: #ff6b6b; }
    </style>
  </head>
  <body>
    <div class="dashboard">
      <header class="dashboard-header">
        <h1>智慧工厂 · 运行监控中心</h1>
        <span class="time">2026-08-18 14:30:00</span>
      </header>

      <div class="panel">
        <h3>设备总数</h3>
        <div class="value">48</div>
        <div class="sub">较昨日 +2</div>
      </div>

      <div class="panel">
        <h3>运行中</h3>
        <div class="value">42</div>
        <div class="sub">占比 87.5%</div>
      </div>

      <div class="panel panel-alert">
        <h3>告警中</h3>
        <div class="value">3</div>
        <div class="sub">需立即处理</div>
      </div>

      <div class="panel">
        <h3>已停机</h3>
        <div class="value">3</div>
        <div class="sub">占比 6.3%</div>
      </div>

      <div class="panel panel-chart">
        产量趋势图（ECharts 占位）
      </div>

      <div class="panel">
        <h3>设备运行列表</h3>
        <p style="color:#8ecae6;font-size:13px;line-height:2;">
          压缩机 A — 运行中<br>冷却泵 B — 已停机<br>
          供料机 C — 运行中<br>传送带 D — 运行中
        </p>
      </div>

      <div class="panel">
        <h3>今日能耗</h3>
        <div class="value">1,280</div>
        <div class="sub">kWh</div>
      </div>

      <div class="panel">
        <h3>今日产量</h3>
        <div class="value">8,520</div>
        <div class="sub">件</div>
      </div>
    </div>
  </body>
</html>

Grid 属性分析：

元素	属性	效果
`.dashboard`	`grid-template-columns: 2fr 2fr 1fr 1fr`	4 列，前两列是后两列的两倍宽
`.dashboard`	`grid-template-rows: auto 1fr 1fr`	标题自适应 + 两行等分
`.dashboard-header`	`grid-column: 1 / -1`	横跨所有列
`.panel-chart`	`grid-row: 2 / 4`	占两行

练习：照敲 → 把列数改成 3 列 → 把图表区改成只占一行 → 把 gap 改成 24px。

八、常见坑点与最佳实践

坑 1：Grid 子元素不直接撑满

/* Grid 项目默认高度由内容决定 */
/* 想让子元素撑满格子，需要给子元素设高度 */
.panel { height: 100%; }

坑 2：grid-template-areas 写错

/* ❌ 每行的列数必须一致 */
grid-template-areas:
  "header header"
  "sidebar main main";  /* 第一行 2 列，第二行 3 列 → 报错 */

/* ✅ 每行列数一致 */
grid-template-areas:
  "header header header"
  "sidebar main   main";

最佳实践清单

[x] 行列对齐的需求用 Grid，自动换行用 Flex
[x] fr 单位做比例分配，repeat() 减少重复
[x] grid-template-areas 用于可视化整体布局
[x] grid-column: 1 / -1 让元素占满一行

九、这些知识在工业可视化里用在哪？

Grid 是大屏布局的天然方案：

/* 经典大屏 Grid 布局 */
.screen {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;     /* 左窄 中宽 右窄 */
  grid-template-rows: 60px 1fr 1fr;        /* 标题 + 两行内容 */
  grid-template-areas:
    "header  header  header"
    "left    center  right"
    "left    bottom  right";
  gap: 12px;
  height: 100vh;
  padding: 12px;
}

每个大屏数据面板都是 Grid 中的一个格子，行列对齐完美，不需要手动调整。

十、自测挑战 10 题

Grid 和 Flex 的核心区别是什么？
grid-template-columns: 1fr 2fr 1fr 三列宽度比是多少？
repeat(4, 1fr) 等价于什么？
grid-column: 1 / 3 表示什么？grid-column: 1 / -1 呢？
grid-template-areas 的优势是什么？写一个 3×3 命名区域。
什么时候用 Grid，什么时候用 Flex？
把数据看板的列数从 4 列改成 3 列。
用 grid-template-areas 改写数据看板布局。
把图表区 grid-row: 2 / 4 改成 grid-row: 2 / 3，观察变化。
用 F12 的 Grid 可视化工具（Elements 面板中 grid 容器旁的 grid 标签），查看网格线。

加分挑战：在数据看板中，用 grid-column: 1 / 3 把"设备总数"面板加宽到占两列。

十一、总结

今天学完，你应该能做到：

[x] 说出 Grid 和 Flex 的核心区别（二维 vs 一维）
[x] 使用 grid-template-columns/rows、gap、fr、repeat()
[x] 使用 grid-column / grid-row 控制项目跨列跨行
[x] 使用 grid-template-areas 可视化布局
[x] 独立做出数据看板网格布局

一句话带走：Grid 是二维的"Excel 表格"，fr 做比例、repeat 减重复、grid-template-areas 画布局——大屏面板排列的最佳方案。

📎 本文为"蜗牛往上爬"学习博客系列 · 阶段 0（HTML+CSS）第 4 周 · 第 1 篇

【HTML+CSS】day10-grid-layout