CSS Grid 布局教程：网格生成

Flexbox 解决一维布局，Grid 解决二维布局——复杂页面整体结构、卡片网格、仪表盘布局，Grid 一站式搞定。本文详解 Grid。

什么是 CSS Grid？

Grid 是 CSS 的二维布局系统，用行和列划分容器，子项按网格定位。

基本用法

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px;
}

3 列 2 行网格。

Grid 属性

容器属性

#### 1. grid-template-columns

列定义：

grid-template-columns: 100px 100px 100px;       /* 3 列，每列 100px */
grid-template-columns: 1fr 1fr 1fr;            /* 3 等分 */
grid-template-columns: 1fr 2fr 1fr;            /* 中间列 2 倍宽 */
grid-template-columns: repeat(3, 1fr);          /* 重复 3 列 1fr */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  /* 自适应 */
grid-template-columns: 200px 1fr;               /* 固定 + 自适应 */

#### 2. grid-template-rows

行定义：

grid-template-rows: 100px 100px;
grid-template-rows: 1fr 2fr;

#### 3. grid-gap / gap

间隔：

grid-gap: 10px;          /* 行列间隔 10px */
grid-gap: 10px 20px;     /* 行 10px，列 20px */
gap: 10px;               /* 新语法 */
row-gap: 10px;
column-gap: 20px;

#### 4. grid-template-areas

命名区域：

grid-template-areas:
  "header header header"
  "sidebar main main"
  "footer footer footer";

子项用 grid-area 引用：

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

#### 5. justify-items

水平对齐（所有子项）：

justify-items: start;
justify-items: end;
justify-items: center;
justify-items: stretch;  /* 默认 */

#### 6. align-items

垂直对齐：

align-items: start;
align-items: end;
align-items: center;
align-items: stretch;  /* 默认 */

#### 7. justify-content

整个网格水平对齐：

justify-content: start;
justify-content: end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

#### 8. align-content

整个网格垂直对齐：

align-content: start;
align-content: end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: stretch;

子项属性

#### 1. grid-column

跨列：

grid-column: 1 / 3;       /* 从第 1 列到第 3 列（占 2 列） */
grid-column: 1 / span 2;  /* 从第 1 列起跨 2 列 */
grid-column: span 2;      /* 跨 2 列 */

#### 2. grid-row

跨行：

grid-row: 1 / 3;
grid-row: span 2;

#### 3. grid-area

命名或定位：

grid-area: header;                    /* 引用命名 */
grid-area: 1 / 1 / 3 / 3;            /* row-start / column-start / row-end / column-end */

#### 4. justify-self / align-self

单个对齐：

justify-self: start;
justify-self: center;
justify-self: end;
align-self: start;

单位

fr（fraction）

分数单位，按比例分配：

grid-template-columns: 1fr 2fr 1fr;
/* 总 4fr，第 1 列 25%，第 2 列 50%，第 3 列 25% */

minmax()

最小最大值：

grid-template-columns: minmax(200px, 1fr);
/* 最小 200px，最大 1fr */

auto

根据内容自动：

grid-template-columns: auto 1fr auto;
/* 第 1、3 列根据内容，第 2 列自适应 */

repeat()

重复：

grid-template-columns: repeat(4, 1fr);          /* 4 列 1fr */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  /* 自适应 */

常见布局

1. 居中

.container {
  display: grid;
  place-items: center;
  height: 100vh;
}

place-items: center = justify-items: center + align-items: center。

2. 圣杯布局

body {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  grid-template-rows: 60px 1fr 60px;
  grid-template-columns: 200px 1fr 200px;
  min-height: 100vh;
}

.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

3. 卡片网格自适应

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

任意宽度都能自适应，超窄时变 1 列。

4. 12 列网格（类似 Bootstrap）

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

.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }

5. 杂志布局

.magazine {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  gap: 10px;
}

.hero {
  grid-column: span 4;
  grid-row: span 2;
}

.feature-1 {
  grid-column: span 2;
  grid-row: span 2;
}

6. 仪表盘

.dashboard {
  display: grid;
  grid-template-areas:
    "nav header header"
    "nav main  aside"
    "nav footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 60px 1fr 60px;
  min-height: 100vh;
}

7. 图片画廊

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

