Flexbox 管一行或一列，想同时管行和列，就得请出 Grid。它是 CSS 里最强的布局方案，几行属性就能排出整页的骨架，号称"二维布局的最终答案"。

最小可用示例：三列布局

先把一个容器声明成网格，再告诉它分几列：

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
}

这行代码把容器分成三列：左右各固定 200px，中间的 1fr 表示"剩下的空间全归它"。fr 是 grid 专属单位，可以理解成"份数"，1fr 就是一份。

间距与行：gap 和 grid-template-rows

行与行、列与列的间距用 gap 一次搞定：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三等分 */
  gap: 16px;                      /* 行列间距都是 16px */
  grid-template-rows: 60px auto;  /* 第一行高 60px，第二行自适应 */
}

repeat(3, 1fr) 是简写，等于把 1fr 1fr 1fr 抄三遍，列数一多就知道它有多好用。

让子元素跨行跨列

网格里每个子元素默认占一格。想让它占多行多列，用 span 或线号：

.header {
  grid-column: 1 / 4;   /* 从第 1 条线跨到第 4 条线，横跨三列 */
}

.sidebar {
  grid-row: span 2;     /* 纵向占两行 */
}

网格线的编号从 1 开始数，n 列的布局有 n+1 条竖线。理解了线号，跨行跨列就随便玩，"左窄栏 + 右内容"的博客版式两行就写出来。

不写子元素规则：自动放置

不给子元素指定位置时，它们按顺序自动往格子里填，最常见的卡片墙就这么写：

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

auto-fill 配 minmax 是经典组合：每张卡片至少 220px，屏幕宽就多放几列，窄了自动减列，一行代码顶过去一堆媒体查询。

对齐：跟 Flex 同一套套路

格子内内容的对齐沿用 Flex 的属性名：justify-items 管水平方向，align-items 管垂直方向；整个网格在页面里怎么摆，用 justify-content 和 align-content。会 Flex 的话这部分零成本。

Grid 和 Flex 怎么选

简单说：页面级骨架（头部、侧栏、内容、页脚）用 Grid，组件内部的排列（按钮组、列表项）用 Flex。Grid 从整体切格子，Flex 沿一个方向排，两者搭配才是正确姿势，不必二选一。

小结

  • display: grid 开启网格，grid-template-columns / rows 划分行列
  • fr 是份数单位，repeat() 负责批量重复，gap 管所有间距
  • grid-column / grid-row 控制子元素跨行跨列，网格线从 1 数起
  • repeat(auto-fill, minmax(...)) 是响应式卡片墙的万能写法
  • 页面骨架用 Grid，组件内部用 Flex，各管各的

先把三列布局和卡片墙这两个套路写熟，Grid 就算真正入门了。