UD5工具箱
专业术语表
以下是与 CSS Grid 和 Subgrid 相关的专业术语解释。
CSS Grid 是 CSS 中的二维布局系统，可以同时处理行和列的布局。它提供了强大的网格定义能力，支持固定大小、比例分配（fr 单位）和自动调整的轨道大小。Grid 布局的核心概念包括网格容器（grid container）、网格项（grid item）、网格线（grid line）和网格轨道（grid track）。Grid 布局是构建复杂网页布局的首选方案。
Subgrid 是 CSS Grid 的一个扩展特性，允许子网格容器继承父网格的轨道定义。通过设置 grid-template-columns: subgrid 或 grid-template-rows: subgrid，子网格的列宽或行高将由父网格的轨道定义决定，而不是单独定义。这确保了父网格和子网格之间的精确对齐，解决了传统嵌套网格布局中的对齐难题。
fr 是 CSS Grid 中的比例单位（fractional unit），表示可用空间的分配比例。例如，设置 grid-template-columns: 1fr 2fr 1fr 表示三列分别占总宽度的 1/4、2/4 和 1/4。fr 单位会自动计算剩余空间并按比例分配，非常适合创建灵活的响应式布局。fr 单位可以与固定值混合使用，固定值优先占用空间，剩余空间再按 fr 比例分配。
网格轨道是相邻两条网格线之间的空间，可以是行轨道或列轨道。轨道的大小可以通过 grid-template-rows 和 grid-template-columns 属性定义。轨道大小可以使用固定长度（如 px、em）、百分比、fr 单位或 auto 关键字。在 Subgrid 中，子网格的轨道定义被替换为 subgrid 关键字，表示继承父网格的轨道定义。
gap 属性用于设置网格轨道之间的间距。可以分别设置 column-gap（列间距）和 row-gap（行间距），也可以使用简写属性 gap 同时设置。gap 的值可以使用任何长度单位。在 Subgrid 中，子网格会自动继承父网格的 gap 值，确保整个布局中间距的一致性。如果需要子网格使用不同的间距，可以单独覆盖 gap 属性。
网格线是网格轨道的边界，可以是水平的行线或垂直的列线。网格线从 1 开始编号，也可以使用负数从末尾反向编号（如 -1 表示最后一条线）。网格项通过指定起始和结束网格线来定位，如 grid-column: 1 / 3 表示从第 1 条列线跨越到第 3 条列线。在 Subgrid 中，子网格的网格线编号与父网格保持一致。
嵌套网格是指在一个网格容器内部再创建另一个网格容器。传统的嵌套网格中，内部网格的轨道定义与外部网格相互独立，可能导致元素无法跨层级对齐。Subgrid 通过让内部网格继承外部网格的轨道定义来解决这个问题，实现跨层级的精确对齐。嵌套网格在构建复杂布局（如卡片列表、表单布局）时非常有用。
CSS Grid 在现代浏览器中得到了广泛支持，包括 Chrome、Firefox、Safari 和 Edge 的较新版本。Subgrid 的支持情况相对较新，Chrome 117+、Firefox 71+、Safari 16+ 已经支持 Subgrid。对于不支持 Subgrid 的浏览器，可以使用传统的嵌套网格作为降级方案，或者通过 @supports 规则提供渐进增强。