CSS Grid 生成器

功能特性

行列数量设置

拖拽调整尺寸

单元格合并

间距控制

同时生成 CSS 与 HTML

使用方法

1. 设置行数和列数。

2. 调整行高和列宽（fr、px、auto）。

3. 设置网格间距。

4. 复制生成的 CSS 和 HTML。

关于这个工具

CSS Grid 同时按行和列排布内容，是画廊、仪表盘和页面结构的天然选择。这个生成器以可视化方式设置网格容器：选择需要的列数和行数、它们之间的间距，以及列如何分配空间——用 1fr 等分、自动宽度、用 minmax(0, 1fr) 防止长内容撑破列宽，或固定为 100px。预览会显示元素如何依次填入网格，CSS 使用 repeat() 书写，简洁易读。把它复制为起点，再在自己的样式表中用 grid-column 和 grid-row 放置具体元素。

常见问题

fr 单位是什么意思？

fr 表示网格容器中剩余空间的一份。三列都是 1fr 时平分空间；2fr 1fr 则让第一列宽度是第二列的两倍。

为什么用 minmax(0, 1fr) 而不是 1fr？

1fr 的轨道不能缩小到其内容的最小尺寸以下，一个长单词或宽表格就可能把列撑宽。minmax(0, 1fr) 允许列继续缩小，从而保证等宽的列真正等宽。

怎样让网格响应式？

常用写法是 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))，它会按宽度放下尽可能多的最小 240px 的列，其余自动换到新行，无需媒体查询。

怎样让一个元素跨越多列？

给元素加上 grid-column: span 2 即可占两列，或写 grid-column: 1 / -1 让它横跨整行。grid-row 对行的用法相同。

gap、column-gap 和 row-gap 有什么区别？

column-gap 设置列间距，row-gap 设置行间距，gap 是两者的简写。间距只加在轨道之间，不会加在网格外侧。

功能特性

使用方法

关于这个工具

常见问题

相关工具