7. Grid 网格布局

这是什么：Grid 网格布局 = 把页面切成行列格子、再把元素放进格子的二维布局方案，靠 display: grid 开启。

为什么用：Flex 擅长「一排」的一维排布；要「几行 × 几列」的二维排版，用 Grid 更省力，特别适合整页骨架和画廊布局。

如何用：先写 grid-template-columns: 200px 1fr 240px 划出三列，看子元素自动入格。

7.1 开启 Grid 并划分列

.page {
  display: grid;
  grid-template-columns: 200px 1fr 240px; /* 三列：固定+弹性+固定 */
  gap: 16px;
}

列的单位：

• 200px：固定宽
• 1fr：把剩余空间按份分（1fr 2fr = 1:2 分）
• repeat(3, 1fr)：重复三列，等宽（最常用）

你会看到：三个子元素自动一行排列，中列随窗口伸缩。

7.2 划分行与自动填位

.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;  /* 每行高 100px，行数自动增加 */
  gap: 10px;
}

子元素按顺序自动填格，先填满一行再换行——九宫格就是 9 个 div 直接扔进去。

7.3 让某格跨行跨列

.cover {
  grid-column: span 2;   /* 横占 2 格 */
  grid-row: span 2;      /* 竖占 2 格 */
}

跨格是做「画廊/推荐位」的关键：小格子排满，重点内容跨格放大。

7.4 命名区域排版（经典全页骨架）

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "side   main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 50px;
}
.header { grid-area: header; }
.side   { grid-area: side; }
.main   { grid-area: main; }
.footer { grid-area: footer; }

你会看到：页面被切成了「上通栏 + 左栏右区 + 下通栏」的经典骨架，就像字符串画的一样直观。

改布局只改字符串，如把 "side main" 改成 "main side"，无需动子元素。

7.5 响应式：一行自适应列

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

含义：尽量塞下更多不小于 200px 的列，塞满自适应——窗口宽就 4 列，窄就自动 2 列 1 列，不写一行媒介查询。

7.6 Flex 还是 Grid？

7.7 动手改

1. 把三列改成 repeat(4, 1fr)，观察第四列
2. 给第一格加 grid-column: span 3，做焦点图
3. 把卡片网格改成 minmax(150px, 1fr)，看列数变化

7.8 小结

• display: grid + grid-template-columns/rows 画格
• 一维找 Flex，二维找 Grid，grid-template-areas 字符串命名排版
• repeat(auto-fill, minmax(200px, 1fr)) 是响应式画廊天花板

下一章：综合练习：个人主页美化 🐸