CSS グリッドの最後の行に要素を垂直方向に中央揃えするにはどうすればよいですか?

Question

このように CSS グリッドを使用していくつかの項目をレイアウトしています...

#container {
  表示: グリッド;
  グリッド テンプレート列: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%;
}

。アイテム {
  背景: 青緑;
  色: 白;
  パディング: 20px;
  マージン: 10px;
}

<div id="container">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

最後の行を左揃えではなく中央揃えにするにはどうすればよいですか?アイテムの数は保証できませんので、レイアウトがどのような数のアイテムでも機能することを願っています。

これにはフレックスボックスを使用する必要がありますか?それともCSSグリッドの使用が適していますか？

Answer 1

この記事では、疑似セレクターを使用して残りのグリッド項目を制御する方法に関する優れた方法を見つけました: 残りのグリッド項目を疑似セレクターで制御する

リーリー リーリー

Answer 2

CSS グリッドは、交差するレールが邪魔になるため、行全体の位置合わせには適していません。詳細な説明は次のとおりです:

• グリッド項目を行/列全体に揃えます (フレックス項目と同様)

代わりに、フレックスボックスを使用して、justify-content: center を設定します。

これにより、すべてのアイテムが行の水平方向の中央に詰め込まれます。余白によってそれらが分離されます。

完全に入力された行では、justify-content は機能しません。これは、 機能するための空き領域がないためです。

空きスペースのある行 (この場合は最後の行のみ) では、項目は中央に表示されます。

リーリー リーリー