CSS 网格生成器
直观地设计 CSS 网格布局：设置列、行和间隙，然后在单元格中输入区域名称以构建网格模板区域 - 具有实时预览和可复制的 CSS 和 HTML。
结果
grid-template-areas 声明是 CSS 中最具可读性的部分之一，但只有当它存在时——手动到达那里意味着计算引用的字符串和匹配的行长度，而一个不匹配的单元格会默默地破坏整个布局。该生成器将其转化为直接操作：设置列数和行数，在实时网格的任何单元格中键入名称，匹配的名称会自动合并到一个命名区域中。
在幕后，您留空的每个单元格都会成为生成的 grid-template-areas 字符串中的一个点，并且您命名的每个单元格都会成为该名称矩形的一部分。 CSS 只允许命名区域占据一个干净的矩形块，因此该工具会在您键入时进行检查，并准确地告诉您名称何时尚未形成有效的矩形 - 而不是默默地生成浏览器将拒绝的 CSS。
列间隙和行间隙默认为 8px，并在匹配时组合成一条间隙线，实时预览网格始终镜像您的 grid-template-columns 和 grid-template-rows 轨道，包括来自预设的固定像素列，如圣杯的 200px 侧轨。可复制的输出涵盖两面：一个为样式表准备好的 CSS 块和一个匹配的 HTML 骨架，每个命名区域有一个网格区域 div。
网格和 Flexbox 解决了不同的布局问题，而该站点上的 css-flexbox-generator 是一维布局的更好起点——单行或一列灵活的项目，例如导航栏或一堆卡片。当您需要二维控制、显式行和列或命名区域（如页眉/导航/主/页脚）时，请使用此网格生成器；这两个工具通常最终出现在同一个页面上，网格用于页面外壳，而 Flexbox 则位于其各个部分中。与该网站上的每个工具一样，它完全在您的浏览器中运行 - 无需上传，无需帐户。