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

CSS Grid 从入门到实战：4 个属性搞定 90% 布局

如果你已经会用 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。

.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 一把梭

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

place-items 是 align-items（垂直）和 justify-items（水平）的合体写法。

Grid 和 Flex 怎么选

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

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

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

---

原文链接：https://blog.fateguy.com/posts/css-grid