先说说我的使用场景。做后台管理系统时，需要实现一个动态卡片布局，卡片数量不定，每行显示 3 列，还要能平滑适配平板和手机。用 Flexbox？得写一堆媒体查询，而且换行时卡片的对齐问题能把人整疯。Grid 出场，十几行代码搞定。
（这张图展示了一个典型的 CSS Grid 布局效果：三列等宽的卡片，排列整齐，间距均匀。红框标出网格线和网格单元，方便初学者理解“网格轨道”和“网格区域”的概念。）
基础概念：先搞懂这几个关键点
1. 网格容器和网格项
这俩概念很简单，但你得记住一个原则：grid 属性只认直接子元素。如果你的 HTML 结构是 容器 > div > 内容，那只有第一层 div 是网格项，里面的内容不受控。我之前就这么被坑过，页面乱成一锅粥。
“`css
/* 正确的用法 */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
.grid-container > .grid-item {
/* 直接子元素才会变成网格项 */
border: 1px solid #ddd;
padding: 10px;
}
“`
2. fr 单位 vs 百分比
这是新手最容易翻车的地方。fr 是 Grid 专用的弹性单位，它会自动计算剩余空间。而百分比是相对于容器宽度，在有 gap 时容易溢出。比如你设 grid-template-columns: 33% 33% 33%，再加上 gap: 20px，总宽度就变成 99% + 60px，直接爆掉。
“`css
/* 推荐用 fr，自动处理间距 */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 三列等宽 */
gap: 20px;
}
/* 如果需要精确控制，可以混用 */
.grid-container-mixed {
display: grid;
grid-template-columns: 200px 1fr 2fr; /* 第一列固定200px，剩下空间按1:2分 */
gap: 16px;
}
“`
核心玩法：网格线、网格区域和自动排列
先看一个实际例子。我需要做一个新闻列表，左侧是主要标题，右侧是相关文章，底部还有推荐内容。用 grid-template-areas 可以像写表格一样定义区域。
“`css
.news-layout {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto auto;
grid-template-areas:
“main related”
“main recommended”;
gap: 24px;
max-width: 1200px;
margin: 0 auto;
}
.main-article {
grid-area: main;
}
.related-articles {
grid-area: related;
}
.recommended {
grid-area: recommended;
}
“`
这个设计真的反人类？刚开始我也觉得 grid-template-areas 写起来像玩拼图，但当你面对复杂布局时，它比层层嵌套的 Flexbox 清晰一万倍。而且改布局只需要改字符串，不用动 HTML 结构，重构时爽到飞起。
另一个坑：自动排列的 grid-auto-flow。默认是 row，即先填满一行再换行。但如果你希望卡片先填满第一列再换到第二列，就得设成 column。这个属性在瀑布流布局里特别好用。
“`css
.waterfall-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row dense; /* dense 模式会尽量填满空隙 */
gap: 16px;
}
.waterfall-item {
/* 高度不固定，由内容撑开，Grid 布局中内容不会被切断，无需额外属性 */
}
“`
（这张图展示了 grid-auto-flow 的两种模式：row 模式下，网格项按行填充；column 模式下，按列填充。图中用箭头标注了排列方向，并对比了 dense 和 sparse 模式对空隙处理的不同效果。）
响应式布局：告别媒体查询地狱
有个技巧你必须要会：auto-fit 和 auto-fill。这俩关键字可以自动计算列数，配合 minmax() 函数，一行代码搞定响应式。
“`css
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}
“`
这条规则的意思是：每列最小 280px，最大 1fr（即等分剩余空间）。当容器宽度不够时，自动减少列数。不需要写任何媒体查询，页面就能从 4 列平滑过渡到 3 列、2 列、1 列。
注意 auto-fill 和 auto-fit 的区别：前者会保留空的网格轨道（不占空间但计算在内），后者会压缩掉空轨道，让内容居中对齐。我一般用 auto-fit，因为视觉上更紧凑。
“`css
/* auto-fit 更适合大多数场景，自动折叠空列 */
.grid-fit {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
/* 移动端微调 */
@media (max-width: 600px) {
.grid-fit {
grid-template-columns: 1fr; /* 直接变成单列 */
}
}
“`
高级技巧：对齐、层级和性能优化
对齐问题：place-items 是 align-items 和 justify-items 的简写，能同时控制水平和垂直对齐。比如 place-items: center 让网格项居中，省得写两行。还有 place-content 控制整个网格在容器里的位置，适合做居中布局。
层级控制：Grid 项可以用 z-index 叠放，配合 grid-row 和 grid-column 指定位置，能做出重叠效果。比如一个卡片盖住另一个卡片的部分区域，用 Flexbox 得折腾半天，Grid 里直接设 grid-column: 1 / 3 再调 z-index 就行。
性能优化：如果页面里有大量网格项（比如几百张卡片），可以用 content-visibility: auto 来延迟渲染视口外的内容，滚动时再加载。注意：content-visibility 在 Chrome 85+、Edge 85+、Firefox 107+ 中支持，Safari 尚未完全支持。建议使用前检查浏览器兼容性，或用 Intersection Observer API 做降级方案。
“`css
.lazy-grid-item {
content-visibility: auto; /* 视口外内容延迟渲染 */
contain-intrinsic-size: 200px; /* 预估高度，防止滚动条抖动 */
}
“`
这套组合拳下来，页面加载速度能快不少，尤其适合后台管理系统的数据表格或卡片列表。