「CSS Grid 布局生成器」主要解决什么问题？
可视化生成 CSS Grid 布局，支持等分列、响应式卡片、侧栏布局、间距和对齐设置。 适合先完成计算、转换或检查，再根据实际使用场景复核输出。
← 返回工具箱repeat(auto-fit, minmax(240px, 1fr))
设计 / CSS
CSS Grid 布局生成器
调整列数、间距、最小卡片宽度和侧栏宽度，实时预览 CSS Grid 布局，并复制 CSS 或 Tailwind 任意值类名。
布局模式
常用预设
实时预览
拖动参数后，布局会马上更新。
ITEM 01
内容块
卡片内容会按 Grid 规则排布。
ITEM 02
内容块
卡片内容会按 Grid 规则排布。
ITEM 03
内容块
卡片内容会按 Grid 规则排布。
ITEM 04
内容块
卡片内容会按 Grid 规则排布。
ITEM 05
内容块
卡片内容会按 Grid 规则排布。
ITEM 06
内容块
卡片内容会按 Grid 规则排布。
ITEM 07
内容块
卡片内容会按 Grid 规则排布。
ITEM 08
内容块
卡片内容会按 Grid 规则排布。
CSS
.grid-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px 20px;
align-items: stretch;
justify-items: stretch;
}Tailwind 任意值
grid grid-cols-[repeat(auto-fit,_minmax(240px,_1fr))] gap-x-[20px] gap-y-[20px] items-stretch justify-items-stretch
等分列
固定列数适合桌面端稳定区域，移动端可用媒体查询切换列数。
auto-fit
卡片数量和容器宽度变化时自动换行，是工具箱和商品列表的常用写法。
侧栏
侧栏宽度固定，主内容区用 minmax(0, 1fr) 防止长文本撑破布局。