姬轩亦1. 网格布局的前世今生
2008年，当CSS工作组首次提出网格布局草案时，前端开发者们还在用float和position苦苦挣扎。直到2017年，这个被称作"display: grid"的布局方案终于成为W3C正式标准。如今在Can I Use上，全球浏览器支持率已达98%，这意味着我们终于可以告别那些hack手法，用声明式语法实现精准布局。
我在2018年首次将Grid布局应用到电商后台管理系统，原本需要嵌套三层div的仪表盘，现在只需20行CSS代码。这种生产力提升让我意识到：是时候系统梳理这个改变游戏规则的布局方案了。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 基础概念拆解
2.1 网格容器与项目
任何元素只要设置display: grid就会成为网格容器（Grid Container），其直接子元素自动变为网格项目（Grid Item）。这里有个关键细节：仅直接子级参与网格布局，孙子元素不受影响。这区别于Flexbox的嵌套传染性。
css复制.container {
display: grid; /* 魔法生效点 */
}
2.2 显式与隐式网格
显式网格是我们用grid-template-*明确定义的轨道（行/列），而隐式网格是当项目超出定义范围时自动生成的轨道。实际开发中常见的问题是隐式轨道尺寸失控：
css复制/* 显式定义3列 */
grid-template-columns: 100px 200px 300px;
/* 第4个项目会自动创建隐式列 */
/* 默认尺寸为auto，可能导致布局错乱 */
经验：始终用
grid-auto-rows/columns给隐式轨道设置默认尺寸
3. 轨道定义的艺术
3.1 尺寸单位全解析
- 固定单位：
px适合侧边栏等固定区域 - 弹性单位：
fr按比例分配剩余空间（类似Flexbox的flex-grow） - 内容适应：
min-content/max-content根据内容自动调整 - 动态区间：
minmax(200px, 1fr)创建响应式轨道
css复制/* 经典导航+内容布局 */
grid-template-columns:
minmax(200px, 15%