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

【问题标题】：Ignore divs surrounding grid cells in display: grid忽略显示中网格单元格周围的 div：grid
【发布时间】：2018-01-08 08:26:53
【问题描述】：

我有一个包含 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'？

【问题讨论】：

标签： html css

【解决方案1】：

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

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

【讨论】：

您好，Carele，感谢您的建议。它适用于该场景，但我意识到我忘记将flex-flow: row wrap; 添加到包装器中，这使得display: flex 渲染不正确。我已更新问题以反映这一变化。
@AndreasChristiansen 尝试添加 flex-grow: 1;到你的 div ！
这在 Fiddle 示例中似乎不起作用：jsfiddle.net/e6b2yf37/3
然后你可以在你的 div 中添加“width: 10%”。它最多可以工作 10 个 div/行。原始大小将是 10%，而 flex grow 会告诉它们尽可能地增长，而不会超过屏幕的最大尺寸或相互堆叠。它适用于您的小提琴。
没问题。很难做到正确，因为这是一种非常老套的方法。但是，为了提高效率，我更倾向于使用任何 js/jquery 解决方法。

【解决方案2】：

将样式更改为 .not-working 即如何？

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

【讨论】：

感谢您的建议，omukiguy，但该解决方案仅适用于每行 3 个元素，并且不适用于 4 个或更多元素。
@andreas-christiansen 除非我没有很好地回答您的问题。查看codepen.io/bahiirwa/pen/breQav
您的解决方案适用于每行 3 个元素，但不能每行显示 4 个或更多元素。我正在寻找一个通用解决方案，其中 CSS 可以在不工作的元素上保持不变，并且每行的元素数由它的子元素（网格单元格）定义。
这是一个黑客。你可以用 Jquery/JS 换掉类。然后消除原始 HTML 中的 grid-cell 类。 $("#gridID").attr('not-working', 'grid-cell'); 或 $(document).ready(function(){ $('.not-working').removeClass('not-working').addClass('grid-cell'); });

【解决方案3】：

其实……你只需要display: contents。

你只需要在你的 CSS 中添加这个：

.not-working {
  display: contents;
}

另请参阅：updated fiddle。

请注意，它仅在 Firefox 中运行良好，因此您可能希望在使用之前在各种浏览器中对其进行测试。您的内容可能存在一些可访问性问题。另见：Can I Use notes。

【讨论】：

先生给你金星