1. 网格布局基础概念
CSS Grid布局是当前最强大的二维布局系统，它彻底改变了我们构建网页布局的方式。作为一名从业十年的前端开发者，我亲历了从表格布局到浮动布局，再到Flexbox，最终到Grid的整个演进过程。Grid布局的核心思想是将容器划分为行和列组成的网格，然后在这些网格中精确放置子元素。
与Flexbox这种一维布局系统不同，Grid允许我们同时在水平和垂直两个方向上控制布局。想象一下Excel表格，你可以自由合并单元格、调整行列大小，这就是Grid带来的布局自由度。
2. 网格容器与项目
2.1 创建网格容器
将一个元素设为网格容器非常简单：
.container { display: grid; }这个简单的声明就会让.container的所有直接子元素变成网格项目(grid items)。
2.2 定义网格轨道
网格轨道(track)是网格的行或列之间的空间。我们可以使用以下属性定义轨道：
.container { grid-template-columns: 100px 1fr 2fr; grid-template-rows: 50px auto 100px; }这里我使用了fr单位（fraction的缩写），它表示可用空间的分数。上面的例子中，第二列和第三列将按照1:2的比例分配剩余空间。
提示：在实际项目中，我经常使用
minmax()函数来创建更灵活的轨道，比如grid-template-columns: minmax(200px, 1fr) 3fr;
3. 网格线定位
3.1 基于线的放置
Grid布局最强大的特性之一是可以通过网格线精确控制项目位置：
.item { grid-column-start: 1; grid-column-end: 3; grid-row-start: 2; grid-row-end: 4; }这表示该项目从第1条垂直线延伸到第3条，从第2条水平线延伸到第4条。
3.2 简写语法
上面的写法可以简化为：
.item { grid-column: 1 / 3; grid-row: 2 / 4; }更简洁的写法是使用grid-area：
.item { grid-area: 2 / 1 / 4 / 3; } /* 顺序是：row-start / column-start / row-end / column-end */4. 网格区域命名
4.1 定义命名区域
我们可以给网格区域命名，使代码更语义化：
.container { grid-template-areas: "header header header" "sidebar main main" "footer footer footer"; }4.2 使用命名区域
然后可以这样放置项目：
.header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; }经验分享：在复杂布局中，命名区域可以大大提高代码可读性。我曾经重构过一个使用绝对定位的旧项目，改用Grid命名区域后，代码量减少了40%，维护性大幅提升。
5. 隐式网格与自动放置
5.1 隐式网格行为
当项目被放置在显式定义的网格之外，或者项目数量超过显式定义的网格单元格时，浏览器会自动创建隐式轨道。我们可以控制这些隐式轨道的尺寸：
.container { grid-auto-rows: 100px; grid-auto-columns: 1fr; }5.2 自动流控制
grid-auto-flow属性控制自动放置算法的工作方式：
.container { grid-auto-flow: row dense; }dense关键字会尝试填充网格中的空白，这在响应式布局中特别有用。
6. 对齐方式
6.1 项目内部对齐
我们可以控制网格项目内部内容如何对齐：
.container { justify-items: center; /* 水平对齐 */ align-items: center; /* 垂直对齐 */ /* 简写 */ place-items: center center; }6.2 整个内容区域对齐
当网格总尺寸小于容器时，可以控制整个网格区域的对齐：
.container { justify-content: space-between; align-content: center; /* 简写 */ place-content: center space-between; }7. 响应式布局技巧
7.1 自动填充与适应
.container { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }这个强大的模式会根据容器宽度自动创建尽可能多的200px列，如果空间不足则换行，所有列等宽并扩展填满容器。
7.2 媒体查询结合
.container { display: grid; grid-template-columns: 1fr; } @media (min-width: 600px) { .container { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .container { grid-template-columns: repeat(3, 1fr); } }8. 实战案例
8.1 经典圣杯布局
.container { display: grid; grid-template: "header header header" 80px "nav content aside" 1fr "footer footer footer" 60px / 200px 1fr 150px; }8.2 瀑布流布局
.container { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-auto-rows: 10px; /* 基础单位 */ } .item { grid-row-end: span var(--item-height); /* 通过JS计算高度 */ }9. 常见问题与解决方案
9.1 浏览器兼容性
虽然现代浏览器都支持Grid，但在IE11中需要使用-ms前缀，且部分特性不支持。可以使用特性查询渐进增强：
@supports (display: grid) { /* 现代浏览器样式 */ } /* IE11特定样式 */ @media all and (-ms-high-contrast: none) { /* IE11备用布局 */ }9.2 性能考量
Grid布局性能通常很好，但在极端情况下（如数千个网格项目）可能会遇到性能问题。解决方案：
- 虚拟滚动
- 分页加载
- 减少嵌套网格
9.3 调试技巧
Chrome开发者工具中的Grid检查器非常有用：
- 在Elements面板中找到网格容器
- 点击display: grid旁边的网格图标
- 可以可视化网格线、区域和间距
10. Grid与Flexbox的选择
虽然Grid很强大，但Flexbox仍然有其用武之地：
使用Grid当：
- 需要二维布局控制
- 需要精确控制行列对齐
- 布局整体上是一个网格
使用Flexbox当：
- 只需要一维布局
- 内容需要动态流动和包裹
- 项目需要基于内容尺寸灵活调整
在实际项目中，我经常将两者结合使用：用Grid创建整体布局框架，用Flexbox控制内部组件的排列。
