CSS Grid与Flexbox布局生成器

在Grid和Flexbox之间自由切换，调整列数与行数，或调整弹性项目的排列方向、对齐方式及间距，容器内彩色方块会实时预览效果，随后即可复制精确的CSS代码。

所有处理都在你的设备本地完成——不会向任何服务器发送数据。

列数3行数2间距（Gap）12px

CSS 代码

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 12px;

选择现成的形状（圆形、三角形、星形、对话气泡等），复制clip-path CSS代码。

拖动两个控制点，直观设计自定义的运动缓动曲线，并复制cubic-bezier代码。

直观设计磨砂玻璃质感卡片效果，并复制现成的CSS代码。

浏览完整的工具库，现在就开始使用你需要的功能 —— 完全免费，无需注册。