Html 忽略显示：栅格中栅格单元周围的div

我有一个3个子网格布局，每个子网格跨越12列中的4列，以创建水平3列布局。这里可以看到一个简化的示例：

网格元素1
网格元素2
网格元素3

我的CMS将每个子对象包装在一个div中，这会导致网格布局渲染不正确。这可以在这里看到，由类为“notworking”的div演示：

网格元素1
网格元素1
网格元素1

根据编辑器的设置，每行的列数可以跨越1到4个元素。因此，不可能简单地通过给div“notworking”网格列end:4来解决这个问题

无法移除CMS中包裹每个孩子的div

是否有一个纯粹的CSS解决方案，它只会忽略div“notworking”，而不管子元素跨越多少列

.grid {display: flex;}
.not-working {flex-grow: 1; width: 10%;}

---

您的div现在应该均匀地填充网格。

将样式更改为。不工作，即

.not-working {
    width: auto;
    grid-column-end: span 4;
}

---

实际上。。。您所需要的只是

显示：内容

您只需在CSS中添加以下内容：

.not-working {
  display: contents;
}

另见：

---

请注意，它只在Firefox中运行良好，所以在使用它之前，您可能希望在各种浏览器中测试它。您的内容可能存在一些可访问性问题。另请参见：。

你好，Carele，谢谢你的建议。它适用于场景，但我意识到我忘记添加

flex-flow:row-wrap到包装器，这使得
显示：flex
渲染不正确。我已经更新了问题以反映这一变化。@AndreasChristiansen尝试添加flex grow:1；去你的潜水艇！这在小提琴的例子中似乎不起作用：然后你可以在你的div中加上“width:10%”。它最多可工作10个分区/行。原始大小将为10%，flex grow将告诉他们尽可能多地增长，而不超过屏幕的最大大小或相互堆叠。这对你的小提琴很管用，没问题。这很难做到正确，因为这是一种相当粗糙的方法。不过，为了提高效率，我更倾向于使用js/jquery解决方案。感谢您的建议，omukiguy，但该解决方案仅适用于每行3个元素，并且不能扩展到4个或更多元素。@andreas christiansen，除非我没有很好地回答您的问题。签出您的解决方案每行可显示3个元素，但不能每行显示4个或更多元素。我一直在寻找一个通用的解决方案，在这个解决方案中，CSS可以在非工作元素上保持不变，并且由它的子元素（网格单元）定义每行的元素数。您可以使用Jquery/JS交换类。然后删除原始HTML中的网格单元类<代码>$（“#gridID”）.attr（'not-working'，'grid cell'）

或

$（document）.ready（函数（）{$（'.not working'）.removeClass（'not-working'）.addClass（'grid-cell'）；}）和。。。。你当然是对的！！
.not-working {
    width: auto;
    grid-column-end: span 4;
}

.not-working {
  display: contents;
}