无需登录 数据私有 本地保存

CSS Subgrid 布局生成器 - 可视化创建子网格

CSS 开发工具 CSS Subgrid 布局 生成器
13
0
0
0
术语解释
CSS GridCSS Grid Layout 是 CSS 中最强大的二维布局系统，能够同时处理行和列的布局。它通过定义网格容器（grid container）和网格项目（grid item），允许开发者精确控制页面元素的位置和尺寸。Grid 布局引入了网格线、网格轨道、网格单元格、网格区域等概念，为复杂布局提供了前所未有的灵活性。CSS Grid 是 Subgrid 的基础，理解 Grid 的核心概念是掌握 Subgrid 的前提条件。
Subgrid（子网格）Subgrid 是 CSS Grid Level 2 规范中引入的特性，允许子网格元素继承父网格的轨道定义。当一个网格项目自身也是网格容器时，它可以使用 subgrid 关键字来声明其网格轨道，从而复用父网格的行列大小和间距设置。Subgrid 的核心价值在于实现跨层级的完美对齐，确保嵌套网格中的内容与外部网格保持一致的节奏感。这是本工具的核心功能所围绕的技术概念。
网格轨道（Grid Track）网格轨道是相邻两条网格线之间的空间，可以理解为网格中的一行或一列。轨道的大小可以通过固定值（如 px）、比例值（如 fr）、百分比或 auto 关键字来定义。在 Subgrid 场景中，子网格的轨道大小由父网格决定，子网格本身不需要（也不应该）指定轨道尺寸。理解网格轨道的概念对于正确配置 Subgrid 参数至关重要。
网格线（Grid Line）网格线是构成网格结构的水平和垂直分割线。网格线从 1 开始编号，水平方向的线定义行的位置，垂直方向的线定义列的位置。在 Subgrid 中，子网格通过指定起始网格线和结束网格线来确定其在父网格中的位置。网格线的编号和定位是 Subgrid 布局中最重要的参数之一。
grid-template-columns该 CSS 属性用于定义网格容器中列轨道的大小和数量。在普通 Grid 中，它接受固定值、fr 单位、minmax() 函数等参数。在 Subgrid 场景下，当子网格需要继承父网格的列轨道时，该属性的值设置为 subgrid。本工具的“列 Subgrid”开关正是控制这一属性的启用与禁用。
grid-template-rows该 CSS 属性用于定义网格容器中行轨道的大小和数量。与 grid-template-columns 类似，它在 Subgrid 场景下可以设置为 subgrid 以继承父网格的行轨道定义。本工具的“行 Subgrid”开关控制这一属性。单独使用行 Subgrid 而不使用列 Subgrid，或反之，都是完全合法的用法。
fr 单位fr（fraction）是 CSS Grid 引入的比例单位，表示网格轨道中可用空间的一个份额。例如，1fr 1fr 1fr 表示将可用空间均分为三份。fr 单位在定义父网格轨道时非常常用，Subgrid 继承的正是包含 fr 单位的轨道定义。理解 fr 单位的比例分配机制有助于预测 Subgrid 中轨道的实际渲染大小。
gap（间距）gap 属性用于设置网格轨道之间的间距，可以分别指定行间距（row-gap）和列间距（column-gap）。在 Subgrid 中，子网格自动继承父网格的 gap 设置，无需（也不应该）单独指定。这意味着父网格中的间距节奏会无缝传递到子网格层级，保持整体布局的一致性和协调性。
grid-column / grid-row这两个简写属性用于指定网格项目在网格中的位置，分别控制列方向和行方向的起始和结束位置。例如，grid-column: 2 / span 3 表示从第 2 条列线开始，跨越 3 个轨道。在 Subgrid 布局中，这些属性帮助精确定位子网格在父网格中的位置，是配置子网格参数时的核心属性。
嵌套网格（Nested Grid）嵌套网格是指一个网格项目本身也是网格容器的情况。在没有 Subgrid 之前，嵌套网格会独立定义自己的轨道，与父网格完全脱节。Subgrid 的出现改变了这一局面，使得嵌套网格可以复用父网格的轨道定义。本工具通过可视化的方式清晰展示了普通嵌套网格与 Subgrid 嵌套网格之间的行为差异。
对齐（Alignment）在 CSS Grid 中，对齐涉及多个层面：网格容器级别的对齐（justify-items、align-items）、网格项目级别的对齐（justify-self、align-self）以及网格轨道级别的对齐（justify-content、align-content）。Subgrid 的核心价值之一就是让子网格中的项目能够与父网格中的其他元素保持完美对齐，实现视觉上的一致性和节奏感。
浏览器兼容性Subgrid 的浏览器支持情况是实际应用中需要重点关注的问题。截至 2024 年，Chrome 117+、Firefox 71+ 和 Safari 16+ 均已支持 Subgrid。对于不支持的浏览器，需要准备降级方案（fallback），通常使用固定轨道大小来近似 Subgrid 的效果。本工具内置的 FAQ 模块包含了详细的兼容性信息，帮助开发者做出合理的技术决策。
🔧 相关工具