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