CSS Grid 网格布局从入门到实战

如果你已经熟悉 Flex（一维布局：要么横排要么竖排），那 Grid 就是它的二维升级版——同时控制行和列。

一句话区分：

• Flex：我有一排元素，怎么排、怎么对齐。
• Grid：我要一张表格，行和列同时定义，把内容放进格子里。

定义一张网格

.grid {
  display: grid;
  grid-template-columns: 100px 100px 100px; /* 三列，每列 100px */
  grid-template-rows: 80px 80px;            /* 两行，每行 80px */
  gap: 16px;                                /* 行列间距 */
}

grid-template-columns 定义列，grid-template-rows 定义行。上面的写法会出现 3×2 = 6 个格子。

子元素默认按源顺序自动填满格子，从左到右、从上到下。

fr 单位：按比例分空间

fr 是 Grid 专属的”剩余空间分配单位”，类似 flex 里的 flex: 1。

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 第一列固定 200px，后两列平分剩余 */
  gap: 16px;
}

常见两栏布局一行搞定：

.layout {
  display: grid;
  grid-template-columns: 1fr 280px; /* 主区自适应 + 固定侧栏 */
  gap: 32px;
}

区域命名：用 ASCII 画布局

最直观的写法是给格子起名字，然后用字符串”画”出结构：

.page {
  display: grid;
  grid-template-columns: 1fr 260px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "main   side"
    "footer footer";
  gap: 24px;
  min-height: 100vh;
}
.header { grid-area: header; }
.main   { grid-area: main; }
.side   { grid-area: side; }
.footer { grid-area: footer; }

子元素只要写 grid-area: main 就能精准落位，不用数第几行第几列。改版时改 grid-template-areas 那几行字符串即可，布局即文档。

响应式：auto-fit + minmax

卡片网格是最经典的 Grid 场景，且天然响应式：

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

• minmax(220px, 1fr)：每个卡片最小 220px，最大撑满。
• auto-fit：一行能塞几个就塞几个，塞不下自动换行。

不用写任何媒体查询，就能实现”宽屏多列、窄屏少列”的效果。

对齐：place-items 一把梭

Grid 容器上有两个对齐属性：

• justify-items：列方向（水平）对齐
• align-items：行方向（垂直）对齐

合体写法是 place-items: center;（先垂直后水平，或同时设置）。

.center-grid {
  display: grid;
  place-items: center; /* 所有格子内容水平垂直居中 */
  height: 300px;
}

和 Flex 怎么选

场景	选谁
导航栏、按钮组、一维排布	Flex
页面整体骨架、卡片网格、需要同时控行列	Grid
复杂的二维仪表盘	Grid + 子项内部再套 Flex

实际项目里通常是Grid 搭骨架，Flex 排细节。两者不是替代关系，而是搭档。

掌握 grid-template-columns、fr、grid-template-areas、auto-fit + minmax 这四样，日常 90% 的布局都能从容应对。