⭐ 0
🔍
文字 图片 PDF 和文档 音频 音乐 电子电路 时间 公用事业 验证者 玄学 游戏

侧边栏 + 内容 CSS 网格布局

直观地设计 CSS 网格布局：设置列、行和间隙，然后在单元格中输入区域名称以构建网格模板区域 - 具有实时预览和可复制的 CSS 和 HTML。

在下面的任意单元格中输入名称；具有相同名称的单元格合并到一个 grid-template-areas 区域中。

处理中... 0%

结果

此页面打开网格生成器，其中包含已命名的两列单行布局：一个 200 像素的侧边栏列，旁边是一个占用剩余空间的灵活内容列。这两个区域都可以在实时预览中立即看到，并带有颜色和标签，因此分割一目了然。

这是网络上最常见的导航加内容形状——设置页面、文档站点和管理仪表板都依赖于流动主区域旁边的固定宽度导轨。由于侧边栏列使用像素值，而内容列使用 1fr，因此侧边栏保持恒定宽度，而内容列吸收视口的每个额外像素。

重命名任一区域、更改列宽或为拆分上方的标题添加更多行 - 下面的 CSS 和 HTML 输出实时跟踪每个编辑。该工具是免费的，并且完全在您的浏览器中运行，无需上传，也无需帐户。

🛡️
在浏览器中执行

您的文件和输入永远不会离开此设备。处理完全离线运行。 100% 安全。

接受的格式和规则

  • 1-6 列和行的数字输入，以及单独的列间隙和行间隙控件，这些控件在匹配时合并为一个间隙值。
  • 命名区域模式：直接在实时网格的任何单元格中键入区域名称；该工具构建有效的 grid-template-areas 字符串，并在名称未形成干净的矩形时发出警告。
  • 可复制的 CSS 块（显示：网格、网格模板列/行、间隙、网格模板区域）加上匹配的 HTML 骨架，每个命名区域有一个网格区域 div。

主要优点

✓ 直接在任何单元格中输入名称，匹配的名称会合并到一个网格模板区域区域中 - 无需拖动选择，无需手动猜测带引号的字符串语法。
✓ 实时预览网格会根据每次更改调整大小和重新着色，因此您可以在复制一行 CSS 之前看到准确的列和行轨道以及每个命名区域。
✓ 经典的圣杯布局和狭窄的侧边栏等预设为您提供了一个真正的、有效的网格模板区域声明，而不是空白网格。

使用案例

  • • 通过键入区域名称而不是手写网格模板区域，构建经典的圣杯页面外壳 - 带导航/主/旁路中间行的全角页眉和页脚。
  • • 在灵活的内容列旁边布置一个带有固定宽度侧边栏的设置页面或管理仪表板，并在实时预览看起来正确后复制准确的 CSS 和 HTML。
  • • 在发货前检查一组命名区域是否确实形成有效的矩形 - 该工具会标记会破坏浏览器中的网格模板区域的确切名称。