CSS Grid 布局参数详解（超细化版）+ 中文注释 Demo
Grid 不难，难的是你以为自己会了（我当年也是这么翻车的）
一、真实问题：为什么我写的 Grid 总是"不听话"？
刚开始用 Grid 的时候，我有个错觉：
👉 "这不就是换个写法的 Flex 吗？"
结果现实狠狠打脸：
- 元素不对齐
fr不生效- 布局一改全崩
后来才明白：
👉 Grid 是二维布局系统，本质上是"规则驱动"，不是"感觉驱动"
所以这篇直接给你------参数拆到骨头 + 中文注释 + 可跑 demo
二、Grid 核心参数（逐个拆解）
1️⃣ display: grid（开启 Grid）
css
.container {
display: grid; /* 开启 grid 布局，子元素自动成为网格项 */
}📌 补充：
inline-grid：类似 inline-block（不常用）
2️⃣ grid-template-columns（列定义）
👉 定义"列数 + 宽度规则"
css
.container {
grid-template-columns: 100px 200px 1fr;
/* 第一列：100px固定宽度 */
/* 第二列：200px固定宽度 */
/* 第三列：剩余空间（重点） */
}常见写法
css
grid-template-columns: repeat(3, 1fr);
/* 等价于 1fr 1fr 1fr，三等分 */
css
grid-template-columns: repeat(auto-fill, 200px);
/* 自动填充列，每列200px，能放多少放多少 */
css
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* 自适应布局：最小200px，最大1fr（响应式神器） */📌 关键点：
-
fr：剩余空间分配单位 -
auto-fillvsauto-fit：- fill：占位但可能空
- fit：会拉伸填满
3️⃣ grid-template-rows（行定义）
css
.container {
grid-template-rows: 100px auto 1fr;
/* 第一行固定100px */
/* 第二行根据内容自适应 */
/* 第三行占剩余空间 */
}📌 注意：
👉 行高如果不写，默认是 auto
4️⃣ gap / row-gap / column-gap（间距）
css
.container {
gap: 10px;
/* 行和列间距都是10px */
}
css
.container {
row-gap: 10px; /* 行间距 */
column-gap: 20px; /* 列间距 */
}📌 说明：
👉 比 margin 好用，不会塌陷、不用算边距
5️⃣ grid-template-areas（区域布局）
👉 给布局"起名字"，非常适合复杂页面
css
.container {
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
css
.header {
grid-area: header; /* 对应上面定义的区域名 */
}📌 规则：
- 每行列数必须一致
.表示空白区域
css
"header header"
"sidebar ."6️⃣ grid-column / grid-row（定位）
css
.item {
grid-column: 1 / 3;
/* 从第1列开始，到第3列结束（不包含3） */
}
css
.item {
grid-row: 2 / 4;
/* 占第2行到第4行 */
}📌 简写：
css
grid-column: span 2;
/* 跨2列 */7️⃣ justify-items / align-items（格子内对齐）
css
.container {
justify-items: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}📌 可选值：
startendcenterstretch（默认）
8️⃣ justify-content / align-content（整体对齐）
css
.container {
justify-content: center; /* 整体水平居中 */
align-content: center; /* 整体垂直居中 */
}📌 使用前提：
👉 Grid 总尺寸 < 容器尺寸（否则没效果）
9️⃣ place-items（简写）
css
.container {
place-items: center;
/* 等价于：
justify-items: center;
align-items: center;
*/
}🔟 minmax()（超实用）
css
grid-template-columns: repeat(3, minmax(100px, 1fr));
/* 每列最小100px，最大1fr */📌 用途：
👉 防止元素被压爆（特别是地图 + 面板）
三、完整 Demo（可直接跑）
👉 场景：后台布局 + 注释版
html
<div class="container">
<div class="header">头部</div>
<div class="sidebar">侧边栏</div>
<div class="content">内容区</div>
<div class="footer">底部</div>
</div>
css
.container {
display: grid; /* 开启grid */
height: 100vh; /* 关键：必须有高度 */
grid-template-columns: 200px 1fr;
/* 左侧200px，右侧自适应 */
grid-template-rows: 60px 1fr 40px;
/* 头部60px，中间自适应，底部40px */
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
gap: 10px; /* 间距 */
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}四、WebGIS 实战（地图布局）
👉 这个是我自己项目里用最多的
css
.layout {
display: grid;
grid-template-columns: 1fr 300px;
/* 地图自适应 + 右侧面板固定 */
height: 100vh;
}
.map {
min-width: 0;
/* ⚠️ 防止地图容器溢出（OpenLayers常见坑） */
}
.panel {
border-left: 1px solid #ccc;
}📌 为什么用 Grid？
👉 因为地图这种东西：
- 需要"占满"
- 又要留空间给工具栏
Grid 天然适配。
五、踩坑总结（真实血泪）
❌ 1. fr 不生效
👉 原因：
- 父容器没高度
❌ 2. 内容把 Grid 撑爆
👉 解决：
css
min-width: 0;
overflow: hidden;❌ 3. auto-fit 和 auto-fill 搞混
👉 简单记：
- fill：占坑
- fit：拉伸
❌ 4. grid-area 拼写错误
👉 这个真的很隐蔽（建议复制粘贴）
❌ 5. Grid + Flex 乱用
👉 建议：
- 大布局：Grid
- 小组件：Flex
六、总结
Grid 真正的核心不是 API，而是这三件事：
- 空间如何分配（fr / minmax）
- 结构如何定义（rows / columns）
- 元素如何放置（area / column）
说句有点"程序员味"的话：
Grid 就像一个布局引擎
你写的是"规则"，浏览器帮你"算结果"
理解了这一点，你基本不会再被布局折磨。
（不然就继续 margin-left: 9999px 这种上古写法了 😅）
如果这篇文章对你有帮助，欢迎点赞 👍 收藏 ⭐ 关注 👀
完结，撒花✿✿ヽ(°▽°)ノ✿