正しい構造でHTMLを書きたいからGridを使う

CSS Gridはレイアウトの自由度が高くて、レイアウトが楽に書けるのがメリットとしてよく書かれています。
それはそうなんですが、自由度が高いから何がいいかを考えると、HTMLをあるべき構造で書けるからGridにメリットがあると思っています。

FlexboxでできるレイアウトでGridを使うのはこのためです。

サンプル1

よくあるタイトル、画像、テキストのパターンです。デザイン上は分かりやすくするために画像が目に入るようにレイアウトされてることが多いです。しかし、画像が文章を補足する役割だった場合、HTMLはタイトル→テキスト→画像の順番にしたいはずです。
こういう時にGridが役に立ちます。

サンプル2

フッターでありそうな多階層のメニューです。これはGridを使わずやろうとすると、リストを分割する必要ありますが。Gridを使うことで ul > li > ul の形で書くことができます。

さいごに

このようにFlexboxでもできるけどGridを使うことで、CSSに依存せずHTMLを書きやすいのががGridのいいところなので、使える場面で積極的に使っていきたいです。