深入理解 CSS Grid 布局：从入门到实战

前言

在现代前端开发中，页面布局一直是开发者关注的重点。从早期的表格布局，到浮动（float）布局，再到 Flexbox 弹性布局，CSS 布局技术不断演进。而 CSS Grid 布局（网格布局）的出现，彻底改变了我们构建复杂二维布局的方式。本文将带你从基础概念入手，通过实战案例深入掌握 CSS Grid 的核心用法。

一、什么是 CSS Grid？

CSS Grid Layout 是一种二维布局系统，它可以同时处理行和列，让开发者能够轻松创建复杂的网页布局。与 Flexbox（一维布局）不同，Grid 更适合构建整体的页面框架。

核心优势

二维控制：同时控制行和列
简洁的代码：减少嵌套层级，HTML 结构更清晰
响应式友好：轻松实现自适应布局
强大的对齐能力：内置丰富的对齐和分布属性

二、核心概念

1. 容器与项目

css 复制代码

/* 定义 Grid 容器 */
.container {
  display: grid;
}

Grid 容器 ：设置了 display: grid 的元素
Grid 项目：容器的直接子元素

2. 行、列与单元格

行（Row）：水平方向的轨道
列（Column）：垂直方向的轨道
单元格（Cell）：行和列交叉形成的最小单位
网格线（Grid Line）：划分行和列的线

三、基础属性详解

1. 定义行列大小

css 复制代码

.container {
  display: grid;
  /* 定义3列，宽度分别为 200px、1fr、2fr */
  grid-template-columns: 200px 1fr 2fr;
  /* 定义2行，高度分别为 100px 和 auto */
  grid-template-rows: 100px auto;
}

2. repeat() 函数

css 复制代码

.container {
  /* 等效于 1fr 1fr 1fr 1fr */
  grid-template-columns: repeat(4, 1fr);
  
  /* 重复模式 */
  grid-template-columns: repeat(2, 100px 1fr);
  /* 结果：100px 1fr 100px 1fr */
}

3. 间距控制

css 复制代码

.container {
  /* 行间距 */
  row-gap: 20px;
  /* 列间距 */
  column-gap: 30px;
  /* 简写形式 */
  gap: 20px 30px; /* 行 列 */
}

四、项目放置

1. 基于网格线定位

css 复制代码

.item {
  /* 从第1条列线到第3条列线 */
  grid-column-start: 1;
  grid-column-end: 3;
  
  /* 简写 */
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

2. 使用 span 关键字

css 复制代码

.item {
  /* 从第2条列线开始，跨越2列 */
  grid-column: 2 / span 2;
}

五、实战案例：响应式仪表盘布局

HTML 结构

html 复制代码

<div class="dashboard">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="main">Main Content</main>
  <div class="widget-1">Widget 1</div>
  <div class="widget-2">Widget 2</div>
  <footer class="footer">Footer</footer>
</div>

CSS 实现

css 复制代码

.dashboard {
  display: grid;
  /* 桌面端：3列布局 */
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: 60px 1fr 1fr 50px;
  gap: 20px;
  min-height: 100vh;
}

/* 区域命名 */
.header {
  grid-column: 1 / -1; /* 横跨所有列 */
  background: #2c3e50;
  color: white;
}

.sidebar {
  grid-row: 2 / 4;
  background: #34495e;
  color: white;
}

.main {
  grid-column: 2 / 4;
  grid-row: 2 / 3;
  background: #ecf0f1;
}

.widget-1, .widget-2 {
  background: #bdc3c7;
}

.footer {
  grid-column: 1 / -1;
  background: #95a5a6;
}

/* 响应式：平板 */
@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  
  .sidebar {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  
  .main {
    grid-column: 1 / -1;
  }
}

/* 响应式：手机 */
@media (max-width: 480px) {
  .dashboard {
    grid-template-columns: 1fr;
  }
}

六、Grid vs Flexbox：如何选择？

场景	推荐方案
整体页面布局	Grid
导航栏、按钮组等一维排列	Flexbox
卡片列表（固定列数）	Grid
卡片列表（流式换行）	Flexbox
表单元素对齐	Flexbox
复杂二维布局	Grid

七、浏览器兼容性

CSS Grid 的现代浏览器支持非常好：

✅ Chrome 57+
✅ Firefox 52+
✅ Safari 10.1+
✅ Edge 16+

总结

CSS Grid 是现代前端布局的强大工具，掌握它能让你：

减少代码量：告别复杂的嵌套和清除浮动
提升开发效率：直观的二维布局控制
轻松实现响应式：配合媒体查询快速适配多端
创建复杂布局：以前难以实现的布局现在几行代码搞定

建议从简单的网格开始练习，逐步尝试 grid-template-areas 和响应式布局，你会发现 Grid 布局的魅力所在！