HTML/CSS 入門 Flexbox と CSS Grid のどちらを使うか
一方向に並べるときはFlexbox、それ以外はGrid
一方向に並べるとは以下のようなことです。
以下は二方向に見えますが、実際は折り返されて複数行になっているだけなので一方向です。
一方でGridを使う場合は二方向(縦、横)の位置を指定できます。以下のように格子に納まるように配置されているのがわかります。
それでは以下の場合はどちらが望ましいでしょうか。
格子を書いてみると収まらないものがあり、一方向に並んでいるのでFlexboxの方が良さそうですね。
重なりがあるときはGrid
以下のように重なりがあるときはGridを使いましょう。
