汤不热吧
在现代前端开发中，页面布局方案经历了从table到float、再到Flexbox的演进。CSS Grid作为二维布局的终极方案，能够同时控制行和列，让复杂的页面布局变得简洁而直观。本文将通过实际代码示例，带你掌握CSS Grid的核心用法和常见应用场景。
CSS Grid基础概念
CSS Grid布局由容器（Grid Container）和项目（Grid Item）组成。通过在父元素上设置
1 | display: grid |
，即可开启Grid布局。核心属性包括
1 | grid-template-columns |
、
1 | grid-template-rows |
、
1 | gap |
等。
2
3
4
5
6
7
8
9
display: grid;<br />
/<em> 定义3列，每列等宽 </em>/<br />
grid-template-columns: 1fr 1fr 1fr;<br />
/<em> 定义行间距和列间距 </em>/<br />
gap: 16px;<br />
/<em> 定义最小行高 </em>/<br />
grid-auto-rows: minmax(100px, auto);<br />
}
1 | fr |
单位是Grid特有的分数单位，表示剩余空间的分配比例。
1 | 1fr 1fr 1fr |
等价于三等分，也可以简写为
1 | repeat(3, 1fr) |
。
使用repeat和auto-fill实现响应式网格
Grid提供了强大的重复函数和自动填充机制，可以轻松实现响应式布局，无需媒体查询。
2
3
4
5
6
7
8
9
10
11
12
13
14
display: grid;<br />
/<em> 自动填充，每列最小250px，最大1fr </em>/<br />
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));<br />
gap: 20px;<br />
padding: 20px;<br />
}
.card {<br />
background: #fff;<br />
border-radius: 8px;<br />
padding: 24px;<br />
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);<br />
}
1 | auto-fill |
会根据容器宽度自动计算能容纳多少列，
1 | minmax(250px, 1fr) |
保证每列最小250px，剩余空间平均分配。
1 | auto-fill |
与
1 | auto-fit |
的区别在于：当项目数量不足以填满一行时，
1 | auto-fill |
会保留空轨道，
1 | auto-fit |
则会折叠空轨道让项目拉伸。
网格线命名与区域布局
Grid允许通过命名网格线或网格区域来精确控制项目的位置，这在构建复杂页面布局时特别有用。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
display: grid;<br />
grid-template-columns: [sidebar-start] 250px [sidebar-end content-start] 1fr [content-end];<br />
grid-template-rows: [header-start] 60px [header-end main-start] 1fr [main-end footer-start] 50px [footer-end];<br />
grid-template-areas:<br />
"header header"<br />
"sidebar content"<br />
"footer footer";<br />
min-height: 100vh;<br />
gap: 0;<br />
}
.header { grid-area: header; }<br />
.sidebar { grid-area: sidebar; }<br />
.content { grid-area: content; }<br />
.footer { grid-area: footer; }
通过
1 | grid-template-areas |
，用字符串直观地定义页面结构，每个名称对应一个区域。子元素只需设置
1 | grid-area |
即可定位到对应位置，代码可读性极强。
Grid实现经典圣杯布局
圣杯布局是经典的三栏布局：头部、底部固定高度，中间区域左右侧栏加主内容。用Grid只需几行代码：
2
3
4
5
6
7
<header>导航栏</header><br />
<aside class="left">左侧栏</aside><br />
<main>主内容区</main><br />
<aside class="right">右侧栏</aside><br />
<footer>页脚</footer><br />
</div>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
display: grid;<br />
grid-template:<br />
"header header header" 60px<br />
"left main right" 1fr<br />
"footer footer footer" 40px<br />
/ 200px 1fr 200px;<br />
min-height: 100vh;<br />
gap: 8px;<br />
}
.header { grid-area: header; background: #2c3e50; color: #fff; }<br />
.left { grid-area: left; background: #ecf0f1; }<br />
.main { grid-area: main; background: #fff; }<br />
.right { grid-area: right; background: #ecf0f1; }<br />
.footer { grid-area: footer; background: #2c3e50; color: #fff; }
与传统float方案相比，Grid实现圣杯布局不需要额外的清除浮动、负margin等hack技巧，代码量大幅减少且语义清晰。
Grid与Flexbox如何选择
Grid和Flexbox并非互斥关系，而是互补的。选择原则很简单：
2
3
4
5
6
7
8
9
10
- 导航栏内元素排列<br />
- 按钮组对齐<br />
- 单行卡片列表
二维布局（行和列）→ CSS Grid<br />
- 整体页面结构<br />
- 图片瀑布流/画廊<br />
- 复杂表单布局<br />
- 仪表盘面板
实际项目中，两者经常嵌套使用：外层用Grid做页面大框架，内层用Flexbox处理组件内部排列。
总结
CSS Grid是现代前端布局的核心技术，掌握以下要点即可应对大部分布局需求：
• 使用
1 | fr |
单位和
1 | repeat() |
函数定义灵活的行列结构
• 使用
1 | minmax() |
结合
1 | auto-fill |
/
1 | auto-fit |
实现响应式网格
• 使用
1 | grid-template-areas |
直观定义页面区域布局
• Grid擅长二维整体布局，Flexbox擅长一维组件内排列，两者配合使用效果最佳