现代CSS Grid布局：从基础到高级实战

CSS Grid Layout（网格布局）是CSS中最强大的布局系统之一。它提供了二维布局能力，让开发者能够轻松创建复杂的网页布局。本文将带你从基础概念到高级技巧，全面掌握CSS Grid布局。

为什么选择CSS Grid？

在CSS Grid出现之前，我们主要依赖以下布局方式：

• Float布局： 主要用于文本环绕，不适合复杂布局
• Flexbox： 一维布局，适合组件内部排列
• 表格布局： 语义化差，不适合现代网页
• 定位布局： 脱离文档流，维护困难

CSS Grid解决了这些问题，提供了真正的二维布局能力。

基础概念

1. 网格容器和网格项

.container { display: grid; /* 定义网格容器 */ } .item { /* 网格项自动成为容器的直接子元素 */ }

2. 定义网格轨道

.container { display: grid; grid-template-columns: 200px 1fr 300px; /* 三列 */ grid-template-rows: 100px auto 150px; /* 三行 */ }

3. 网格间距

.container { display: grid; gap: 20px; /* 行列间距都是20px */ /* 或者分别设置 */ column-gap: 15px; row-gap: 25px; }

实用布局示例

示例1：经典三栏布局

<div class="three-column"> <header>Header</header> <aside class="sidebar-left">Left Sidebar</aside> <main>Main Content</main> <aside class="sidebar-right">Right Sidebar</aside> <footer>Footer</footer> </div> <style> .three-column { display: grid; grid-template-columns: 200px 1fr 300px; grid-template-rows: auto 1fr auto; min-height: 100vh; gap: 20px; } header { grid-column: 1 / -1; /* 跨越所有列 */ background: #3498db; color: white; padding: 20px; } .sidebar-left { grid-column: 1; grid-row: 2; background: #2ecc71; color: white; padding: 20px; } main { grid-column: 2; grid-row: 2; background: #ecf0f1; padding: 20px; } .sidebar-right { grid-column: 3; grid-row: 2; background: #9b59b6; color: white; padding: 20px; } footer { grid-column: 1 / -1; background: #34495e; color: white; padding: 20px; } </style>

示例2：响应式卡片网格

<div class="card-grid"> <div class="card">Card 1</div> <div class="card">Card 2</div> <div class="card">Card 3</div> <div class="card">Card 4</div> <div class="card">Card 5</div> <div class="card">Card 6</div> </div> <style> .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; padding: 20px; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 20px; transition: transform 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); } /* 响应式调整 */ @media (max-width: 768px) { .card-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; } } @media (max-width: 480px) { .card-grid { grid-template-columns: 1fr; } } </style>

高级技巧

1. 命名网格线

.container { display: grid; grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end]; grid-template-rows: [header-start] auto [header-end main-start] 1fr [main-end footer-start] auto [footer-end]; } .header { grid-column: sidebar-start / content-end; grid-row: header-start / header-end; } .sidebar { grid-column: sidebar-start / sidebar-end; grid-row: main-start / main-end; }

2. 网格区域

.container { display: grid; grid-template-areas: "header header header" "sidebar main aside" "footer footer footer"; grid-template-columns: 200px 1fr 300px; grid-template-rows: auto 1fr auto; gap: 20px; } header { grid-area: header; } .sidebar { grid-area: sidebar; } main { grid-area: main; } .aside { grid-area: aside; } footer { grid-area: footer; }

3. 隐式网格

.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; /* 隐式行高 */ grid-auto-columns: 150px; /* 隐式列宽 */ grid-auto-flow: row; /* 或 column、dense */ }

4. 对齐方式

.container { display: grid; /* 容器内对齐 */ justify-content: center; /* 水平对齐 */ align-content: center; /* 垂直对齐 */ place-content: center center; /* 简写 */ /* 网格项对齐 */ justify-items: stretch; /* 水平 */ align-items: center; /* 垂直 */ place-items: center center; /* 简写 */ } .item { /* 单个网格项对齐 */ justify-self: start; align-self: end; place-self: start end; }

实战：创建杂志式布局

<div class="magazine-layout"> <article class="featured">Featured Article</article> <article class="secondary">Secondary Article</article> <article class="tertiary">Tertiary Article</article> <article class="quaternary">Quaternary Article</article> <article class="quinary">Quinary Article</article> </div> <style> .magazine-layout { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 200px); gap: 20px; max-width: 1200px; margin: 0 auto; } .featured { grid-column: 1 / 3; grid-row: 1 / 3; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .secondary { grid-column: 3 / 5; grid-row: 1; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); } .tertiary { grid-column: 3; grid-row: 2; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); } .quaternary { grid-column: 4; grid-row: 2; background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); } .quinary { grid-column: 1 / -1; grid-row: 3; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); } .magazine-layout article { color: white; padding: 20px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; } /* 响应式调整 */ @media (max-width: 768px) { .magazine-layout { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 150px); } .featured { grid-column: 1 / -1; grid-row: 1 / 3; } .secondary { grid-column: 1; grid-row: 3; } .tertiary { grid-column: 2; grid-row: 3; } .quaternary { grid-column: 1; grid-row: 4; } .quinary { grid-column: 2; grid-row: 4; } } </style>

浏览器支持和降级方案

CSS Grid在现代浏览器中得到广泛支持：

• Chrome 57+ (2017年3月)
• Firefox 52+ (2017年3月)
• Safari 10.1+ (2017年3月)
• Edge 16+ (2017年10月)
• Opera 44+ (2017年3月)

@supports (display: grid) { .container { display: grid; grid-template-columns: 1fr 1fr; } } @supports not (display: grid) { .container { display: flex; flex-wrap: wrap; } .item { width: 50%; } }

最佳实践

1. 渐进增强： 先构建基本布局，再添加Grid特性
2. 语义化命名： 使用有意义的网格线名称和区域名称
3. 响应式设计： 结合媒体查询创建适应性布局
4. 性能优化： 避免过度嵌套网格，保持布局简单
5. 工具辅助： 使用浏览器开发者工具调试网格布局

总结

CSS Grid布局是现代Web开发的强大工具。通过掌握其核心概念和高级技巧，你可以：

• 创建复杂、响应式的网页布局
• 减少对框架和库的依赖
• 提高代码的可维护性和可读性
• 实现更灵活的设计系统

记住，CSS Grid不是要完全取代Flexbox，而是与之互补。对于一维布局（如导航栏、列表项），Flexbox仍然是更好的选择。对于二维布局（如整个页面、卡片网格），CSS Grid是理想选择。

开始在你的项目中实践CSS Grid吧！你会发现它能让布局工作变得更加简单和高效。