8. 响应式卡片

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

桌面 3-4 列，平板 2 列，手机 1 列，自动适应。

52tool CSS Grid 生成器

工具地址：CSS 渐变（含 Grid 可视化）

功能

可视化拖拽网格
实时预览
一键复制 CSS
模板布局
浏览器端运行

实战

设置：
- 列数：3
- 行数：2
- gap：20px
- 列宽：1fr

输出 CSS：

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

Grid vs Flexbox

适用场景

场景	推荐
顶部导航	Flexbox
卡片网格	Grid
居中	两者都可
媒体对象	Flexbox
整体页面布局	Grid
表单	Grid
卡片行	Flexbox
复杂二维	Grid

组合使用

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

.card {
  display: flex;
  flex-direction: column;
}

Grid 处理整体布局，Flexbox 处理卡片内部布局。

浏览器兼容

浏览器	支持版本
Chrome	57+
Firefox	52+
Safari	10.1+
Edge	16+
IE 11	旧语法（不支持新属性）

现代浏览器完全支持。需要兼容 IE 11 用 Autoprefixer 自动转换。

进阶技巧

技巧 1：auto-fit vs auto-fill

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* 子项 < 列数时，列收缩填满 */

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* 子项 < 列数时，保留空列 */

通常用 auto-fit。

技巧 2：subgrid

子元素继承父网格（CSS Grid Level 2）：

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

.child {
  display: grid;
  grid-template-columns: subgrid;  /* 继承父网格 */
  grid-column: span 3;
}

兼容性：Firefox 71+，Safari 16+，Chrome 117+。

技巧 3：命名网格线

.container {
  display: grid;
  grid-template-columns: [start] 1fr [middle] 1fr [end];
}

.item {
  grid-column: start / middle;
}

技巧 4：grid-auto-flow

自动排列顺序：

grid-auto-flow: row;       /* 默认，按行排列 */
grid-auto-flow: column;    /* 按列排列 */
grid-auto-flow: dense;     /* 填充空隙 */
grid-auto-flow: row dense;

技巧 5：隐式网格

超出定义的子项自动生成行列：

grid-auto-rows: 100px;     /* 多余行高 100px */
grid-auto-columns: 100px;  /* 多余列宽 100px */

常见问题

Q: fr 单位怎么算？

A: 总 fr 数按比例分配。1fr 2fr 总 3fr，第 1 列占 1/3，第 2 列占 2/3。

Q: minmax(200px, 1fr) 什么意思？

A: 最小 200px，最大 1fr（按比例填满剩余空间）。

Q: auto-fit 和 auto-fill 区别？

A: auto-fit 让子项拉伸填满容器；auto-fill 保留空列。多数场景用 auto-fit。

Q: Grid 替代 Flexbox 吗？

A: 不完全。Grid 适合二维，Flexbox 适合一维。组合用最佳。

Q: grid-column: 1 / 3 跨几列？

A: 跨 2 列（第 1 列到第 3 列的左边）。

Q: 子项能同时用 grid 和 flex 吗？

A: 能。父用 Grid 整体布局，子用 Flexbox 内部布局。

常见问题解答

Q: 怎么用 Grid 做响应式布局？

A: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 自动适应。

Q: Grid 和 Flexbox 学哪个？

A: 都学。Grid 处理二维整体布局，Flexbox 处理一维局部布局，组合用最强大。

Q: 怎么跨列？

A: 子项 grid-column: span 2; 跨 2 列。或 grid-column: 1 / 3; 从第 1 列到第 3 列。

Q: 怎么让网格自适应不同屏幕？

A: 1) 用 auto-fit + minmax；2) 用媒体查询切换列数：

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

Q: 怎么用可视化工具？

A: 52tool CSS 工具可视化拖拽，实时预览，复制代码。

Q: 浏览器兼容？

A: 现代浏览器完全支持。IE 11 用旧语法（建议放弃 IE 支持）。

总结

CSS Grid 是二维布局神器：

可视化生成 → 52tool CSS 工具
响应式网格 → repeat(auto-fit, minmax())
命名区域 → grid-template-areas
跨列跨行 → grid-column: span

记住：Grid 处理整体二维布局，Flexbox 处理局部一维布局，组合用最强大。