Grid 布局生成器

如何使用Grid 布局生成器

关于Grid 布局生成器的常见问题

Grid 布局生成器会上传数据吗？安全吗？

不会上传。Grid 布局生成器的框选划区、轨道求解、代码生成与粘贴反解析全部在你的浏览器本地完成，轨道设置、区域名称、项目文字与生成的代码都不会发送到服务器，关闭页面即清除。浏览器只记住导出格式、预览尺寸这类展示偏好，不保存你画的布局。站点自身仅有匿名访问量统计，与你编辑的内容无关。

手机上能用 Grid 布局生成器拖拽吗？

能用，但手机上不是拖，而是点两下：先点一格当起点，再点一格当终点，两格围成的矩形就是新区域，点同一格两次就是 1×1。之所以不做手指拖拽，是因为那样会让手指在预览上没法滚动页面。窄屏下预览区自己横向滚动，不会把页面撑破；每个区域的线号也能在卡片里直接改数字。

grid 布局怎么做圣杯三栏布局？

先画行列：列写成「侧栏定宽 + 主区 1fr」，行写成 auto 1fr auto，让页头页脚按内容、中间占满剩余高度。再用 grid-template-areas 给格子起名，页头页脚整行写同一个名字，最后让每个区块用 grid-area 认领自己的名字。本页默认载入的就是这套布局，点「页头侧栏主区页脚」配方可以随时恢复，代码一键复制即可用。

grid 里 fr 单位和百分比有什么区别？

百分比按容器宽度直接算，不管 gap 有多宽，几列百分比加上间距很容易超出容器；fr 分的是扣掉固定轨道与 gap 之后的剩余空间，永远不会因为间距而溢出。例如 200px 加两条 1fr 放进 600px 宽、间距 12px 的容器，每条 1fr 是 188px。另外 1fr 的最小值是按内容的，长内容会把它撑大，百分比不会。

grid 布局 1fr 的列为什么被内容撑破？

因为 1fr 实际是 minmax(auto, 1fr)，最小值按内容算。两条 1fr 放进 300px 容器，第一列里有 220px 宽的内容时，结果不是各 150px，而是 220px 与 80px。把两列都改成 minmax(0, 1fr) 才是真等分，结果是 150px 与 150px，多出的内容在格子里溢出。本页遇到这种情况会主动提示并给出一键修复。

grid 的 auto-fill 和 auto-fit 有什么区别？

两者都会按容器宽度算出能放几列，区别在于空列怎么处理：auto-fill 保留空列，auto-fit 把没有项目的空列折叠成 0，现有项目就被拉宽。同样写 repeat(auto-X, minmax(160px, 1fr))、容器 600px、间距 16px、只有 2 个项目时，auto-fill 每列 189.33px，auto-fit 每列 292px。项目足够多、能填满一行时两者结果一样。

grid-template-areas 为什么不生效？

最常见的有四种原因。一是每行字符串的格子数不一致，浏览器会判整条声明无效；二是同名格子没有围成实心矩形，比如 L 形，同样整条作废；三是项目上 grid-area 写的名字和 areas 里的对不上，大小写也算；四是 grid-area 的值写了引号，区域名不能加引号。空格子要写一个点。本页粘贴反解析会逐条指出是哪一种。

grid-column 的 1 / -1 是什么意思？

网格线从 1 开始编号，正着数是 1、2、3，倒着数是 -1、-2、-3，-1 永远是显式网格的最后一条线。所以 grid-column: 1 / -1 就是从第一条线一直跨到最后一条线，也就是占满整行，以后加减列也不用改它。注意 -1 只认显式网格，自动加出来的隐式列不算在内。本页预览上方标着每条线的正负两个编号。

grid 布局怎么做响应式卡片网格？

不用写媒体查询，一行就够：grid-template-columns: repeat(auto-fill, minmax(160px, 1fr))。浏览器会按容器宽度算出能放几列，每列至少 160px、多出的空间平分，容器变窄时自动减列换行。项目少于一行时想让卡片拉宽占满，就把 auto-fill 换成 auto-fit。本页「响应式卡片墙」配方可直接载入，改预览宽度就能看到列数变化。

grid-auto-flow dense 有什么副作用？

dense 会让自动放置回头去填前面留下的空位，排版更紧凑，代价是视觉顺序和 HTML 顺序不再一致：后写的小项目可能跑到前面去。读屏软件与键盘 Tab 焦点仍按 HTML 顺序走，于是看到的和读到的对不上。图片墙这类顺序无所谓的场景适合用，文章列表与表单不建议用。本页检测到顺序被打乱时会提示。

百分比行高在 grid 布局里为什么没效果？

百分比行高按容器的高度计算，而网页里容器的高度通常是 auto，由内容撑开，这时百分比行没有可参照的高度，会按 auto 处理。只有容器有明确高度，例如写了 height 或处在定高的父元素里，百分比行才生效。本页预览容器是固定高度的，所以看起来生效，用到百分比行时会提示这一差别。

Grid 布局生成器能导出 Tailwind 类名吗？

能。切到 Tailwind 标签就会输出容器类名串与每个区块的类名串，区块一律用线号写法，因为 Tailwind 没有原生的命名区域类名。官方类名优先，例如 12 栅格配方输出 grid-cols-12；没有档位的值会退回方括号任意值并逐条列出原因。注意 grid-cols-3 实际是三条 minmax(0, 1fr)，与手写三条 1fr 并不一样。

grid 布局和 flex 布局该怎么选？

