カードをきれいに並べたい。幅が狭くなったら自然に折り返してほしい。そんなとき、CSS Gridはレイアウトの意図をそのまま書きやすい道具だ。
まずは、列と余白を決める
最初から細かい配置を指定せず、どのくらいの幅なら読みやすいかを考える。カードの最小幅を決め、入る数だけ列をつくる例がこちら。
.article-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: 32px 24px;
}auto-fitは使われない列を折りたたみ、1frが残ったスペースを分け合う。内側のmin()で、狭い画面でも最小幅が親の幅を超えないようにしている。
余白にも、役割を持たせる
カード同士の距離と、タイトルと説明文の距離。同じ数字でそろえるより、情報のまとまりが伝わるように使い分けると読みやすい。
- 関係の近い要素は、近くに置く。
- まとまりが変わる場所には、広めの余白を置く。
- 列数よりも、一枚のカードの読みやすさを優先する。
画面を狭くして、最後に確かめる
長いタイトル、短い説明、画像のない記事。内容が変わっても崩れないかを確かめる。レイアウトは、いちばん整ったデータだけで完成するものではない。
