Gridレイアウトで、全体を中央寄せしつつ、最終行を左寄せにする

flexboxを使うとうまくいかない

justify-content: centerだとこうなる。

justify-content: flex-startだとこうなる。

justify-content: flex-start+widthを指定+margin: autoだとこうなる。

解決策

display: gridを使う

html

<div class="container">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
  <div class="item">item6</div>
  <div class="item">item7</div>
</div>

css

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px);
  grid-row-gap: 20px;
  grid-column-gap: 10px;
  justify-content: center;
  width: 90%;
  margin: 0 auto;
}

.item {
  padding: 12px;
  background-color: yellow;
}

See the Pen xxRNwLo by d0ne1s (@d0ne1s) on CodePen.

参考

• 【CSS】グリッドレイアウトで全体的に中央に寄せつつ最後の行の子要素だけ左寄せにする方法 - Tomcky's blog