CSS Grid 生成器

CSS Grid 生成器: 用途

选择固定列（提供 2、3、4 列、内容加侧栏、菜单加内容的快捷方式），或响应式模式，列会通过 repeat(auto-fit, minmax()) 适应宽度。设置项目数量和间距。

点击预览中的某一项让它占两列，并拖动预览的角来测试不同宽度。CSS 和 HTML 随时可以复制。

使用方法

1. 选择模式和列。
2. 设置项目和间距；点击项目使其占 2 列。
3. 复制 CSS 和 HTML。

使用场景

• 卡片、产品和照片的网格。
• 带侧边栏的布局。
• 通过查看效果来学习 CSS Grid。

常见问题

1fr 是什么意思？

剩余空间的一份。三列 1fr 1fr 1fr 会把宽度平均分成相等的几份；2fr 1fr 则让第一列是第二列的两倍。

repeat(auto-fit, minmax(220px, 1fr)) 有什么作用？

创建尽可能多的列，每列至少 220px，并拉伸各列填满整行。这是不用媒体查询做响应式卡片网格最简单的方法。

怎样让某一项占两列？

给该项使用 grid-column: span 2。在预览中点击某一项，可在占 1 列和 2 列之间切换，CSS 会同步更新。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具