CSS Grid布局入门到实践：二维网格、区域划分与页面排版案例

CSS Grid 是专门用来处理二维布局的现代 CSS 能力。和 Flex 更擅长一维排列不同，Grid 可以同时控制行和列，非常适合页面整体排版、仪表盘、卡片矩阵、相册、后台管理界面和复杂内容区布局。

很多人刚接触 Grid 时会觉得属性多、概念抽象，其实只要先理解“容器、行、列、间距、区域”这几个核心点，就能很快上手。本文从基础语法讲起，再到区域划分和页面案例，帮你建立实用的 Grid 布局思路。

基本写法

给父元素设置 display: grid 后，它的直接子元素就会成为 Grid 项目。接着用 grid-template-columns 定义列，用 grid-template-rows 定义行。

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

上面的写法定义了三列：左右固定 200 像素，中间自动占据剩余空间。fr 是 Grid 里很常用的单位，表示按比例分配可用空间。

fr 单位

fr 可以理解为“剩余空间份额”。如果写 1fr 2fr，表示两列按 1:2 分配剩余宽度。

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

相比百分比，fr 在处理间距和剩余空间时更方便。尤其配合 gap 使用时，不需要手动计算每列宽度。

repeat 简化写法

当多列宽度相同或规则重复时，可以使用 repeat() 简化代码。

.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

这表示创建三列，每列等宽。卡片列表、产品列表、文章列表很适合这种写法。

gap 设置间距

gap 用来设置网格项目之间的行列间距，比给子元素写 margin 更直观。

.grid {
  display: grid;
  gap: 24px;
}

如果需要分别设置行间距和列间距，可以使用 row-gap 和 column-gap。日常布局里，一个 gap 往往就够了。

自动适配列数

响应式卡片列表常用 repeat()、auto-fit 和 minmax() 组合，让浏览器根据容器宽度自动决定列数。

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

这段代码表示：每个卡片最小 240 像素，空间足够就自动增加列数，空间不足就减少列数。它非常适合响应式卡片布局。

区域命名

grid-template-areas 可以给页面区域命名，让布局结构更直观。比如常见的页头、侧边栏、内容区、页脚结构，可以写成区域形式。

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 240px 1fr;
}

然后给子元素指定区域名称。

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

这种写法适合页面整体布局，读代码时可以直接看出各区域位置。

响应式区域

Grid 区域命名最大的好处之一，是响应式时可以很轻松地改变区域排列。移动端可以把侧边栏放到内容下方，或者改成单列。

@media (max-width: 768px) {
  .layout {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

HTML 结构不变，只通过 CSS 改变布局区域，非常适合后台、文档站、内容页等场景。

项目跨行跨列

Grid 项目可以跨越多行或多列。比如让某个重点卡片占据两列。

.featured {
  grid-column: span 2;
}

也可以明确指定起止线，比如从第 1 条网格线到第 3 条网格线。

.banner {
  grid-column: 1 / 3;
}

跨行跨列很适合专题页、仪表盘和不规则卡片布局，但不要过度使用，否则维护成本会变高。

对齐控制

Grid 也有对齐属性。justify-items 控制项目在单元格内的水平对齐，align-items 控制垂直对齐；justify-content 和 align-content 则控制整个网格在容器中的位置。

.grid {
  display: grid;
  justify-items: center;
  align-items: center;
}

如果只想调整单个项目，可以使用 justify-self 和 align-self。

Grid 和 Flex 怎么选

简单判断：只需要一行或一列排列，用 Flex；需要同时控制行和列，用 Grid。比如导航菜单、按钮组、表单行更适合 Flex；页面骨架、卡片矩阵、复杂区域排版更适合 Grid。

两者并不冲突。实际项目里，经常用 Grid 搭页面整体结构，再用 Flex 处理局部内容对齐。

常见错误

第一种错误是把 Grid 用在只需要简单水平排列的地方，代码反而变复杂。第二种错误是列宽全部写死，导致移动端溢出。第三种错误是区域命名太随意，后期维护看不懂。

还有一种问题是忘记设置 gap，转而给每个子元素加 margin，最终首尾间距不好控制。Grid 布局优先使用容器级间距，会更清晰。

实践建议

写 Grid 布局时，先画出页面有几行几列，再决定哪些区域需要固定宽度，哪些区域使用 fr 自动分配。卡片列表优先考虑 repeat(auto-fit, minmax())，页面骨架优先考虑 grid-template-areas。

Grid 的优势不是替代所有布局，而是让二维排版更清晰。把它和 Flex 搭配使用，页面结构会更稳定，响应式改造也会轻松很多。