minmaxによるauto-fitとauto-fill
auto-fitとauto-fillをminmax()と組み合わせ、レスポンシブな列数を自動的に作成します。
「minmaxによるauto-fitとauto-fill」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
自動レスポンシブグリッド
CSS Grid で最も強力なパターンは、メディアクエリを使わず、auto-fit または auto-fill と minmax() を組み合わせて、カラム数を自動的に調整する完全にレスポンシブなグリッドです。
auto-fill
auto-fill は、指定された最小サイズで収まるだけ多くのカラムを行に配置します。空のカラムは、末尾の空のトラックとして保持されます。
<div class="grid">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>auto-fit
auto-fit は auto-fill と同様に動作しますが、空のトラックを幅 0 に縮めます。既存の項目は、残りの空間を埋めるように伸長します。
<div class="grid">
<div>1</div><div>2</div><div>3</div>
</div>auto-fill と auto-fit の違い
この違いが重要になるのは、行を埋められる数より項目が少ない場合だけです。
auto-fill：空のカラムトラックが残り、項目は空間を埋めるように伸長しませんauto-fit：空のトラックが縮まり、項目が利用可能な幅全体を埋めるように広がります
minmax() を使った auto-fit
有名なレスポンシブグリッドのパターンです。項目は少なくとも 250px の幅を持ち、空間を埋めるように広がり、必要に応じて自動的に新しい行へ折り返されます。
<div class="responsive-grid">
<div>Card 1</div><div>Card 2</div><div>Card 3</div>
</div>minmax() の説明
minmax(min, max) は、トラックサイズの範囲を定義します。トラックは min より小さくならず、max より大きくなりません。fr と組み合わせると、最小値によって制限された柔軟なトラックを作成できます。
<div class="track"><div>Flexible track</div></div>固定サイズの項目に minmax を指定した auto-fill
項目を固定サイズにし、末尾に空白を残したい場合に使用します。
<div class="icon-grid">
<div>🔧</div><div>⚙</div><div>🔨</div>
</div>メディアクエリなしのレスポンシブ対応
これが主な利点です。repeat(auto-fit, minmax(280px, 1fr)) を使うと、モバイルでは 1 カラムに、大きな画面では収まるだけ多くのカラムに自動的に適応します。
<div class="cards">
<div>Card A</div><div>Card B</div>
</div>より安全な minmax のための min()
最小値に単純なピクセル値を指定する代わりに、min(100%, 280px) を使用すると、小さなコンテナーでのレイアウト問題を避けられます。
<div class="grid"><div>Item</div></div>メイソンリー風の整列に使う auto-fill
auto-fill を使うと、項目数がカラム数の倍数でない場合でも末尾の空トラックによって整列が保たれるため、均一なグリッドに便利です。
Grid の固有サイズ指定と Flexbox
Flexbox の flex-wrap + flex: 1 1 250px も似ていますが、カラム幅が均等になることは保証されず、項目が不均一に伸長する場合があります。Grid で minmax を使うと、トラックを完全に均一にできます。
確認問題
空のトラックを縮めて項目が利用可能な空間を埋めることで、メディアクエリなしのレスポンシブなカラムを作成するグリッド値はどれですか。
まとめ
repeat(auto-fit, minmax(250px, 1fr)) は、最も強力なレスポンシブグリッドパターンです。メディアクエリは一切必要ありません。auto-fit は空のトラックを縮め、項目が行を埋めるようにします。auto-fill は空のトラックを保持して、整列を一定にします。ガターには必ず gap を組み合わせてください。
よくある質問
「minmaxによるauto-fitとauto-fill」レッスンは無料ですか？
はい。「minmaxによるauto-fitとauto-fill」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「minmaxによるauto-fitとauto-fill」で何を学びますか？
auto-fitとauto-fillをminmax()と組み合わせ、レスポンシブな列数を自動的に作成します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「minmaxによるauto-fitとauto-fill」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 名前付きラインと名前付きグリッドエリア
- minmaxによるauto-fitとauto-fill
- 暗黙的グリッドとGrid-Auto-Flow
- 整列した入れ子コンテンツのためのSubgrid