Question

我有一个有3个孩子的网格布局，每个孩子跨越12列中的4个，创建一个水平的3列布局。这里可以看到一个简单的例子：https://jsfiddle.net/bnyy6fde/1/。

<div class="grid">
  <div class="grid-cell">
    <h3>Grid element 1</h3>
  </div>
  <div class="grid-cell">
    <h3>Grid element 2</h3>
  </div>
  <div class="grid-cell">
    <h3>Grid element 3</h3>
  </div>
</div>

我的CMS将每个子项包装在div中，这会导致网格布局无法正确呈现。这可以在这里看到，由“非工作”类的div证明：https://jsfiddle.net/e6b2yf37/2/。

<div class="grid">
  <div class="not-working">
    <div class="grid-cell">
      <h3>Grid element 1</h3>
    </div>
  </div>
  <div class="not-working">
    <div class="grid-cell">
      <h3>Grid element 1</h3>
    </div>
  </div>
  <div class="not-working">
    <div class="grid-cell">
      <h3>Grid element 1</h3>
    </div>
  </div>
</div>

根据编辑器的设置，列数可以跨越每行1到4个元素。因此，通过给div，'not-working'，grid-column-end：4来解决这个问题是不可能的。

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

是否有一个纯CSS解决方案，无论子项跨越多少列，它都会忽略div'not-working'？

Answer 1

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

你的div现在应该平均填充网格。

Answer 2

如何将styline更改为.not-working即

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

Answer 3

实际上...您只需要display: contents。

您只需要在CSS中添加它：

.not-working {
  display: contents;
}

另请参阅：updated fiddle。

请注意，它仅在Firefox中可以正常使用，因此在使用此功能之前，您可能需要在各种浏览器中对其进行测试。您的内容可能存在一些可访问性问题。另请参阅：Can I Use notes。

忽略显示中的div周围网格单元：grid

3 个答案: