轩辕李的博客
轩辕李
2019-05-25
目录

CSS布局-Grid网格布局

CSS Grid（网格布局）是二维布局系统，专门用于创建复杂的网页布局。与Flexbox的一维布局不同，Grid可以同时控制行和列，是现代CSS布局的强大工具。

本文将全面介绍Grid布局的概念、属性和实战应用，帮助你掌握这一先进的布局技术。

# 一、Grid 基础概念

# 1.1 什么是 Grid

Grid Layout（网格布局）是CSS中用于创建二维布局的系统，可以同时处理行（rows）和列（columns）。

主要特点：

  • 二维布局（同时控制行和列）
  • 强大的对齐和分布控制
  • 灵活的网格轨道（grid tracks）
  • 支持重叠和层级

# 1.2 核心术语

┌─────────────────────────────────────────────┐
│  Grid Container (网格容器)                  │
│  ┌──────────┬──────────┬──────────┐        │
│  │ Grid     │ Grid     │ Grid     │        │
│  │ Cell     │ Cell     │ Cell     │ ← 行   │
│  ├──────────┼──────────┼──────────┤        │
│  │ Grid     │ Grid     │ Grid     │        │
│  │ Cell     │ Cell     │ Cell     │        │
│  └──────────┴──────────┴──────────┘        │
│           ↑                             │
│           列                              │
└─────────────────────────────────────────────┘
  • Grid Container（网格容器）：设置了 display: grid 或 display: inline-grid 的元素
  • Grid Item（网格项目）：容器的直接子元素
  • Grid Line（网格线）：构成网格结构的分界线
  • Grid Track（网格轨道）：两条相邻网格线之间的空间（行或列）
  • Grid Cell（网格单元格）：四个网格线包围的最小单位
  • Grid Area（网格区域）：由四个网格线定义的矩形区域

# 1.3 基本使用

.container {
  display: grid; /* 块级网格容器 */
}

.inline-container {
  display: inline-grid; /* 行内网格容器 */
}

# 二、容器属性

# 2.1 grid-template-columns / grid-template-rows (定义行列)

定义网格的列和行的大小。

.container {
  /* 固定大小 */
  grid-template-columns: 100px 200px 150px;
  grid-template-rows: 50px 100px;
  
  /* 使用fr单位 */
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  
  /* 混合单位 */
  grid-template-columns: 100px 1fr 2fr;
  
  /* 重复模式 */
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(4, 100px);
  
  /* 自动填充 */
  grid-template-columns: repeat(auto-fill, 200px);
}

# 2.2 grid-template-areas (命名区域)

通过命名区域来定义网格布局。

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

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

# 2.3 grid-template (简写)

grid-template-columns、grid-template-rows 和 grid-template-areas 的简写。

.container {
  /* 分别定义行列 */
  grid-template: 
    50px 1fr 50px / 
    1fr 3fr 1fr;
    
  /* 包含命名区域 */
  grid-template: 
    "header header header" 50px
    "sidebar main main" 1fr
    "footer footer footer" 50px
    / 1fr 3fr 1fr;
}

# 2.4 gap / row-gap / column-gap (间距)

设置网格线之间的间距。

.container {
  gap: 20px;           /* 行列间距相同 */
  gap: 10px 20px;      /* 行间距 列间距 */
  row-gap: 10px;       /* 只设置行间距 */
  column-gap: 20px;    /* 只设置列间距 */
}

# 2.5 justify-items / align-items (项目对齐)

控制网格项目在单元格内的对齐方式。

.container {
  justify-items: start | end | center | stretch; /* 水平对齐 */
  align-items: start | end | center | stretch;   /* 垂直对齐 */
}

# 2.6 justify-content / align-content (内容对齐)

控制整个网格在容器内的对齐方式。

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

# 2.7 grid-auto-columns / grid-auto-rows (自动轨道)

定义隐式网格轨道的大小。

.container {
  grid-auto-columns: 100px;  /* 隐式列轨道大小 */
  grid-auto-rows: 50px;      /* 隐式行轨道大小 */
  
  /* 使用fr单位 */
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
}

# 2.8 grid-auto-flow (自动流)

控制自动放置算法如何工作。

.container {
  grid-auto-flow: row;        /* 默认：先行后列 */
  grid-auto-flow: column;     /* 先列后行 */
  grid-auto-flow: row dense;  /* 紧凑填充 */
  grid-auto-flow: column dense;
}

# 三、项目属性

# 3.1 grid-column-start / grid-column-end / grid-row-start / grid-row-end (网格线定位)

通过网格线来定位项目。

.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  
  /* 简写 */
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  
  /* 跨越轨道数 */
  grid-column: 1 / span 2;
  grid-row: 1 / span 3;
}

# 3.2 grid-column / grid-row (简写)

grid-column-start/grid-column-end 和 grid-row-start/grid-row-end 的简写。

.item {
  grid-column: 1 / 3;        /* 从第1条线到第3条线 */
  grid-column: 1 / span 2;   /* 从第1条线开始，跨越2个轨道 */
  grid-row: 2 / 4;
  grid-row: 2 / span 2;
}

# 3.3 grid-area (区域定位)

grid-row-start/grid-column-start/grid-row-end/grid-column-end 的简写。

.item {
  /* grid-area: row-start / column-start / row-end / column-end */
  grid-area: 1 / 2 / 3 / 4;
  
  /* 使用命名区域 */
  grid-area: header;
}

# 3.4 justify-self / align-self (单独对齐)

允许单个项目有与其他项目不同的对齐方式。

