打开网易新闻 查看精彩图片

CSS Grid 号称布局神器，但写代码像在黑暗里拼拼图——调完参数才能看到效果，错了就重来。这个痛点从2017年Grid规范落地就没人真正解决，直到上周一个独立开发者扔出了可视化 playground。

界面像调音台：8列6行上限，gap 拖到32px实时看留白，minmax() 和 1fr 的拉扯直接可视化。你拖动滑块，网格线跟着动，单元格像活字印刷的铅字重新排布。开发者说灵感来自「每次调 Grid 都要开五个浏览器标签页查文档」的暴躁日常。

打开网易新闻 查看精彩图片

同系列还有 Flexbox 版本。整个工具箱塞了300多个小玩意，从渐变生成器到正则测试，地址扔在 vercel.app 上——没融资没团队，纯个人项目。评论区有人贴了自己写的 Grid 代码，说「终于能截图给设计师解释为什么这里会崩了」。

有意思的是，这个 playground 本身是用 Tailwind 写的——那个被吐槽「让前端忘记 CSS 原生语法」的框架。作者没回避这点：「我也用工具，但工具不该遮住底层长什么样。」