SuperAPI AI 工具集

frontend-syntax-css-grid-subgrid

前端与建站

查看项目

更新于 10-15 22:17

技能介绍

用途:定义 CSS Grid 布局面,并给出「Grid 还是 Flexbox」「subgrid 还是嵌套 grid」的判断规则。CSS Grid 自 2017 年 10 月起为 Baseline 广泛可用,subgrid 自 2023 年 9 月起为 Baseline 广泛可用。

主要能力:涵盖容器属性(display: grid、inline-grid、grid-template-columns/rows、grid-template-areas、gap、grid-auto-rows/columns、grid-auto-flow、justify/align-items)、项目属性(grid-column、grid-row、grid-area、justify/align-self)、轨道函数(repeat、auto-fill、auto-fit、minmax、fit-content、fr)、[name] 命名线与 subgrid。

使用方式:二维布局用 Grid,单轴内在尺寸用 Flexbox;内层需对齐外层网格线时用 subgrid(可仅一个轴),否则用独立嵌套 grid。命名线示例:grid-template-columns: [page-start] 1fr [content-start] minmax(0, 60ch) [content-end] 1fr [page-end],配合 grid-column: content-start / content-end。

关键限制:subgrid 精确跨越其网格区域覆盖的轨道数,行号在内重启,父级命名线自动透传,间距在 subgrid 轴上继承;被 subgrid 的轴不能生成隐式轨道,两轴均用 subgrid 且项目数超出时多余项会溢出到最后一轨道,需隐式行时应只对列轴声明 subgrid 并用 grid-auto-rows。masonry 截至 2026 年仍非 Baseline,须以 @supports (grid-template-rows: masonry) 门控并提供回退。其他未提供信息暂未提供。