Grid 是二维的，先画好行和列再往格子里放东西，适合整页骨架、仪表盘、卡片墙这类行列都要对齐的布局。Flex 是一维的，沿一条轴排一串项目，适合导航栏、按钮组、媒体对象。判断标准是只关心一个方向就用 flex，行和列都要对齐就用 grid，两者嵌套混用也很常见。调 flex 可以用本站的 Flexbox 演练场。

Grid 属性速查表：容器与项目分工

grid 布局怎么用，一句话概括：给容器写 display: grid，用 grid-template-columns 与 grid-template-rows 画出行列，再让每个项目认领其中一块矩形。这件事在中文里有好几种叫法 —— 网格布局、CSS 网格布局、CSS Grid 生成器，说的都是同一件事；想系统学一遍的，可以把这一页当成一份能动手拖的 grid 布局教程。英文站点上的 css grid generator、grid layout generator、css grid builder 指的也是这类工具。

属性分两组，写错地方是最常见的入门错误：轨道、间距与对齐写在容器上，grid-column、grid-row 与 grid-area 写在项目上。gap 间距的两个值先行后列，一个值时行列相同。

轨道的取值决定了每一列多宽、每一行多高。minmax 给一个下限和一个上限，repeat 函数把同一条轨道重复 N 次， 二者常常组合使用。最容易被忽略的一列是「最小值」：它决定了内容很长时轨道会不会被撑大。

网格线与轨道：1 / -1 为什么是整行

grid 网格线从 1 开始编号：3 列的网格有 4 条竖线，编号 1 到 4；倒着数则是 -1 到 -4，-1 永远是显式网格的最后一条线。 grid-column: 1 / 3 的意思是从第 1 条线跨到第 3 条线，也就是占前两列；写成 1 / span 2 效果相同，只是用跨度表达。 grid-column: 1 / -1 从第一条线跨到最后一条线，所以是整行，以后加列减列都不用改。

fr 单位怎么分空间：先扣固定再按比例

fr 单位分的是「剩余空间」：浏览器先扣掉固定宽度的轨道和所有 gap，剩下的再按 fr 的比例分。本页默认布局的列是 200px 1fr 1fr，容器 600px、间距 12px，扣掉 200px 与两条间距后剩余 376px，所以每条 1fr 是 188px，三列最终是 200 / 188 / 188px；行是 auto 1fr auto，最终是 40 / 256 / 40px。

最后一行最少见：fr 加起来小于 1 时，fr 轨道只分走剩余空间的那个比例，余下的交给 auto 轨道拉伸。 本页的轨道尺寸表会把每条轨道「按内容撑起后多大、最终多大、为什么」逐行列出来，不用再靠肉眼猜。

1fr 溢出陷阱：为什么换成 minmax(0, 1fr)

1fr 溢出是 grid 里问得最多的问题。1fr 的完整写法是 minmax(auto, 1fr)，下限 auto 的意思是「至少放得下内容」。 两条 1fr 放进 300px 容器，第一列里有一段 220px 宽、不能换行的内容时，第一列就被撑到 220px， 另一列只剩 80px。换成 minmax(0, 1fr) 后下限变成 0，两列各 150px，长内容在格子里溢出， 再配合 overflow 或 min-width 处理即可。

auto-fill 和 auto-fit 区别：空轨道去哪了

两者都写在 repeat() 里、按容器宽度算出能放几列。区别只在空列：auto-fill 保留空列，auto-fit 把没有项目的空列折叠成 0，连带它两边的 gap 也一起折叠，于是现有项目被拉宽。下表是同一个输入在两种模式下的结果。

grid-template-areas 命名区域的写法规则

grid-template-areas 用一组带引号的字符串画布局，每个字符串是一行，每个单词是一格；同名的格子合起来就是一个区域， 项目上写 grid-area: 名字 来认领。规则只有四条：每行格子数相同、同名格子必须围成实心矩形、空格子写一个点、 区域名不加引号。下面是本页默认布局生成的代码：

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header header"
    "sidebar main   main"
    "footer  footer footer";
  gap: 12px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

grid-auto-flow dense 会打乱阅读顺序

没有指定位置的项目由 grid-auto-flow 决定落点：row 按行逐格往后找空位、不回头；加上 dense 后每个项目都从头找， 会回头填前面留下的空洞。排得更紧凑的代价是视觉顺序与 HTML 顺序不一致，读屏软件与 Tab 键仍按 HTML 顺序走。 放不进显式网格的项目会让浏览器自动加出隐式轨道，它们的尺寸由 grid-auto-rows 或 grid-auto-columns 决定。

百分比行高为什么在真实页面里失效

百分比行按容器高度计算，可网页里的容器高度通常是 auto，没有可参照的高度时百分比行按 auto 处理。 本页预览容器是固定高度，所以百分比行在这里看起来生效；用到百分比行时工具会提示这一差别，想要可靠的行高请用 px、fr 或 auto。

常用 Grid 布局配方：圣杯、栅格与卡片墙

grid 圣杯布局、grid 12 栅格、grid 响应式卡片是最常被搜的三种写法，下面每个配方在工具区点一下就能载入整套模型， 再按需改轨道与区域。也就是说，grid 拖拽生成代码之外，你也可以从配方起步。

Tailwind grid 类名对照表

下表的类名取自 Tailwind CSS v3.4 的默认主题，由本站的数据表渲染。要特别注意列的类名：12 栅格配方命中的是 grid-cols-12，它代表 12 条 minmax(0, 1fr)；手写三条 1fr 则没有对应的官方类名，本工具会输出 grid-cols-[repeat(3,1fr)] 并说明差别。档位对不上的间距也会退回方括号任意值，不会硬套一个最接近的档位悄悄改掉你的数值。