是否可以拆分先前通过合并多个单元格创建的 CSS 网格单元格？答案

【问题标题】：Is it possible to split CSS grid cell, that was created by merging multiple cells previously?是否可以拆分先前通过合并多个单元格创建的 CSS 网格单元格？
【发布时间】：2020-11-08 22:41:54
【问题描述】：

假设我有一个嵌套的 3x2 CSS 网格（class="main-grid"）（每个单元格内部包含 3x2 网格（class="item"））。然后我应用以下 CSS 样式：.main-grid :first-child {grid-column: 1/3;}This 应该合并 main-grid 的前两个单元格，并对每个 item 网格执行相同的操作。

但现在我想拆分单元格/不为一个 item is-special 网格应用 grid-column: 1/3 样式。我要拆分的单元格是红色的 (class="sub-item special")

然后我的问题是，如何拆分该单元格或不将grid-column: 1/3 样式应用于其主机item is-special 网格？（我不想在另一个类中制作它，因为所有其他格式与其他 item 网格一致很重要。我也不想在该单元格内制作另一个网格作为解决方法。我已经花了相当多的时间在互联网上寻找类似的东西但没有找到任何东西，所以在我看来grid-column: 1/3 是一个不可逆转的动作，这很奇怪，因为所有其他 css 网格参数都可以被覆盖，例如 background-color) 因此，简而言之，我正在寻找可以像这样工作的东西：.is-special {grid-column: *split*} 或 .main-grid :first-child :not(.is-special){...}

参考示例：

.main-grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border: 1px solid rgb(114, 114, 114);

}
.main-grid :first-child{
  grid-column: 1/3;
  }
.item{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid rgb(114, 114, 114);
}
.sub-item{
border: 1px solid rgb(114, 114, 114);
}
.special{
background-color: red;
/*How do I split this cell?*/
}

<body>
  <section class="main-grid">
    <div class="item">
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
    </div>
    <div class="item is-special">
      <div class="sub-item special">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
    </div>
    <div class="item">
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
    </div>
    <div class="item">
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
    </div>
    <div class="item">
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
    </div>
  </section>
</body>

【问题讨论】：

标签： html css css-selectors css-grid

【解决方案1】：

我确实尝试过运行您的代码，并且 grid-column:1/3 不适用于 class="sub-item special，它仅适用于主网格的第一个孩子。

您可以在 .item.is-special 选择器的帮助下实现您的 css。

【讨论】：

【解决方案2】：

您可以为您的案例添加更具体的选择器（请参阅 CSS 中的注释）

.main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid rgb(114, 114, 114);
}

.main-grid :first-child {
  grid-column: 1/3;
}

/* added rule to reset the above one in this special case */
.main-grid .is-special :first-child {
  grid-column: 1;
  background-color: yellow;
}

.item {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 2px solid rgb(114, 114, 114);
}

.sub-item {
  border: 1px solid rgb(114, 114, 114);
}

.special {
  background-color: red;
  /*How do I split this cell?*/
}

<body>
  <section class="main-grid">
    <div class="item">
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
    </div>
    <div class="item is-special">
      <div class="sub-item special">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
    </div>
    <div class="item">
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
    </div>
    <div class="item">
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
    </div>
    <div class="item">
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
      <div class="sub-item">some text</div>
    </div>
  </section>
</body>

【讨论】：