CSS Grid 布局实战：从二维布局到响应式页面

小飞兽 HTML/CSS 424 次阅读 2026-06-15

Introduction

CSS Grid Layout（网格布局）是 CSS3 引入的第二种主要布局系统，与 Flexbox 的一维布局不同，Grid 专门处理二维布局——即同时控制行和列。Grid 可以轻松实现经典的 12 栅格系统、相册布局、圣杯布局等复杂结构，是现代 CSS 布局不可或缺的能力。本文从基础概念出发，覆盖网格容器、项目属性、命名网格线及实战案例。

基础概念：网格容器与网格轨道

/* 创建网格容器 */
.grid-container {
    display: grid;
    
    /* 定义列和行轨道（轨道 = 两条网格线之间的区域）*/
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    
    /* fr = fraction unit，剩余空间的等分单位 */
    grid-template-columns: 1fr 2fr 1fr; /* 三列：1:2:1 比例 */
    
    /* 重复函数 */
    grid-template-columns: repeat(3, 1fr); /* 等宽三列 */
    grid-template-columns: repeat(12, 1fr); /* 12栅格系统 */
    
    /* 自动填充 */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    
    /* 间距 */
    gap: 20px;
    column-gap: 20px;
    row-gap: 10px;
}

网格项目定位

.grid-item {
    /* 指定项目占用的网格区域（行/列起始线 → 结束线）*/
    grid-column: 1 / 3;     /* 从第1列线到第3列线（即跨1列）*/
    grid-row: 1 / 2;        /* 从第1行线到第2行线 */
    
    /* 简写 */
    grid-area: 1 / 1 / 2 / 3;
    
    /* span 关键字（自动扩展）*/
    grid-column: 1 / span 2; /* 从第1线开始，跨2列 */
    grid-row: span 3;        /* 跨3行 */
    
    /* 负数从反方向计算 */
    grid-column: 1 / -1;     /* 占据整行 */
}

实战：经典布局

/* 圣杯布局（Header-Footer-3Column） */
.page {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 200px 1fr 200px;
    min-height: 100vh;
    gap: 0;
}
.header  { grid-column: 1 / -1; grid-row: 1; }
.sidebar { grid-column: 1; grid-row: 2; }
.main   { grid-column: 2; grid-row: 2; }
.aside  { grid-column: 3; grid-row: 2; }
.footer { grid-column: 1 / -1; grid-row: 3; }
/* 响应式相册 */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.photo-grid .item:nth-child(3n) {
    grid-column: span 2; /* 每第三个元素跨两列 */
}

命名网格线与命名区域

/* 用命名网格线定位 */
.layout {
    display: grid;
    grid-template-columns: [full-start] 1fr [content-start] 3fr [content-end full-end];
    grid-template-rows: [header-start] auto [header-end main-start] 1fr [main-end footer-start] auto [footer-end];
}
.header { grid-column: full-start / full-end; grid-row: header; }
.article { grid-column: content; grid-row: main; }
/* 用命名区域快速布局 */
.template-areas {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header  header"
        "sidebar main"
        "footer  footer";
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

运行效果

在浏览器中打开圣杯布局代码，页面自动分为三列：左侧200px侧边栏、中间弹性主内容区、右侧200px边栏，header 和 footer 各自占满一行。无论内容多少，footer 始终贴底。相册布局中，自动响应屏幕宽度，每个单元格最小200px，超出则自动换行。

常见问题

Grid vs Flexbox：Flexbox 适合一维布局（导航栏、按钮组）；Grid 适合二维布局（整个页面、相册、仪表盘）。两者可以结合使用，Grid 定框架，Flexbox 填内容。

grid-template-columns: 100px 1fr：1fr 表示占据剩余全部空间，等同于 calc(100% - 100px) 但更智能，支持多列同时计算。
浏览器支持：IE11 只支持旧版 Grid 语法（-ms- 前缀），生产环境建议使用 auto-fill/minmax 等特性时要确认目标浏览器范围。

grid-area 简写顺序：grid-area: row-start / col-start / row-end / col-end，共4个值，容易与 margin 简写混淆。