CSS Grid 布局入门：概念、用法与示例

太微2025-04-09前端CSS Grid 布局

CSS Grid 布局入门：概念、用法与示例

Grid（网格布局） 是二维布局系统：同时控制行与列，适合整页骨架、卡片矩阵、不规则区域划分等。常与 Flex（一维） 搭配使用：外层 Grid 划区，内层 Flex 对齐。

核心概念

概念	说明
Grid 容器	`display: grid` 或 `display: inline-grid` 的元素
网格线（Grid Line）	划分行、列的线，有编号（可正数从 1 起，或负数从 -1 起）
轨道（Track）	相邻两条线之间的行或列空间
单元格（Cell）	行与列交叉的最小区域
区域（Area）	可用 `grid-template-areas` 命名的矩形区域

容器上的常用属性

1. `grid-template-columns` / `grid-template-rows` — 定义列宽与行高

.container {
  display: grid;
  /* 三列：固定 200px、剩余空间 1fr、固定 100px */
  grid-template-columns: 200px 1fr 100px;
  /* 两行：第一行 60px，第二行自动 */
  grid-template-rows: 60px auto;
}

使用 repeat() 与 minmax()：

.container {
  display: grid;
  /* 自动填充：每列至少 200px，能放几列放几列 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

2. `gap` — 行间距与列间距

.container {
  gap: 16px 24px;   /* 行 gap 16px，列 gap 24px */
  /* 或分开写：row-gap / column-gap */
}

3. `grid-template-areas` — 用「地图」命名布局

.container {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

子项中：

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

4. `justify-items` / `align-items` — 单元格内对齐

.container {
  justify-items: start;   /* 水平：列方向对齐到单元格起点 */
  align-items: center;    /* 垂直：行方向在单元格内居中 */
}

5. `justify-content` / `align-content` — 整网格外围空间分配

当网格小于容器时（例如固定像素列总宽小于容器），用来对齐整个网格：

.container {
  justify-content: center;
  align-content: start;
}

项目上的常用属性

1. `grid-column` / `grid-row` — 跨列、跨行

.item-wide {
  grid-column: 1 / 3;        /* 从第 1 条列线到第 3 条列线 */
}
.item-tall {
  grid-row: span 2;          /* 占两行 */
}

2. `grid-area` — 简写或对应命名区域

.hero {
  grid-area: 1 / 1 / 2 / 4;  /* row-start / col-start / row-end / col-end */
}

3. `place-self` — 单项覆盖对齐

.item {
  place-self: center end;    /* align-self + justify-self */
}

示例一：经典「顶栏 + 侧栏 + 主区 + 底栏」

<div class="layout">
  <header class="header">Header</header>
  <aside class="aside">Aside</aside>
  <main class="main">Main</main>
  <footer class="footer">Footer</footer>
</div>

.layout {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "aside main"
    "footer footer";
}
.header { grid-area: header; }
.aside { grid-area: aside; }
.main { grid-area: main; }
.footer { grid-area: footer; }

示例二：响应式卡片网格

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

窗口变宽时自动增加列，变窄时自动换行，每块至少 240px。

示例三：十二列栅格中的一栏

.page {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.span-6 {
  grid-column: span 6;
}
.span-4 {
  grid-column: span 4;
}

示例四：居中（Grid 作容器）

.center-wrap {
  display: grid;
  place-items: center;
  min-height: 200px;
}

等价于在网格单元格内水平、垂直都居中（子项为单个或整体当作一块时很好用）。

Flex 与 Grid 怎么选

场景	更常用
导航、工具条、同一行里分散/居中	Flex
整页多行多列、二维对齐、不规则跨格	Grid
一维列表换行	Flex + `flex-wrap` 或 Grid 的 `auto-fill`

小结

Grid 用 行 + 列 定义轨道，用 gap 控制间距。
fr 表示剩余空间比例；minmax() 做自适应下限。
grid-template-areas 适合把版面画成「区域名」地图，可读性好。
子项用 grid-column / grid-row 或 grid-area 跨格。

兼容性：现代浏览器对 Grid 支持良好，极老浏览器需 Can I useopen in new window 查表并做降级（如 Flex 或单列流式布局）。

CSS Grid 布局入门：概念、用法与示例

ON THIS PAGE