CSS 网格生成器

CSS 网格同时按行和列来布局页面。这个生成器根据你的列和行模板（repeat()、fr、minmax()、auto-fill）、间距和对齐方式写出容器规则；把命名区域的简单文字草图转换成 grid-template-areas，并为每个区域生成一条 grid-area 规则；同时给出对应的 HTML。它会先检查语法——未知的轨道尺寸、长度不一的行以及非矩形的区域都会被报告，而不是被默默忽略——并在你自己的浏览器中渲染布局。

使用方法

1. 输入列模板，例如 repeat(3, 1fr) 或 200px 1fr。
2. 可以再输入行，并按每行一行网格来勾勒命名区域。
3. 设置行间距、列间距和项目对齐方式。
4. 复制 CSS 和 HTML；预览显示浏览器计算出的布局。

计算公式

display: grid; grid-template-columns: <轨道>; grid-template-rows: <轨道>; grid-template-areas: "a a" "b c"; gap: <行> <列>;

轨道可以是长度（200px）、弹性分数（1fr）、auto、min-content、max-content、minmax(min, max) 或 fit-content()。在 grid-template-areas 中，每一行必须有相同数量的单元格，每个名称必须覆盖一个矩形；“.”表示留空。

示例

列 200px 1fr、行 auto 1fr auto，区域为“header header / sidebar main / footer footer”，得到经典的页面布局：2 列 × 3 行，用 gap: 16px 24px 让行间距 16 px、列间距 24 px，并生成 .header { grid-area: header; } 之类的规则。默认的 repeat(3, 1fr) 配 6 个项目，则是 3 个等宽列 × 2 行。