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

3 等列 CSS 网格布局

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

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

处理中... 0%

结果

此页面将网格生成器设置为单行中的三个等宽列，并关闭命名区域 - 布局只是重复（3, 1fr），这是表达“始终均匀分割可用宽度的三列”的最短方式。

等宽列是卡片网格、定价表和图片库的主力：没有区域需要命名，因为每列都扮演相同的角色，因此简单的轨道大小比网格模板区域声明更清晰。添加一行，相同的三个轨道在下面重复，仍然完全均匀。

增加列数以获得更密集的网格，或者如果后面的列需要从其他列中脱颖而出，则打开命名区域 - 下面的 CSS 和 HTML 会在您执行此操作时更新。一切都在客户端运行，因此无需上传任何内容，也无需等待。

🛡️
在浏览器中执行

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

接受的格式和规则

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

主要优点

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

使用案例

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