🔲CSS Grid 布局生成器

怎么用 Grid 布局生成器

1. 先设置需要的列数和行数，再给每条轨道设尺寸：fr 表示按比例分配剩余空间，px 或 % 表示固定，auto 表示按内容撑开。
2. 输入名称后在预览里拖选一片单元格，就能把这个矩形变成一个网格区域，区域会出现在列表和 grid-template-areas 里。
3. 复制容器 CSS 和对应的 HTML 即可。

常见问题

1fr 到底是什么意思？

fr 是扣掉固定轨道和间距之后剩余空间的份数。三列写成 1fr 2fr 1fr，剩余宽度就按 25%、50%、25% 分配。

一定要用命名区域吗？

不一定。命名区域让布局一眼就能看懂，但你也可以不用，直接给子元素写 grid-column 和 grid-row。没有归属区域的单元格在 grid-template-areas 里写成一个点。

为什么区域必须是矩形？

CSS 规范只允许矩形区域，同名的单元格必须组成一个完整矩形。所以本工具总是从你按下的单元格到松开的单元格生成一个矩形。