CSS Grid 生成器

创建网格示例

1. 设置画布尺寸、轨道、方向、间距和对齐方式。
2. 编辑项目文字与位置，调整源代码顺序或设置命名区域；先修正未完成或冲突的输入。
3. 查看预览和代码，复制 CSS 或 HTML，或下载与预览相同的完整文档。

理解布局规则

显式轨道由模板定义；自动放置或超出范围的放置可按单独的重复模式创建隐式轨道。

fr 在 Grid 算法下分配剩余空间，而不是外框的百分比。1fr 带自动最小值；minmax(0px, 1fr) 改变轨道最小值。项目最小值另行设置。

网格线、order 和 dense 可改变视觉排列，但不改变 HTML 阅读或默认焦点顺序。移动项目才改变源代码顺序。

列沿行内轴、行沿块轴；竖排时物理方向也会改变。适应只缩放固定尺寸预览，不生成断点。

示例

边框盒宽 640px、两侧边框各 1px、内边距各 16px 时，内容宽 606px。扣除两个 12px 间距和 120px 固定轨道后剩 462px；在简单假设下 1fr 与 2fr 分别得到 154px 与 308px，实际尺寸可能不同。

三列显式网格中的 -1 表示最后一条显式线，即使之后产生隐式列也不变。生成的 CSS 保留负数。

两列命名网格可以在第一行放 header，第二行放 nav 与 main，第三行放 footer。每个区域是矩形，空格用点表示。

编辑范围

每个轴支持 1–12 条显式轨道和 1–4 个隐式尺寸，项目数为 1–12。支持 minmax、网格线、跨度与命名矩形，不支持任意 CSS。

不提供 repeat、auto-fit、auto-fill、subgrid、masonry、嵌套网格或断点生成。轨道可伸缩并不保证整个网站自适应。

百分比轨道加间距可能溢出；内容、字体、自动最小值、边框和滚动条都会影响实际布局。

网格线模式允许重叠，但本编辑器拒绝相同或反向的确定线。命名区域须在显式网格内且名称唯一、互不重叠。

预览和下载使用同一完整文档及页面边距重置。将片段用于其他网站时，周围样式和浏览器字体可能不同。

本地示例

示例文字按数据转义，代码在本地生成，不上传或保存在网址及历史中。预览使用空 sandbox 和限制资源的策略；这不保证其他服务或后续修改的文件安全。