repeat()とminmax()で柔軟なグリッドを作ろう

このレッスンでは、repeat()とminmax()を組み合わせた柔軟なグリッドの作り方を学び、画面幅に応じて自動調整されるレイアウトを実現できるようになることを目標にします。「CSS Grid auto-fill minmax」で調べている方向けです。

CSS Gridのrepeat(auto-fill, minmax(最小値, 1fr))という組み合わせは、画面幅に応じて「入る分だけ」列を自動で増減させる、とても実用的なテクニックです。カード一覧のレイアウトによく使われます。

サンプルコードでは、grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));という指定で、各列の幅を最低100pxに保ちながら、画面幅に収まる分だけ自動的に列数を増減させています。プレビューの幅を変えて、1行に並ぶカードの数が変わる様子を確認してみましょう。

初心者がよくつまずくのが、auto-fillとauto-fitという似た値の違いです。auto-fillは要素が少ないときも列の枠を残しますが、auto-fitは要素の数に合わせて余った枠を詰めるという、微妙だが重要な違いがあります。

メディアクエリで細かく列数を指定しなくても、この1行だけで画面幅にちょうど良い数のカードが自動的に並びます。レスポンシブなギャラリーや商品一覧を作るときの定番パターンとして覚えておくと便利です。