CSS 网格布局生成器：列、行与命名区域

使用方法

输入“列（轨道尺寸）”和“行（轨道尺寸）”。例如两列时，200px 1fr 给出固定宽度的侧栏和可伸缩的主内容区。
设置“列间距（px）”和“行间距（px）”，并为容器填写“类名”。
在“要绘制的区域名称”中输入名称，保持选中“绘制”，然后点击属于该区域的单元格。选择“擦除”可清除单元格。
在把规则粘贴到样式表之前，复制“CSS”框中的内容，或查看“预览”。

轨道尺寸与 repeat()

每个轨道都是网格中的一个尺寸：可以是 px 或百分比的长度，按剩余空间比例分配的 fr 弹性尺寸，auto、min-content 或 max-content。minmax(最小值, 最大值) 为轨道提供一个范围。CSS 网格布局规范（英文）规定了每种轨道的计算方式。

repeat(3, 1fr) 把同一轨道写三次。repeat(auto-fill, minmax(200px, 1fr)) 会生成与盒子宽度相适应的尽量多的轨道。由于该数量取决于盒子，auto-fill 或 auto-fit 中的每个轨道都需要固定尺寸，而且本工具无法在其上绘制命名区域。

grid-template-columns: 200px 1fr;  grid-template-rows: auto 1fr auto;  gap: row-gap column-gap;

命名区域

grid-template-areas 属性为网格的每一行提供一个字符串。字符串中的名称即该行的单元格，句点表示不属于任何区域的单元格。每个名称都必须填满一个矩形，因为浏览器无法把名称放在 L 形或两个分开的块中。

名称由容器放置到网格上，每个子元素则用 grid-area 找到自己的位置。本工具为每个名称写一条规则，因此带有该类名的元素会填满它的单元格。

每行轨道对应一行名称，并且每行的名称数量相同。
名称应描述页面的某一部分，例如 header、sidebar 或 main，因为规则以这些名称作为类名。

计算示例：包含页眉、侧栏、内容和页脚的页面

默认布局有两列，即200px 和可伸缩的 1fr；三行，即页眉为 auto，中部为 1fr，页脚为 auto。两个方向的间距都是16 px。页眉横跨两列，侧栏和主内容共享中间一行，页脚则横跨底部两列。

CSS 从 .layout { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr auto; gap: 16px; } 开始，然后是 grid-template-areas，包含三行："header header"、"sidebar main" 和 "footer footer"。每个名称都有自己的 grid-area 规则，因此 header 元素填满第一行。

常见问题

fr 与 auto 有什么区别？

fr 轨道按其倍数，分配固定轨道之后剩下的空间，因此 1fr 2fr 使第二列的宽度是第一列的两倍。auto 轨道的宽度由其内容决定，然后再分享多余的空间。

为什么不能在 auto-fill 轨道上绘制区域？

auto-fill 和 auto-fit 根据盒子的宽度决定轨道数量，因此编辑时单元格的数量并不确定。命名区域需要固定的数量，所以绘制区域时，工具会要求您删除 auto-fill 或 auto-fit。

为什么每个区域都有自己的规则？

grid-template-areas 把名称放在网格上，但每个元素仍需说明它占据哪个单元格，这由 grid-area 完成。本工具为每个名称写一条规则，使用同名的类。

我没有绘制的单元格会怎样？

不属于任何区域的单元格在 grid-template-areas 中写作句点。命名区域不会在该单元格中放置任何内容，因此它保持为空，除非您用其他方式在那里放置元素。

哪些浏览器支持 CSS 网格？

当前主流浏览器都支持 CSS 网格。若访客使用较旧的版本，请在依赖命名区域之前，先在这些版本中检查布局。

我的布局会被发送或保存到别处吗？

不会。网格、预览和 CSS 都在您的浏览器中生成。内容既不会保存，也不会发送到我们的服务器，因此离开页面前请先复制 CSS。

资料来源

数据和文字最近核对于2026年11月10日星期二。