使用display: contents包裹时，CSS Grid子项错位问题求助

你的问题核心是：根CSS Grid容器下，独立元素（如<as-marks>）与带display: contents的容器的首子元素默认会分属不同行，这是因为默认Grid为单列布局，每个网格项自动占一行。以下是无需嵌套网格或subgrid的解决方案：

方案：显式定义网格轨道并指定元素位置 #

假设你的HTML结构如下：

<div class="root-grid">
  <as-marks>1</as-marks>
  <div class="content" style="display: contents;">
    <p>首子元素</p>
    <p>其他内容</p>
  </div>
</div>

1. 配置根网格的列布局
   给根网格定义至少两列，让<as-marks>和容器首子元素可并排：

.root-grid {
  display: grid;
  /* 第一列适配内容宽度，第二列占剩余空间 */
  grid-template-columns: min-content 1fr;
  gap: 10px; /* 可选，设置元素间距 */
}

2. 强制指定元素的网格位置
   让<as-marks>和容器首子元素处于同一行的不同列：

as-marks {
  grid-row: 1;
  grid-column: 1;
}

/* 选中display: contents容器的首子元素 */
.content > :first-child {
  grid-row: 1;
  grid-column: 2;
}

3. 处理容器内其他元素（可选）
   如果需要让容器内其他内容跨两列展示，添加如下样式：

.content > :not(:first-child) {
  grid-column: 1 / -1; /* 横跨所有列 */
}

这种方式完全基于现有HTML结构，无需修改Prosemirror生成的NodeViews，也不需要依赖未普及的subgrid特性。

内容的提问来源于stack exchange，提问作者Brent Parker