用途の違い
- flexboxは1次元
- gridは2次元
行または列のみであればflex、行と列両方を制御する必要があるならgrid推奨。
Flexbox
Grid
Grid レイアウト
grid-template-columns / grid-template-rowsを使って幅や高さを指定
See the Pen Grid Layout Basic by Hiroshi (@hiroshikm) on CodePen.
frを使って幅や高さを指定
See the Pen Grid Layout fr by Hiroshi (@hiroshikm) on CodePen.
repeatを使って幅や高さを指定
See the Pen Grid Layout repeat by Hiroshi (@hiroshikm) on CodePen.
grid-column / grid-rowでグリッドを何枠使うかを指定
grid-column: 1 / 5;なら列グリッド1本目から5本目まで使用。
grid-column: 1 / span 4;なら「始まりのライン1 / span 4個分のボックス」を使用。
つまり、grid-column: 1 / 5;とgrid-column: 1 / span 4;は同じです。
See the Pen Grid Layout grid-column grid-row by Hiroshi (@hiroshikm) on CodePen.
grid-template-areas / grid-areaでエリア名を指定してレイアウト作成
See the Pen Grid Layout grid-template-areas・grid-area by Hiroshi (@hiroshikm) on CodePen.
subgridで入れ子構造を作る
子要素にもdisplay:gridを定義して、その中にアイテムを配置することはもちろん可能だが、その場合あくまで親は親、子は子でグリッドが独立して存在することになり、親子のグリッドはピタッと位置しない。
そのため親のグリッドに合わせて子のグリッドを配置したい時に困る。
そこで使用するのがsubgrid。親のgridを子に引き継ぎます。
以下例では、subgridを使用することで、cardごとのタイトルや画像やボタンなど、横のラインが一致している。
See the Pen Grid Layout Subgrid by Hiroshi (@hiroshikm) on CodePen.