Html 带有散布元素的浮动网格，从而破坏第n个子项/n个类型匹配

我在一家商店里展示产品。每种产品都有自己的包装盒。我想把盒子排成网格，每排2个。但是，它们也将被划分为不同的类别，因此我想在属于该类别的每一组方框上方放置一个全宽标题。这是我的HTML：

    <section class="product-listing">

        <h2>Category 1</h2>

        <section>first</section>
        <section>second</section>
        <section>third</section>

        <h2>Category 2</h2>

        <section>fourth</section>
        <section>fifth</section>

        <h2>Category 3</h2>

        <section>sixth</section>
        <section>seventh</section>
        <section>eighth</section>
        <section>ninth</section>
    </section>

及

如您所见，网格工作正常，直到引入第二个h2元素，之后它就会分解，因为如果最后一组有奇数个盒子，则2n+2会被丢弃。基本上我需要做的是在每个标题后重置2n+2公式

快速而肮脏的方法是将每组框包装在一个div中，但如果可以避免的话，我宁愿不在页面中引入不必要的标记

有更干净的解决方案吗？

请注意：如果您想了解网格布局规范，请不要错过这个答案的结尾

一种只需要一个额外元素（可能）的方法是包装整个

.product list

元素，并将显式宽度放在包装器上。这样，您就可以在

.product list

上使用负边距来说明

部分

项目边距，而不必担心无论有多少个元素，边距声明都会发生变化

---

网格规范中内置的自动布局算法将处理其余部分。在Chrome Canary上试试上面的例子（2015年10月——其他地方也很快：WebKit Nightlies和Firefox在实现网格方面并不落后）

flex将负责这项工作：

.product-listing {
    width:410px; height:100%
    background:#000;
}
.product-listing > section {
    float:left;
    width:200px;
    margin:10px 10px 0 0;
    background:#ff0000;
}
.product-listing > section:nth-of-type(2n+2){
    margin-right:0;
}

<div class="wrap">
  <section class="product-listing">

    <h2>Category 1</h2>

    <section>first</section>
    <section>second</section>
    <section>third</section>

    <h2>Category 2</h2>

    <section>fourth</section>
    <section>fifth</section>

    <h2>Category 3</h2>

    <section>sixth</section>
    <section>seventh</section>
    <section>eighth</section>
    <section>ninth</section>
  </section>
</div>

.wrap {
  width: 410px; /* put explicit width here */
}
.product-listing {
  margin: 0 -5px; /* "expand" the .product-listing section */
}
.product-listing > section {
  float:left;
  width:200px;
  margin:10px 5px 0; /* only put equal horizontal margin on items */
  background:#ff0000;
}
.product-listing > h2 {
  clear: both;
  margin-left: 5px; /* add side margins here too */
  margin-right: 5px;
}

.product-listing {
  display: grid;
  grid-template-columns: 1fr 1fr; /* equal width columns */
  grid-column-gap: 10px;
}
.product-listing h2 {
  grid-column: span 2;
}