.item {
  justify-self: start | end | center | stretch; /* 水平对齐 */
  align-self: start | end | center | stretch;   /* 垂直对齐 */
}

# 四、fr 单位和函数

# 4.1 fr 单位

fr（fraction）单位代表网格容器中可用空间的一部分。

.container {
  /* 1fr + 2fr + 1fr = 4fr 总空间 */
  grid-template-columns: 1fr 2fr 1fr;
  
  /* 混合单位 */
  grid-template-columns: 100px 1fr 2fr;
  
  /* 最小值 */
  grid-template-columns: minmax(100px, 1fr) 2fr;
}

# 4.2 repeat() 函数

重复定义网格轨道。

.container {
  grid-template-columns: repeat(3, 1fr);           /* 3个1fr列 */
  grid-template-columns: repeat(4, 100px);         /* 4个100px列 */
  grid-template-columns: repeat(auto-fill, 200px); /* 自动填充 */
  grid-template-columns: repeat(2, 1fr 2fr);       /* 重复模式 */
}

# 4.3 minmax() 函数

定义轨道大小的范围。

.container {
  grid-template-columns: minmax(100px, 1fr) 2fr;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
}

# 4.4 auto-fit / auto-fill

自动适应可用空间。

.container {
  /* auto-fill: 尽可能多地创建轨道 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  
  /* auto-fit: 创建轨道后拉伸填满容器 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

# 五、实战案例

# 5.1 响应式卡片网格

# 5.2 圣杯布局

# 5.3 产品展示页面

# 5.4 仪表盘布局

# 六、常见布局模式

# 6.1 基本网格布局

/* 简单的三列网格 */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* 响应式网格 */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

# 6.2 侧边栏布局

/* 左侧边栏 */
.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 50px;
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
  height: 100vh;
}

# 6.3 卡片网格

/* 自适应卡片网格 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

# 6.4 表单布局

/* 响应式表单 */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

/* 复杂表单 */
.complex-form {
  display: grid;
  grid-template-columns: 150px 1fr 150px 1fr;
  grid-auto-rows: minmax(50px, auto);
  gap: 15px;
}

# 七、最佳实践

# 7.1 何时使用 Grid

✅ 适合使用 Grid：

  • 复杂的二维布局
  • 需要精确控制行和列
  • 卡片网格布局
  • 仪表盘和管理界面
  • 复杂的表单布局

❌ 不适合使用 Grid：

  • 简单的一维布局（使用 Flexbox）
  • 内容流式布局（使用正常文档流）

# 7.2 Grid 与 Flexbox 结合

/* Grid容器内的Flexbox项目 */
.dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

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

.card-header {
  flex: 0 0 auto; /* 不放大不缩小 */
}

.card-content {
  flex: 1; /* 占据剩余空间 */
}

# 7.3 响应式设计

/* 移动优先 */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

/* 平板 */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 桌面 */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

# 7.4 性能优化

/* ✅ 推荐：使用命名区域 */
.container {
  grid-template-areas: 
    "header header"
    "main sidebar"
    "footer footer";
}

.header { grid-area: header; }

/* ❌ 不推荐：复杂的网格线定位 */
.item {
  grid-column: 1 / span 2;
  grid-row: 3 / span 1;
}

# 7.5 可访问性

/* 保持逻辑顺序与视觉顺序一致 */
.grid {
  display: grid;
  /* 确保tab顺序符合阅读顺序 */
}

/* 使用语义化HTML */
<article class="grid-item">
  <h2>标题</h2>
  <p>内容</p>
</article>

# 八、浏览器兼容性

特性 Chrome Firefox Safari Edge IE
基础Grid ✅ 57+ ✅ 52+ ✅ 10.1+ ✅ 16+ ⚠️ 11 (部分)
gap属性 ✅ 57+ ✅ 52+ ✅ 10.1+ ✅ 16+ ❌
auto-fit/fill ✅ 57+ ✅ 52+ ✅ 10.1+ ✅ 16+ ❌
命名区域 ✅ 57+ ✅ 52+ ✅ 10.1+ ✅ 16+ ⚠️ 11 (部分)

兼容性注意事项：

  • IE11 需要 -ms- 前缀和支持有限
  • 使用 Autoprefixer 自动添加前缀
  • 考虑使用 CSS Grid polyfill
/* Autoprefixer 会自动添加前缀 */
.container {
  display: grid;
  /* 编译后会添加：
  display: -ms-grid;
  display: grid;
  */
}

# 九、总结

CSS Grid是现代网页布局的强大工具，掌握以下要点：

  1. 核心概念：理解网格线、轨道、单元格、区域
  2. 容器属性：grid-template-*、gap、justify/align-*
  3. 项目属性：grid-column/grid-row、grid-area、justify/align-self
  4. fr单位：灵活的空间分配
  5. 函数：repeat()、minmax()、auto-fit/auto-fill
  6. 实战应用：卡片网格、圣杯布局、仪表盘等
  7. 最佳实践：合理选择、性能优化、响应式设计

Grid与Flexbox相辅相成，Grid处理二维布局，Flexbox处理一维布局，两者结合能创建出强大而灵活的现代网页布局！

祝你变得更强!

编辑 (opens new window)
#CSS
上次更新: 2025/11/20
CSS布局-Flexbox完全指南
CSS布局-响应式设计实践

← CSS布局-响应式设计实践→

最近更新
01
AI编程时代的一些心得
09-11
02
Claude Code与Codex的协同工作
09-01
03
Claude Code 最佳实践（个人版）
08-01
更多文章>
Theme by Vdoing | Copyright © 2018-2025 京ICP备2021021832号-2 | MIT License