![]()
CSS Grid 号称布局神器,但写代码像在黑暗里拼拼图——调完参数才能看到效果,错了就重来。这个痛点从2017年Grid规范落地就没人真正解决,直到上周一个独立开发者扔出了可视化 playground。
界面像调音台:8列6行上限,gap 拖到32px实时看留白,minmax() 和 1fr 的拉扯直接可视化。你拖动滑块,网格线跟着动,单元格像活字印刷的铅字重新排布。开发者说灵感来自「每次调 Grid 都要开五个浏览器标签页查文档」的暴躁日常。
![]()
同系列还有 Flexbox 版本。整个工具箱塞了300多个小玩意,从渐变生成器到正则测试,地址扔在 vercel.app 上——没融资没团队,纯个人项目。评论区有人贴了自己写的 Grid 代码,说「终于能截图给设计师解释为什么这里会崩了」。
有意思的是,这个 playground 本身是用 Tailwind 写的——那个被吐槽「让前端忘记 CSS 原生语法」的框架。作者没回避这点:「我也用工具,但工具不该遮住底层长什么样。」
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.