颜色格式转换
转换 HEX、RGB、HSL 与透明度，实时查看色样，并复制可直接使用的 CSS 颜色。
CSS Grid 布局生成器
可视化设置固定或自适应网格列、间距和对齐，实时预览布局并输出 CSS 与 HTML。
工具介绍
搭建卡片列表前，可先在不同预览宽度下检查网格如何排布。
使用说明
选择固定列数或按最小列宽自动适应，再调整行数、间距、对齐和子项数量。拖动预览宽度观察窄容器下的实际排列，CSS 与 HTML 可分别复制和下载。
宽度滑块只改变预览容器，不写入输出样式。固定网格支持 1–12 行和列，间距为 0–80 px，最多预览 48 个子项。生成代码包含布局及子项基础尺寸，请按实际内容补充视觉样式。
常见问题
怎样让列数随可用宽度变化？
选择自动适配并设置最小列宽，导出规则使用 auto-fit 与 minmax。预览宽度滑块只用于模拟容器，不会写入导出 CSS。
为什么实际出现的行数超过了设置值？
行数设置定义的是显式网格轨道，并不是子项数量上限。固定 3 列、2 行只有 6 个初始单元格，第 7 个子项会进入自动生成的隐式行。只想预览这 6 个单元格时，请相应减少子项数量。
相关工具
在新标签页打开
评论
0