Css 带有展开项的不规则网格

我有一个网格，其中每个奇数行包含不同数量的项，而偶数行则包含不同数量的项。比如4/3/4/3等等

我已经成功地用下一个代码实现了这一点：

  .grid-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-auto-rows: 0;
  grid-column-gap: 20px;
  grid-row-gap: 40px;
}

.grid-item {
  grid-column: span 3;
}

.grid-item:nth-child(7n), .grid-item:nth-child(7n-1), .grid-item:nth-child(7n-2) {
  grid-column: span 4;
}

这很好，并创建了不规则的网格，但我的问题开始于我尝试进一步： 我在后端面板中添加了一个字段，您可以在其中选择网格项是否展开并占用两个项的空间：

.grid-item.expanded {
      grid-column: span 6;
}

可以肯定的是，由于我通过调用第n个子项来生成这个合成，网格会变得混乱；因此，当一个项目被扩展时，CSS会继续使用相同的标准，网格也会被更改

有没有办法做到这一点？ 最好以每一行为目标生成布局，而不使用“第n个子”计数

我希望足够清楚。

---

提前谢谢

如果您愿意使用flexbox

正文*{
边框：1px实心；
}
[ctr]{
显示器：flex；
柔性包装：包装；
}
[ctr]>部门{
保证金：5px；
弹性：10 calc（100%/4）；
高度：100px；
}
[ctr]>分区：第n个最后一个孩子（7n），
[ctr]>分区：第n个最后一个孩子（7n-1），
[ctr]>分区：第n个最后一个孩子（7n-2）{
弹性：10 calc（100%/3）；
}
/*扩大*/
[ctr]>分区：第n个孩子（6）{
弹性：10 calc（100%/1.5）；
}
[ctr]>分区：第n个孩子（9）{
弹性：10 calc（100%/1.5）；
}

谢谢您的帮助。但恐怕我也有同样的问题。我没有特别告诉那些扩展项出现在哪里，客户机将使用面板。所以N个孩子调用项目一直是个问题。@Anta Hum…我不太明白你的意思，所以我不能提出任何建议，问题是网格在扩展一个单元格后被扭曲，这就是为什么我的答案是正确的。如果你能进一步解释你的意思的话，我基本上是通过用'nth child'调用元素来创建这个不规则的网格（就像你一样）。当我也展开一列时，这个标准会变得混乱，因为“第n个子项”的计算不再有意义——即一个展开的列占用两个正常列的空间，因此如果展开7n-2，7n应该不再使用100%/3。