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

パッと思い浮かぶのはFlexboxを使う方法なのだが、これがFlexboxだと、CSSだけでの実現はなかなか難しそう。

もし、これをCSSのみで実現しようと思うとGrid Layoutを使うのが一番簡単な気がしている。

developer.mozilla.org

サンプルは以下(CodePenのサイトで開いてブラウザの幅を変えると動きがわかりやすいです)。

codepen.io

ただし、欠点としてはブラウザのサポート状況がFlexboxに比べて良くないこと。
状況に合わせて使っていきたい。