企业官网建设流程全解析

CSS Grid 布局早已在所有主流浏览器中"全面落地"，但兼容性坑并没有随之消失。GridBugs 是一份由社区共同维护的 CSS Grid 互操作问题清单（curated list of Grid interop issues），系统记录了各浏览器在 Grid 规范实现上的 bug、不完整实现与互操作差异。如果你正在排查 Grid 布局在不同浏览器中的诡异表现，这份清单就是最好的"事故档案库"。

GridBugs 是什么？🗂️

GridBugs 的设计灵感来自经典的 Flexbugs 项目，目标同样明确：社区化地整理布局技术的兼容性缺陷。README 中的开篇就说明了它的定位：

Grid 虽然以高度互操作的状态进入了浏览器，但仍然存在一些问题——我们在这里记录下发现的每一个。

它关注的不仅是 CSS Grid 规范 本身，还会引用 Box Alignment 等相关规范。如果你发现某个疑似 Grid 相关的问题，也可以直接向项目提交 Issue，社区会一起确认这到底是浏览器问题还是规范问题。

项目核心资料入口：

• 完整 bug 清单与说明：README.md
• 开源协议：LICENSE

每条 Bug 记录长什么样？🔍

清单中每一条问题都采用统一的四栏结构，方便你快速判断"这个坑会不会坑到我"：

这种"演示 + 受影响浏览器 + 跟踪单"的组合，让开发者可以一键判断兼容性风险等级，而不用自己去猜。

14 个经典坑速览：哪些和 CSS Grid 兼容性最相关？🕳️

GridBugs 共收录了 14 个问题。按类别整理后，可以帮你快速建立"Grid 兼容性风险地图"：

一、语法层面的坑：自动轨道与 repeat() 记法

1. grid-auto-rows/grid-auto-columns应接受轨道列表（详情）：规范要求给出一组尺寸时按模式重复用于隐式轨道，但 Firefox 当时只支持单一尺寸。
2. repeat()记法应接受轨道列表（详情）：repeat(3, 200px 100px)甚至repeat(auto-fill, ...)这类写法在部分浏览器中不生效。

这两条对新手尤其重要——很多"高级写法"在规范里合法，浏览器却悄悄不认。

二、分页与碎片化：Fragmentation 支持不完整

碎片化支持（Fragmentation）（详情）：在 Firefox、Chrome、Safari 中对 Grid 的碎片化支持都有限，因此break-*系列属性在 Grid 容器中很难可靠工作。如果你做打印或分页场景的 Grid 布局，这是一条需要提前验证的坑。

三、图片与固有尺寸：Grid 兼容性中"最容易被忽视"的一类

• 固定轨道内的固有尺寸项目（详情）：Firefox 中图片会被压缩进固定尺寸轨道，而按规范应该溢出。
• 固有宽高比项目应 start 对齐（详情）：Safari 10 曾默认stretch。✅ 变通方案：给项目显式声明align-self: start和justify-self: start。
• 百分比 max-height 无法缩放图片（详情）：Chrome 中固定轨道内的图片超出尺寸时直接溢出，改用px或max-width可规避。

四、间隙处理：grid-gap 的百分比争议

• grid-gap应接受百分比值（详情）：在浮点或 Flexbox 网格系统中迁移到 Grid 时，间距常需要用百分比，而该能力在 Level 1 规范中一度被标记为 at-risk。
• 行间隙百分比在网格高度不固定时的行为不一致（详情）：Chrome/Safari/Edge 会把行间隙折叠为 0，Firefox 则按总高度计算百分比——同一份代码，两种结果。

五、关键字值与元素限制

• min-content/max-content在轨道列表中的支持（详情）：Safari 10 曾只有-webkit-前缀版本，✅ 变通方案是加写-webkit-min-content等前缀。
• 部分 HTML 元素无法成为 Grid 容器（详情）：Chrome（及 Safari 10）中fieldset设置display: grid后不生效；button作为 Grid 容器当时只有 Firefox 支持。
• textarea 作为网格项塌缩为 0 宽（详情）：OS X 上的 Chrome 特有 bug，输入文字时宽度归零。

六、空间分配与百分比盒模型

• 空轨道被跨轨道项"吸血"空间（详情）：Firefox 会给被 span 的空轨道多分配空间，且行为还随源码顺序变化。
• 百分比 padding / margin 解析不一致（详情）：Firefox 和 Edge 按项目对应维度解析，Chrome 一律按宽度解析；规范允许两种实现，官方建议作者避免在 Grid 项上使用百分比内外边距。
• fit-content 轨道被拉伸（详情）：Chrome/WebKit 曾将fit-content轨道拉伸，而 Firefox/Edge 不拉伸。CSS WG 最终裁定"轨道不应被拉伸"，Blink 随后修复。✅ 变通方案：对轨道使用justify-content: start或end。

如何排查你自己的 Grid 兼容性问题？🛠️

GridBugs 在 README 中明确划定了边界——它不是 CSS Grid 技术求助台。在提交或检索问题时，官方要求先完成这几步：

1. 制作 Reduced Test Case（最小测试用例）：确认问题出在浏览器而非自己的代码；
2. 对照清单确认已知坑：检查 14 条记录中的 Demos 是否和你要复现的现象一致；
3. 确认归属：是浏览器 bug、规范歧义，还是用法问题——GridBugs 会帮你把问题报到正确的地方；
4. 学习基础知识：项目 README 建议初学者优先使用 Grid by Example 这类系统性资源，而非在 bug 清单里找答案。

这套流程对所有前端兼容性排查都有参考价值：先最小化复现，再比对已知问题，最后定位责任方。

参与贡献：让这份清单保持准确 ✍️

GridBugs 是社区驱动的：维护者明确写道"如果我哪里判断错了，请提一个 Issue"。贡献路径很简单（详见 README.md 的 Contributing 章节）：

• 发现新问题：先提交 Issue，附上能清晰复现问题的最小测试用例；
• 发现清单中某条信息过时或指向错误的浏览器：同样提 Issue 纠正；
• 掌握变通方案：在对应 Issue 中补充 workaround，帮助后来的排查者。

写在最后：为什么这份"旧清单"值得收藏 📚

从时间线看，GridBugs 记录的多是 2017 年前后的浏览器行为，其中相当一部分（如 Safari 的前缀值、fit-content 拉伸）已被修复。但它对今天的价值恰恰在于：

• 理解互操作问题的全貌：每条记录都展示了"规范 → 浏览器分歧 → CSS WG 裁定 → 修复/变通方案"的完整链路；
• 迁移老项目的排错地图：如果你的代码库中残留着当年为绕过这些坑写的 hack，现在可以放心清理了；
• 方法论模板：四栏式的记录结构本身就是前端兼容性排查的典范。

配合 LICENSE 协议使用这份资料完全自由。下次当 Grid 布局在某个浏览器中"不对劲"时，不妨先翻一翻这份历史档案——答案可能就藏在 14 条记录里。