CSS Grid布局生成器

工具说明

Grid 是 CSS 里少有的「所见即所得」的布局方案：写下列的定义，浏览器自己算位置。难点在于 grid-template-columns 的取值花样多——等分用 1fr、自适应用 minmax、固定宽度直接写像素，选错一个，响应式效果就完全不同。

三种列宽模式怎么选

• 等分 1fr：所有列平分可用宽度。适合列数固定的仪表盘、表单栅格。缺点是窄屏上每列会被压得很窄。
• minmax 自适应：写 repeat(auto-fit, minmax(180px, 1fr))，浏览器按容器宽度自动决定能放几列，放不下就换行。这是卡片列表、商品列表的标准写法。
• 固定像素：列宽写死，简单直观但不够灵活，容器变窄时可能溢出。
• auto：列宽由内容决定，适合表格式排版。

gap 为什么要分成行与列

写成 gap: 行间距 列间距 时，第一个值是行间距、第二个才是列间距，顺序与直觉相反，很容易写反。分开调能让横竖疏密不同，比如卡片之间横向留 16 像素、纵向留 12 像素，视觉上更紧凑。

auto-fit 与 auto-fill 的区别

两者都按容器宽度决定列数，差别在于元素不足时：auto-fit 会把空轨道收掉，剩下的元素被拉伸铺满整行；auto-fill 会保留空轨道，元素保持原宽排在左侧。列表元素少、希望铺满时用 auto-fit；希望左对齐留白时用 auto-fill。

你可能还想问

为什么我设置的列数在窄屏上没生效？

多半是因为用了等分模式而没有配合媒体查询。等分模式下列数写死，窄屏上每列会一起被压窄，不会自动换行。要让它自适应换行，请把列宽模式改成自适应最小宽度，用 minmax 让浏览器按容器宽度决定列数。

gap 写一个值和写两个值有什么区别？

写一个值时行列间距相同；写两个值时第一个是行间距、第二个是列间距。很多人会按读顺序理解成先列后行，结果调反了。本工具把行列分开设置，就是为了避免这个顺序踩坑。

grid 和 flex 该用哪个？

一维排列用 flex，二维网格用 grid。换句话说：只关心横向怎么排（导航条、按钮组、标签行）用 flex；同时要管横向和纵向对齐（卡片列表、页面骨架、表单栅格）用 grid。两者不冲突，页面骨架用 grid、局部组件用 flex 是常见组合。

auto-fit 和 auto-fill 到底差在哪？

容器里元素足够多时两者完全一样。差别只在元素不足一行时：auto-fit 会把没被占用的空轨道合并掉，于是剩余元素被拉伸铺满整行；auto-fill 保留空轨道，元素保持原宽并左对齐。做商品列表通常希望铺满，用 auto-fit；做工具栏希望保持尺寸一致，用 auto-fill。

相关工具

相关内容