タイトルからだとよくわからないかもしれないですが、商品覧のようなページを作成する時に、下の図のようなレイアウトを CSS だけでうまい具合に作りたくなりました。

要件は以下の通り

失敗

最近、 CSS の flexbox が強いという話を知ってなんでもかんでもflexで解決しようとしていたのですが、今回の用件はどんなに頑張ってもどこかに支障がでて上手くいきませんでした。CodePenのサンプルコード

例1

.parent {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: left;
  margin: 0 auto;
}

まずは親要素のflex-wrapをwrapに指定してjustify-content: leftにした上でmargin: 0 autoをすればいい感じになると思ったのですが、全体は中央寄席にならず、左に寄ってしまいました。

.parent {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
}

続いて、justify-content: centerにしてみましたが、全体は中央寄せになるものの、子要素も中央寄席になってしまいました。

このほかにも3時間ほど試行錯誤しましたが、何かが上手くいけばどこかに支障がでるという感じでした。

結果論的には、 flexbox を捨てて、 grid を使うと良いということがわかりました。
CodePenのサンプルコード

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, 100px);
  grid-auto-rows: 100px;
  grid-gap: 16px;
  justify-content: center;
}

ここで注目すべきところは、grid-template-columnsにrepeat()を使った上でauto-fitを指定しているところです。ここが、auto-fillだと思ったようにはなりません。