CSSグリッドで行をクリアする

今日はCSSグリッドを使って楽しいチャレンジをしました.
目標は、コンテナ要素とflexboxに依存するレイアウトを更新することでした.

<div class="cards">
  <pfe-card id="a-1">...</pfe-card>
  <pfe-card id="a-2">...</pfe-card>
  <pfe-card id="a-3">...</pfe-card>
  <pfe-card id="a-4">...</pfe-card>
</div>
<div class="cards">
  <pfe-card id="b-1">...</pfe-card>
  <pfe-card id="b-2">...</pfe-card>
  <pfe-card id="b-3">...</pfe-card>
  <pfe-card id="b-4">...</pfe-card>
</div>

.cards {
  display: flex;
  flex-flow: row wrap;
}

.cards > * {
  margin-bottom: 15px;
  margin-right: 15px;
  min-width: 200px;
  width: calc(25% - 32px);
}

私の最初のステップは、コンテナ要素を削除し、フレックスプロパティをグリッドコンテナーに持ち上げることでした

<pfe-card id="a-1">...</pfe-card>
<pfe-card id="a-2">...</pfe-card>
<pfe-card id="a-3">...</pfe-card>
<pfe-card id="a-4">...</pfe-card>
<pfe-card id="b-1">...</pfe-card>
<pfe-card id="b-2">...</pfe-card>
<pfe-card id="b-3">...</pfe-card>
<pfe-card id="b-4">...</pfe-card>

:host {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(
      200px,
      calc(25% - 32px)));
  grid-auto-rows: max-content;
  gap: 15px;
}

これは自分の仕事のほとんどを行ったが、1つの問題があったb-1 カードの最初のセットの下に新しい'行'に現れた.どのように、私はこの『行整理』行動をエミュレートすることができましたか?使用grid-column , 番目のカードの位置を指定します.

#b-1 {
  grid-column: 1/2;
}

今、その特定のカードの'リセット'それは全体の行ですが、元の動作を複製するが、少数の非意味の要素、および少ないCSSで.

ニース