@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/grid.css

@@ -0,0 +1,1201 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 grid 样式。 */
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-grid {
+    --xh-grid-skin: 1;
+  }
+
+  .xh-scope-grid[data-part='root'] {
+    display: grid;
+    /* 各列等宽；下限写 0 而不是 auto，一段长文本才不会把自己那列撑宽 */
+    /* 使用者槽位排在档位之前，写死一份轨道表即盖过所有列数档 */
+    grid-template-columns: var(--xh-grid-columns, repeat(var(--xh-_grid-cols), minmax(0, 1fr)));
+    /* 不写 gap 档位就不留间距 */
+    gap: var(--xh-grid-gap, var(--xh-space-0));
+    /* 列数、行数与自适应列宽下限都收在根上这几个槽位里，换档只改这里；
+       每一层都声明一遍，嵌套时内层不吃外层的值 */
+    --xh-_grid-cols: 1;
+    --xh-_grid-rows: 1;
+    --xh-_grid-col-min: var(--xh-layout-col-min-md);
+  }
+
+  /* —— 列数 —— */
+  /* 一列是上面的缺省，这里从两列起逐档写 */
+  .xh-scope-grid[data-part='root'][data-cols='2'] {
+    --xh-_grid-cols: 2;
+  }
+
+  .xh-scope-grid[data-part='root'][data-cols='3'] {
+    --xh-_grid-cols: 3;
+  }
+
+  .xh-scope-grid[data-part='root'][data-cols='4'] {
+    --xh-_grid-cols: 4;
+  }
+
+  .xh-scope-grid[data-part='root'][data-cols='5'] {
+    --xh-_grid-cols: 5;
+  }
+
+  .xh-scope-grid[data-part='root'][data-cols='6'] {
+    --xh-_grid-cols: 6;
+  }
+
+  .xh-scope-grid[data-part='root'][data-cols='7'] {
+    --xh-_grid-cols: 7;
+  }
+
+  .xh-scope-grid[data-part='root'][data-cols='8'] {
+    --xh-_grid-cols: 8;
+  }
+
+  .xh-scope-grid[data-part='root'][data-cols='9'] {
+    --xh-_grid-cols: 9;
+  }
+
+  .xh-scope-grid[data-part='root'][data-cols='10'] {
+    --xh-_grid-cols: 10;
+  }
+
+  .xh-scope-grid[data-part='root'][data-cols='11'] {
+    --xh-_grid-cols: 11;
+  }
+
+  .xh-scope-grid[data-part='root'][data-cols='12'] {
+    --xh-_grid-cols: 12;
+  }
+
+  /* —— 逐档列数 —— */
+  /* 移动优先：先按 data-cols 排定，视口每宽到一档就换成那一档的列数，没写的档沿用比它窄的那一档。
+     四档自窄到宽依次写，只用 min-width：媒体查询不改选择器权重，宽视口上同时命中好几档时由源码序决定谁生效。
+     宽度写字面量：自定义属性在 @media 条件里不参与求值，令牌变量写在这里等于没写条件。
+     每档都从一列写起：base 分多列、某一档收回一列同样是合法的一档。 */
+  @media (min-width: 640px) {
+    .xh-scope-grid[data-part='root'][data-cols-sm='1'] {
+      --xh-_grid-cols: 1;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-sm='2'] {
+      --xh-_grid-cols: 2;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-sm='3'] {
+      --xh-_grid-cols: 3;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-sm='4'] {
+      --xh-_grid-cols: 4;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-sm='5'] {
+      --xh-_grid-cols: 5;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-sm='6'] {
+      --xh-_grid-cols: 6;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-sm='7'] {
+      --xh-_grid-cols: 7;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-sm='8'] {
+      --xh-_grid-cols: 8;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-sm='9'] {
+      --xh-_grid-cols: 9;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-sm='10'] {
+      --xh-_grid-cols: 10;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-sm='11'] {
+      --xh-_grid-cols: 11;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-sm='12'] {
+      --xh-_grid-cols: 12;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .xh-scope-grid[data-part='root'][data-cols-md='1'] {
+      --xh-_grid-cols: 1;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-md='2'] {
+      --xh-_grid-cols: 2;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-md='3'] {
+      --xh-_grid-cols: 3;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-md='4'] {
+      --xh-_grid-cols: 4;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-md='5'] {
+      --xh-_grid-cols: 5;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-md='6'] {
+      --xh-_grid-cols: 6;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-md='7'] {
+      --xh-_grid-cols: 7;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-md='8'] {
+      --xh-_grid-cols: 8;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-md='9'] {
+      --xh-_grid-cols: 9;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-md='10'] {
+      --xh-_grid-cols: 10;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-md='11'] {
+      --xh-_grid-cols: 11;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-md='12'] {
+      --xh-_grid-cols: 12;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .xh-scope-grid[data-part='root'][data-cols-lg='1'] {
+      --xh-_grid-cols: 1;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-lg='2'] {
+      --xh-_grid-cols: 2;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-lg='3'] {
+      --xh-_grid-cols: 3;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-lg='4'] {
+      --xh-_grid-cols: 4;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-lg='5'] {
+      --xh-_grid-cols: 5;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-lg='6'] {
+      --xh-_grid-cols: 6;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-lg='7'] {
+      --xh-_grid-cols: 7;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-lg='8'] {
+      --xh-_grid-cols: 8;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-lg='9'] {
+      --xh-_grid-cols: 9;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-lg='10'] {
+      --xh-_grid-cols: 10;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-lg='11'] {
+      --xh-_grid-cols: 11;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-lg='12'] {
+      --xh-_grid-cols: 12;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .xh-scope-grid[data-part='root'][data-cols-xl='1'] {
+      --xh-_grid-cols: 1;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-xl='2'] {
+      --xh-_grid-cols: 2;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-xl='3'] {
+      --xh-_grid-cols: 3;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-xl='4'] {
+      --xh-_grid-cols: 4;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-xl='5'] {
+      --xh-_grid-cols: 5;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-xl='6'] {
+      --xh-_grid-cols: 6;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-xl='7'] {
+      --xh-_grid-cols: 7;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-xl='8'] {
+      --xh-_grid-cols: 8;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-xl='9'] {
+      --xh-_grid-cols: 9;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-xl='10'] {
+      --xh-_grid-cols: 10;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-xl='11'] {
+      --xh-_grid-cols: 11;
+    }
+
+    .xh-scope-grid[data-part='root'][data-cols-xl='12'] {
+      --xh-_grid-cols: 12;
+    }
+  }
+
+  /* —— 行数 —— */
+  /* 不写 data-rows 就不声明行轨道：行数由内容自己撑出来，这是缺省。
+     写了就把这几行排成显式轨道，超出的项落进隐式行。
+     使用者槽位排在档位之前，写死一份轨道表即盖过所有行数档 */
+  .xh-scope-grid[data-part='root'][data-rows] {
+    grid-template-rows: var(--xh-grid-rows, repeat(var(--xh-_grid-rows), minmax(0, auto)));
+  }
+
+  .xh-scope-grid[data-part='root'][data-rows='2'] {
+    --xh-_grid-rows: 2;
+  }
+
+  .xh-scope-grid[data-part='root'][data-rows='3'] {
+    --xh-_grid-rows: 3;
+  }
+
+  .xh-scope-grid[data-part='root'][data-rows='4'] {
+    --xh-_grid-rows: 4;
+  }
+
+  .xh-scope-grid[data-part='root'][data-rows='5'] {
+    --xh-_grid-rows: 5;
+  }
+
+  .xh-scope-grid[data-part='root'][data-rows='6'] {
+    --xh-_grid-rows: 6;
+  }
+
+  .xh-scope-grid[data-part='root'][data-rows='7'] {
+    --xh-_grid-rows: 7;
+  }
+
+  .xh-scope-grid[data-part='root'][data-rows='8'] {
+    --xh-_grid-rows: 8;
+  }
+
+  .xh-scope-grid[data-part='root'][data-rows='9'] {
+    --xh-_grid-rows: 9;
+  }
+
+  .xh-scope-grid[data-part='root'][data-rows='10'] {
+    --xh-_grid-rows: 10;
+  }
+
+  .xh-scope-grid[data-part='root'][data-rows='11'] {
+    --xh-_grid-rows: 11;
+  }
+
+  .xh-scope-grid[data-part='root'][data-rows='12'] {
+    --xh-_grid-rows: 12;
+  }
+
+  /* —— 自适应列宽 —— */
+  /* 写了下限就按「放得下几列就几列」排，data-cols 那条轨道表让位；
+     下限只收档位名，四档各指一个令牌 */
+  .xh-scope-grid[data-part='root'][data-min-col] {
+    grid-template-columns: var(--xh-grid-columns, repeat(auto-fill, minmax(var(--xh-_grid-col-min), 1fr)));
+  }
+
+  .xh-scope-grid[data-part='root'][data-min-col='xs'] {
+    --xh-_grid-col-min: var(--xh-layout-col-min-xs);
+  }
+
+  .xh-scope-grid[data-part='root'][data-min-col='sm'] {
+    --xh-_grid-col-min: var(--xh-layout-col-min-sm);
+  }
+
+  .xh-scope-grid[data-part='root'][data-min-col='md'] {
+    --xh-_grid-col-min: var(--xh-layout-col-min-md);
+  }
+
+  .xh-scope-grid[data-part='root'][data-min-col='lg'] {
+    --xh-_grid-col-min: var(--xh-layout-col-min-lg);
+  }
+
+  /* —— 间距档位 —— */
+  /* 每一档指向一个间距令牌，行与行之间也吃这同一份间距 */
+  .xh-scope-grid[data-part='root'][data-gap='xs'] {
+    gap: var(--xh-grid-gap, var(--xh-layout-gap-xs));
+  }
+
+  .xh-scope-grid[data-part='root'][data-gap='sm'] {
+    gap: var(--xh-grid-gap, var(--xh-layout-gap-sm));
+  }
+
+  .xh-scope-grid[data-part='root'][data-gap='md'] {
+    gap: var(--xh-grid-gap, var(--xh-layout-gap-md));
+  }
+
+  .xh-scope-grid[data-part='root'][data-gap='lg'] {
+    gap: var(--xh-grid-gap, var(--xh-layout-gap-lg));
+  }
+
+  .xh-scope-grid[data-part='root'][data-gap='xl'] {
+    gap: var(--xh-grid-gap, var(--xh-layout-gap-xl));
+  }
+
+  /* —— 行间距与列间距 —— */
+  /* 只改一条轴上的间距，另一条仍跟着 gap 走。两组规则与 gap 档位同权重，
+     靠源码序排在它之后取胜；根规则那条 gap 权重更低，恒盖得住 */
+
+  .xh-scope-grid[data-part='root'][data-row-gap='xs'] {
+    row-gap: var(--xh-grid-row-gap, var(--xh-layout-gap-xs));
+  }
+
+  .xh-scope-grid[data-part='root'][data-row-gap='sm'] {
+    row-gap: var(--xh-grid-row-gap, var(--xh-layout-gap-sm));
+  }
+
+  .xh-scope-grid[data-part='root'][data-row-gap='md'] {
+    row-gap: var(--xh-grid-row-gap, var(--xh-layout-gap-md));
+  }
+
+  .xh-scope-grid[data-part='root'][data-row-gap='lg'] {
+    row-gap: var(--xh-grid-row-gap, var(--xh-layout-gap-lg));
+  }
+
+  .xh-scope-grid[data-part='root'][data-row-gap='xl'] {
+    row-gap: var(--xh-grid-row-gap, var(--xh-layout-gap-xl));
+  }
+
+  .xh-scope-grid[data-part='root'][data-column-gap='xs'] {
+    column-gap: var(--xh-grid-column-gap, var(--xh-layout-gap-xs));
+  }
+
+  .xh-scope-grid[data-part='root'][data-column-gap='sm'] {
+    column-gap: var(--xh-grid-column-gap, var(--xh-layout-gap-sm));
+  }
+
+  .xh-scope-grid[data-part='root'][data-column-gap='md'] {
+    column-gap: var(--xh-grid-column-gap, var(--xh-layout-gap-md));
+  }
+
+  .xh-scope-grid[data-part='root'][data-column-gap='lg'] {
+    column-gap: var(--xh-grid-column-gap, var(--xh-layout-gap-lg));
+  }
+
+  .xh-scope-grid[data-part='root'][data-column-gap='xl'] {
+    column-gap: var(--xh-grid-column-gap, var(--xh-layout-gap-xl));
+  }
+
+  /* —— 块向对齐 —— */
+  /* 管的是每一项在自己那格里怎么摆，不是格子在容器里怎么摆：列宽由轨道表定死，容器不留富余 */
+  .xh-scope-grid[data-part='root'][data-align='start'] {
+    align-items: start;
+  }
+
+  .xh-scope-grid[data-part='root'][data-align='center'] {
+    align-items: center;
+  }
+
+  .xh-scope-grid[data-part='root'][data-align='end'] {
+    align-items: end;
+  }
+
+  .xh-scope-grid[data-part='root'][data-align='stretch'] {
+    align-items: stretch;
+  }
+
+  .xh-scope-grid[data-part='root'][data-align='baseline'] {
+    align-items: baseline;
+  }
+
+  /* —— 行内对齐 —— */
+  .xh-scope-grid[data-part='root'][data-justify-items='start'] {
+    justify-items: start;
+  }
+
+  .xh-scope-grid[data-part='root'][data-justify-items='center'] {
+    justify-items: center;
+  }
+
+  .xh-scope-grid[data-part='root'][data-justify-items='end'] {
+    justify-items: end;
+  }
+
+  .xh-scope-grid[data-part='root'][data-justify-items='stretch'] {
+    justify-items: stretch;
+  }
+
+  /* —— 格子 —— */
+  .xh-scope-grid[data-part='item'] {
+    grid-column-start: var(--xh-_grid-start);
+    grid-column-end: span var(--xh-_grid-span);
+    grid-row-end: span var(--xh-_grid-row-span);
+
+    /* 三个槽位在每一格上都声明一遍，嵌套时内层的格子不吃外层那一格的值 */
+    --xh-_grid-span: 1;
+    --xh-_grid-start: auto;
+    --xh-_grid-row-span: 1;
+  }
+
+  /* —— 跨列 —— */
+  /* 占一列是上面的缺省，这里从跨两列起逐档写 */
+  .xh-scope-grid[data-part='item'][data-span='2'] {
+    --xh-_grid-span: 2;
+  }
+
+  .xh-scope-grid[data-part='item'][data-span='3'] {
+    --xh-_grid-span: 3;
+  }
+
+  .xh-scope-grid[data-part='item'][data-span='4'] {
+    --xh-_grid-span: 4;
+  }
+
+  .xh-scope-grid[data-part='item'][data-span='5'] {
+    --xh-_grid-span: 5;
+  }
+
+  .xh-scope-grid[data-part='item'][data-span='6'] {
+    --xh-_grid-span: 6;
+  }
+
+  .xh-scope-grid[data-part='item'][data-span='7'] {
+    --xh-_grid-span: 7;
+  }
+
+  .xh-scope-grid[data-part='item'][data-span='8'] {
+    --xh-_grid-span: 8;
+  }
+
+  .xh-scope-grid[data-part='item'][data-span='9'] {
+    --xh-_grid-span: 9;
+  }
+
+  .xh-scope-grid[data-part='item'][data-span='10'] {
+    --xh-_grid-span: 10;
+  }
+
+  .xh-scope-grid[data-part='item'][data-span='11'] {
+    --xh-_grid-span: 11;
+  }
+
+  .xh-scope-grid[data-part='item'][data-span='12'] {
+    --xh-_grid-span: 12;
+  }
+
+  /* —— 错列 —— */
+  /* 错 N 列 = 改从第 N+1 条列线起排，前面那 N 列空着。
+     列线跟着书写方向走，RTL 下自动从另一头数。
+     错的是列线不是「相对上一格再往后几格」：同一行里前面已经排到更后面时，这一格落到下一行的那条列线上。 */
+  .xh-scope-grid[data-part='item'][data-offset='1'] {
+    --xh-_grid-start: 2;
+  }
+
+  .xh-scope-grid[data-part='item'][data-offset='2'] {
+    --xh-_grid-start: 3;
+  }
+
+  .xh-scope-grid[data-part='item'][data-offset='3'] {
+    --xh-_grid-start: 4;
+  }
+
+  .xh-scope-grid[data-part='item'][data-offset='4'] {
+    --xh-_grid-start: 5;
+  }
+
+  .xh-scope-grid[data-part='item'][data-offset='5'] {
+    --xh-_grid-start: 6;
+  }
+
+  .xh-scope-grid[data-part='item'][data-offset='6'] {
+    --xh-_grid-start: 7;
+  }
+
+  .xh-scope-grid[data-part='item'][data-offset='7'] {
+    --xh-_grid-start: 8;
+  }
+
+  .xh-scope-grid[data-part='item'][data-offset='8'] {
+    --xh-_grid-start: 9;
+  }
+
+  .xh-scope-grid[data-part='item'][data-offset='9'] {
+    --xh-_grid-start: 10;
+  }
+
+  .xh-scope-grid[data-part='item'][data-offset='10'] {
+    --xh-_grid-start: 11;
+  }
+
+  .xh-scope-grid[data-part='item'][data-offset='11'] {
+    --xh-_grid-start: 12;
+  }
+
+  /* —— 逐档跨列与错列 —— */
+  /* 与逐档列数逐字同构：移动优先，先按 data-span / data-offset 排定，
+     视口每宽到一档就换成那一档的值，没写的档沿用比它窄的那一档。
+     每档都从 1 写起：base 跨多列、某一档收回一列同样是合法的一档。
+     宽度写字面量，理由同上面的逐档列数 */
+
+  @media (min-width: 640px) {
+    .xh-scope-grid[data-part='item'][data-span-sm='1'] {
+      --xh-_grid-span: 1;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-sm='2'] {
+      --xh-_grid-span: 2;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-sm='3'] {
+      --xh-_grid-span: 3;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-sm='4'] {
+      --xh-_grid-span: 4;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-sm='5'] {
+      --xh-_grid-span: 5;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-sm='6'] {
+      --xh-_grid-span: 6;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-sm='7'] {
+      --xh-_grid-span: 7;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-sm='8'] {
+      --xh-_grid-span: 8;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-sm='9'] {
+      --xh-_grid-span: 9;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-sm='10'] {
+      --xh-_grid-span: 10;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-sm='11'] {
+      --xh-_grid-span: 11;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-sm='12'] {
+      --xh-_grid-span: 12;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-sm='1'] {
+      --xh-_grid-start: 2;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-sm='2'] {
+      --xh-_grid-start: 3;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-sm='3'] {
+      --xh-_grid-start: 4;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-sm='4'] {
+      --xh-_grid-start: 5;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-sm='5'] {
+      --xh-_grid-start: 6;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-sm='6'] {
+      --xh-_grid-start: 7;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-sm='7'] {
+      --xh-_grid-start: 8;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-sm='8'] {
+      --xh-_grid-start: 9;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-sm='9'] {
+      --xh-_grid-start: 10;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-sm='10'] {
+      --xh-_grid-start: 11;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-sm='11'] {
+      --xh-_grid-start: 12;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .xh-scope-grid[data-part='item'][data-span-md='1'] {
+      --xh-_grid-span: 1;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-md='2'] {
+      --xh-_grid-span: 2;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-md='3'] {
+      --xh-_grid-span: 3;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-md='4'] {
+      --xh-_grid-span: 4;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-md='5'] {
+      --xh-_grid-span: 5;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-md='6'] {
+      --xh-_grid-span: 6;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-md='7'] {
+      --xh-_grid-span: 7;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-md='8'] {
+      --xh-_grid-span: 8;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-md='9'] {
+      --xh-_grid-span: 9;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-md='10'] {
+      --xh-_grid-span: 10;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-md='11'] {
+      --xh-_grid-span: 11;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-md='12'] {
+      --xh-_grid-span: 12;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-md='1'] {
+      --xh-_grid-start: 2;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-md='2'] {
+      --xh-_grid-start: 3;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-md='3'] {
+      --xh-_grid-start: 4;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-md='4'] {
+      --xh-_grid-start: 5;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-md='5'] {
+      --xh-_grid-start: 6;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-md='6'] {
+      --xh-_grid-start: 7;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-md='7'] {
+      --xh-_grid-start: 8;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-md='8'] {
+      --xh-_grid-start: 9;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-md='9'] {
+      --xh-_grid-start: 10;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-md='10'] {
+      --xh-_grid-start: 11;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-md='11'] {
+      --xh-_grid-start: 12;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .xh-scope-grid[data-part='item'][data-span-lg='1'] {
+      --xh-_grid-span: 1;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-lg='2'] {
+      --xh-_grid-span: 2;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-lg='3'] {
+      --xh-_grid-span: 3;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-lg='4'] {
+      --xh-_grid-span: 4;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-lg='5'] {
+      --xh-_grid-span: 5;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-lg='6'] {
+      --xh-_grid-span: 6;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-lg='7'] {
+      --xh-_grid-span: 7;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-lg='8'] {
+      --xh-_grid-span: 8;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-lg='9'] {
+      --xh-_grid-span: 9;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-lg='10'] {
+      --xh-_grid-span: 10;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-lg='11'] {
+      --xh-_grid-span: 11;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-lg='12'] {
+      --xh-_grid-span: 12;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-lg='1'] {
+      --xh-_grid-start: 2;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-lg='2'] {
+      --xh-_grid-start: 3;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-lg='3'] {
+      --xh-_grid-start: 4;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-lg='4'] {
+      --xh-_grid-start: 5;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-lg='5'] {
+      --xh-_grid-start: 6;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-lg='6'] {
+      --xh-_grid-start: 7;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-lg='7'] {
+      --xh-_grid-start: 8;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-lg='8'] {
+      --xh-_grid-start: 9;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-lg='9'] {
+      --xh-_grid-start: 10;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-lg='10'] {
+      --xh-_grid-start: 11;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-lg='11'] {
+      --xh-_grid-start: 12;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .xh-scope-grid[data-part='item'][data-span-xl='1'] {
+      --xh-_grid-span: 1;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-xl='2'] {
+      --xh-_grid-span: 2;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-xl='3'] {
+      --xh-_grid-span: 3;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-xl='4'] {
+      --xh-_grid-span: 4;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-xl='5'] {
+      --xh-_grid-span: 5;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-xl='6'] {
+      --xh-_grid-span: 6;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-xl='7'] {
+      --xh-_grid-span: 7;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-xl='8'] {
+      --xh-_grid-span: 8;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-xl='9'] {
+      --xh-_grid-span: 9;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-xl='10'] {
+      --xh-_grid-span: 10;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-xl='11'] {
+      --xh-_grid-span: 11;
+    }
+
+    .xh-scope-grid[data-part='item'][data-span-xl='12'] {
+      --xh-_grid-span: 12;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-xl='1'] {
+      --xh-_grid-start: 2;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-xl='2'] {
+      --xh-_grid-start: 3;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-xl='3'] {
+      --xh-_grid-start: 4;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-xl='4'] {
+      --xh-_grid-start: 5;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-xl='5'] {
+      --xh-_grid-start: 6;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-xl='6'] {
+      --xh-_grid-start: 7;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-xl='7'] {
+      --xh-_grid-start: 8;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-xl='8'] {
+      --xh-_grid-start: 9;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-xl='9'] {
+      --xh-_grid-start: 10;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-xl='10'] {
+      --xh-_grid-start: 11;
+    }
+
+    .xh-scope-grid[data-part='item'][data-offset-xl='11'] {
+      --xh-_grid-start: 12;
+    }
+  }
+
+  /* —— 跨行 —— */
+  /* 占一行是格子上的缺省，这里从跨两行起逐值写。行高由内容撑出时跨几行就占几条行轨道，
+     同一行里其余的格子按各自内容排，不被拉成同高 */
+  .xh-scope-grid[data-part='item'][data-row-span='2'] {
+    --xh-_grid-row-span: 2;
+  }
+
+  .xh-scope-grid[data-part='item'][data-row-span='3'] {
+    --xh-_grid-row-span: 3;
+  }
+
+  .xh-scope-grid[data-part='item'][data-row-span='4'] {
+    --xh-_grid-row-span: 4;
+  }
+
+  .xh-scope-grid[data-part='item'][data-row-span='5'] {
+    --xh-_grid-row-span: 5;
+  }
+
+  .xh-scope-grid[data-part='item'][data-row-span='6'] {
+    --xh-_grid-row-span: 6;
+  }
+
+  .xh-scope-grid[data-part='item'][data-row-span='7'] {
+    --xh-_grid-row-span: 7;
+  }
+
+  .xh-scope-grid[data-part='item'][data-row-span='8'] {
+    --xh-_grid-row-span: 8;
+  }
+
+  .xh-scope-grid[data-part='item'][data-row-span='9'] {
+    --xh-_grid-row-span: 9;
+  }
+
+  .xh-scope-grid[data-part='item'][data-row-span='10'] {
+    --xh-_grid-row-span: 10;
+  }
+
+  .xh-scope-grid[data-part='item'][data-row-span='11'] {
+    --xh-_grid-row-span: 11;
+  }
+
+  .xh-scope-grid[data-part='item'][data-row-span='12'] {
+    --xh-_grid-row-span: 12;
+  }
+
+  /* —— 逐档跨行 —— */
+  /* 与逐档跨列逐字同构：移动优先，没写的档沿用比它窄的那一档；每档都从 1 写起，某一档收回一行同样合法 */
+  @media (min-width: 640px) {
+    .xh-scope-grid[data-part='item'][data-row-span-sm='1'] {
+      --xh-_grid-row-span: 1;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-sm='2'] {
+      --xh-_grid-row-span: 2;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-sm='3'] {
+      --xh-_grid-row-span: 3;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-sm='4'] {
+      --xh-_grid-row-span: 4;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-sm='5'] {
+      --xh-_grid-row-span: 5;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-sm='6'] {
+      --xh-_grid-row-span: 6;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-sm='7'] {
+      --xh-_grid-row-span: 7;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-sm='8'] {
+      --xh-_grid-row-span: 8;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-sm='9'] {
+      --xh-_grid-row-span: 9;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-sm='10'] {
+      --xh-_grid-row-span: 10;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-sm='11'] {
+      --xh-_grid-row-span: 11;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-sm='12'] {
+      --xh-_grid-row-span: 12;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .xh-scope-grid[data-part='item'][data-row-span-md='1'] {
+      --xh-_grid-row-span: 1;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-md='2'] {
+      --xh-_grid-row-span: 2;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-md='3'] {
+      --xh-_grid-row-span: 3;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-md='4'] {
+      --xh-_grid-row-span: 4;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-md='5'] {
+      --xh-_grid-row-span: 5;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-md='6'] {
+      --xh-_grid-row-span: 6;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-md='7'] {
+      --xh-_grid-row-span: 7;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-md='8'] {
+      --xh-_grid-row-span: 8;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-md='9'] {
+      --xh-_grid-row-span: 9;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-md='10'] {
+      --xh-_grid-row-span: 10;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-md='11'] {
+      --xh-_grid-row-span: 11;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-md='12'] {
+      --xh-_grid-row-span: 12;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .xh-scope-grid[data-part='item'][data-row-span-lg='1'] {
+      --xh-_grid-row-span: 1;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-lg='2'] {
+      --xh-_grid-row-span: 2;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-lg='3'] {
+      --xh-_grid-row-span: 3;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-lg='4'] {
+      --xh-_grid-row-span: 4;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-lg='5'] {
+      --xh-_grid-row-span: 5;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-lg='6'] {
+      --xh-_grid-row-span: 6;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-lg='7'] {
+      --xh-_grid-row-span: 7;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-lg='8'] {
+      --xh-_grid-row-span: 8;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-lg='9'] {
+      --xh-_grid-row-span: 9;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-lg='10'] {
+      --xh-_grid-row-span: 10;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-lg='11'] {
+      --xh-_grid-row-span: 11;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-lg='12'] {
+      --xh-_grid-row-span: 12;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .xh-scope-grid[data-part='item'][data-row-span-xl='1'] {
+      --xh-_grid-row-span: 1;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-xl='2'] {
+      --xh-_grid-row-span: 2;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-xl='3'] {
+      --xh-_grid-row-span: 3;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-xl='4'] {
+      --xh-_grid-row-span: 4;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-xl='5'] {
+      --xh-_grid-row-span: 5;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-xl='6'] {
+      --xh-_grid-row-span: 6;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-xl='7'] {
+      --xh-_grid-row-span: 7;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-xl='8'] {
+      --xh-_grid-row-span: 8;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-xl='9'] {
+      --xh-_grid-row-span: 9;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-xl='10'] {
+      --xh-_grid-row-span: 10;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-xl='11'] {
+      --xh-_grid-row-span: 11;
+    }
+
+    .xh-scope-grid[data-part='item'][data-row-span-xl='12'] {
+      --xh-_grid-row-span: 12;
+    }
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  .xh-scope-grid[data-part='root'][hidden] {
+    display: none;
+  }
+}