跳到主要内容

Grid 布局：基础概念与使用方法

什么是 Grid 布局​

CSS Grid 是二维布局系统，可同时控制行与列。适合页面级骨架、卡片宫格、 holygrail、仪表盘等「行列都要对齐」的场景。

核心术语：

  • Grid 容器：display: grid / inline-grid
  • Grid 项目：容器的直接子元素
  • 网格线（grid line）：划分轨道的线，从 1 开始编号
  • 轨道（track）：两条相邻线之间的行或列
  • 单元格（cell）：行列交叉的最小单位
  • 区域（area）：一个或多个单元格组成的矩形
  • 间隙（gap）：轨道之间的间距

如何启用​

.container {
  display: grid;
  /* 或 */
  display: inline-grid;
}

启用后，直接子元素成为网格项目；默认生成「单列多行」（每项占一行），需用模板属性定义多列。

最小可用示例​

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

三列等宽，间距 16px；项目按源顺序自动填充。

与 Flex 的直觉对比​

FlexGrid
维度一维（行或列）二维（行和列）
内容驱动 vs 布局驱动更偏内容流更偏预设轨道
典型用途组件内对齐、导航页面骨架、宫格
重叠/跨格较弱天然支持跨行跨列

二者常组合：外层 Grid 搭骨架，内层 Flex 做对齐。

定义网格的两种思路​

1. 显式轨道​

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  min-height: 100vh;
}

2. 命名区域（可读性极强）​

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 240px;
  grid-template-rows: auto 1fr auto;
}
.header { grid-area: header; }
.nav    { grid-area: nav; }
.main   { grid-area: main; }
.aside  { grid-area: aside; }
.footer { grid-area: footer; }

自动放置 vs 手动放置​

  • 自动：不写定位，按 grid-auto-flow 填充
  • 手动：grid-column / grid-row / grid-area 指定占位
.featured {
  grid-column: 1 / 3; /* 从第 1 条竖线到第 3 条 */
  grid-row: 1 / 2;
}

fr 单位与 minmax​

  • 1fr：分配剩余空间的一份弹性单位
  • minmax(min, max)：轨道尺寸夹在最小最大之间
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

这是响应式卡片宫格的经典写法，无需手写大量断点。

适用场景​

  • 整页布局（头/侧/主/脚）
  • 卡片墙、图片墙、产品列表
  • 表单多列表格化排列
  • 仪表盘 modular 区块
  • 需要元素跨行跨列或对齐到同一网格线

学习路径​

  1. grid-template-columns/rows + gap
  2. repeat / fr / minmax / auto-fit
  3. 线号定位与 grid-area
  4. 对齐属性 justify/align-items/content
  5. 隐式网格与 grid-auto-*
  6. 兼容性与注意事项

相关条目：容器属性、项目属性、兼容性、注意事项、与 Flex 选型对比。