CSS Grid 布局生成器

工具介绍

可视化设置固定或自适应网格列、间距和对齐，实时预览布局并输出 CSS 与 HTML。

设计工具

使用说明

选择固定列数或按最小列宽自动适应，再调整行数、间距、对齐和子项数量。拖动预览宽度观察窄容器下的实际排列，CSS 与 HTML 可分别复制和下载。

宽度滑块只改变预览容器，不写入输出样式。固定网格支持 1–12 行和列，间距为 0–80 px，最多预览 48 个子项。生成代码包含布局及子项基础尺寸，请按实际内容补充视觉样式。

相关工具

颜色格式转换

转换 HEX、RGB、HSL 与透明度，实时查看色样，并复制可直接使用的 CSS 颜色。

设计工具

颜色对比度检查

检查文字与背景的 WCAG 2.2 对比度，实时预览并分别显示普通与大号文字的 AA、AAA 结果。

设计工具

CSS 渐变生成器

可视化制作线性或径向渐变，编辑 2–8 个色标和位置，实时预览并复制 CSS。

设计工具

CSS 阴影生成器

直观调整位移、模糊、扩展、颜色与透明度，预览外阴影或内阴影并复制 box-shadow。

设计工具

评论

0

最新 最热 连续加载 分页

登录后参与评论。

暂无评论

回复讨论

按时间查看完整回复脉络；每条回复都会标明它回应的具体内容。