FlexboxとGridの使い分け

選ぶ基準はたった 1 つ

Flexbox と Grid はどちらも要素をならべる道具です。迷ったときの基準は次の通りです。ならべたいものが 1 本の線なら Flexbox、行と列のマス目なら Grid を選びます。

Flexbox は中身のサイズが主役です。子要素の幅がばらばらでも、余ったぶんを分け合ってうまくおさまります。趣味リストのように、長さの違うタグをならべて折り返す場面が得意です。

Grid は入れ物のサイズが主役です。先にマス目を決めてから中身を流し込むので、列がぴたりとそろいます。作品ギャラリーのように、同じ形のカードをならべる場面が得意です。

いまのページを見直す

このページには両方が入っています。趣味リストは display: flex のまま、作品リストは display: grid にしました。役割が分かれているので、どちらも書き直す必要はありません。使い分けができているかを、自分の目で確かめてください。

ただし 1 つだけ古い指定が残っています。.work-card の margin-bottom です。これはカードが縦一列にならんでいたころ、カードどうしがくっつかないように入れた余白でした。

余白が二重になっている

いまは gap がすきまをつくっています。そこに margin が重なるので、カードの下だけすきまが広くなっているはずです。プレビューをよく見てください。

まずは半分の 8px まで詰めて、すきまがどう変わるかを目で確かめましょう。数字を動かして見た目の変化を追う作業は、レイアウトを読む力そのものです。完全に消すかどうかは、次の章末で判断します。

1. 趣味リスト .hobby-list が Flexbox のままであることを確かめる
2. .work-card の margin-bottom を 8px に詰める