CSS Subgrid嵌套卡片怎样沿用父网格的列宽怎样在批处理代码中减少额外分配

嵌套卡片沿用父网格列宽，需要卡片既是父级 grid item，又是 grid container：先用 grid-column 跨越需要共享的列，再设 grid-template-columns: subgrid。批量生成卡片时，JavaScript 只写内容，把列宽留给 CSS，可以去掉为对齐而维护的宽度数组和内联样式；Subgrid 本身不保证 JavaScript 分配减少或页面必然更快。

官方说明：https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Subgrid。以下用三个文件实现最小示例，侧重生产配置、内容输入和兼容边界，不引入无关权限配置。

1. 将卡片放进父网格的列范围

父网格定义三列轨道，卡片横跨全部列；标题字段、描述字段与数值字段分别属于卡片的三个网格项。Subgrid 共享的是卡片所跨范围的轨道，不是任意祖先的完整网格，也不是把父元素所有 CSS 属性继承下来。

/* 父级统一决定三列宽度，零最小值允许中间列收缩 */
.cards {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) max-content;
  gap: 0.75rem 1rem;
}
.card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) max-content;
  gap: 1rem;
}
.card > * { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* 支持时沿用实际父级轨道，而非独立重新计算 */
@supports (grid-template-columns: subgrid) {
  .card { grid-template-columns: subgrid; }
}
/* 窄屏明确改为单列；卡片仍占父级全部列 */
@media (max-width: 36rem) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  .card { grid-template-columns: minmax(0, 1fr); }
}

关键是卡片直接参与父网格。中间若多包一层普通容器，这个依赖会改变。样例只共享列，行仍由卡片自行布局；如果改为共享行，必须另外定义跨行范围。这里用 gap 保持字段间距，卡片未加边框或内边距，以免把盒模型偏移混入列对齐问题。

2. 让批量渲染只负责内容

把以下代码保存为 app.js，与前两个文件放在同一目录。数据数组交给渲染函数，DocumentFragment 暂存卡片节点，textContent 提供文本内容，CSS 规则负责布局。这让内容构建和布局定义各自承担一类职责。

const host = document.querySelector("#cards");
const rows = [
  { title: "日志归档", detail: "保留近期运行记录", value: "12 GB" },
  { title: "构建缓存", detail: "缓存包与依赖", value: "4 GB" }
];

function render(items) {
  // 每个批次一个片段，不创建测量列宽的中间数组
  const fragment = document.createDocumentFragment();
  for (const item of items) {
    const card = document.createElement("article");
    card.className = "card";
    const title = document.createElement("h2");
    const detail = document.createElement("p");
    const value = document.createElement("strong");
    // 纯文本进入 textContent，避免把输入解释成 HTML
    title.textContent = item.title;
    detail.textContent = item.detail;
    value.textContent = item.value;
    card.append(title, detail, value);
    fragment.append(card);
  }
  // 替换旧内容；插入后片段的子节点被移到宿主中
  host.replaceChildren(fragment);
}
render(rows);

本文没有打开浏览器执行示例。按代码语义，宽屏显示两张横跨三列的卡片，共享标题、描述与数值列；窄屏变成单列。读者应在目标浏览器观察长描述换行和数值是否溢出，不能把示意图当作实际页面截图。

这里省去的是额外测量列宽、存储每项宽度和逐项设置 style 的业务代码。实际仍会创建卡片及字段节点，片段也有自身对象成本。MDN 提醒 DocumentFragment 的性能优势常被夸大，因此使用它主要为了组织一次批次构建，不给出未经测量的提速倍数。参考：https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment。

3. 配置降级与生产边界

Subgrid 已有广泛浏览器支持，但嵌入式 WebView、旧企业浏览器仍应按项目支持矩阵处理，@supports 可给出语法能力分支。降级方案共享了固定的第一列宽度，却不保证不同卡片的 max-content 列相同；若旧环境也必须严格对齐，应重新选择明确固定列宽或合适的表格语义。

replaceChildren 会移除旧节点，旧节点上的局部交互状态、输入值和焦点可能丢失。示例是无交互数据卡片，不能直接套到表单。大列表还要考虑分页或窗口化，不能指望换一条 CSS 声明消除所有 DOM 与布局开销。

为什么写了 subgrid 仍不对齐？

先确认卡片是父网格的直接项，并跨越多列；只占一列的子网格没有凭空共享三列的范围。

Subgrid 能减少网络请求吗？

不能。它处理布局轨道关系，与数据请求策略无关。

减少分配是否一定降低耗时？

不一定。应分别观察脚本分配、样式计算、布局与绘制成本，并保留等价内容和更新频率进行比较。