整列した入れ子コンテンツのためのSubgrid
subgridを使い、入れ子になったグリッドアイテムを親グリッドのトラックに揃えます。
「整列した入れ子コンテンツのためのSubgrid」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
Subgrid の問題
よくある課題として、ヘッダー、本文、フッターを持つカードのグリッドを考えます。subgrid がない場合、各カードは独立したレイアウトになるため、異なるカード内の項目を同じベースラインに揃えることができません。
サブグリッドとは
subgrid は、入れ子のグリッドが親グリッドのトラック定義を継承して参加できるようにする、grid-template-columns または grid-template-rows の値です。
grid-template-rows: subgrid
グリッドコンテナでもあるグリッドアイテムでは、subgrid を使って子要素を親グリッドのトラックに揃えられます。
<div class="card-grid">
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Body</div>
<div class="card-footer">Footer</div>
</div>
</div>grid-template-columns: subgrid
同様に、列に subgrid を指定すると、入れ子のアイテムを親グリッドの列トラックに揃えられます。カードの列をまたいでラベルと値のペアやフォームフィールドを揃える場合に便利です。
サブグリッドと align-content の違い
サブグリッドを使わない場合、align-content や固定の高さを使ってコンテンツを部分的に揃えられますが、この方法は壊れやすいものです。サブグリッドを使えば、実際のコンテンツの高さに基づいて正確に揃えられます。
フォームの整列にサブグリッドを使う
複数のフォーム列にまたがってラベルと入力欄のペアを揃えます。
<div class="form-grid">
<div class="form-section">
<label>Name</label><input placeholder="Name" />
<label>Email</label><input placeholder="Email" />
</div>
</div>サブグリッドは行と列にまたがる
サブグリッドは複数の親トラックにまたがり、行と列の両方向からトラックを継承できます。
<div class="layout"><div class="feature">Feature spans grid</div></div>サブグリッドで名前付きエリアを使う
サブグリッドが親から名前付きトラックを継承すると、その名前をサブグリッドコンテナ内の配置に利用できます。
ギャップの継承
サブグリッドはデフォルトで親グリッドの gap の値を継承します。入れ子のグリッドは同じ溝のシステムに参加します。
ブラウザー対応に関する注意
サブグリッドは 2019 年から Firefox で利用できます。Chrome は 2023 年に対応しました。現在では、すべての最新ブラウザーが対応しています。本番環境で使用する前に、対象ユーザーのブラウザーが対応していることを確認してください。
サブグリッドによる段階的な機能強化
サブグリッドを機能強化として追加する前に、固定の高さや Flexbox による整列を使って古いブラウザー向けのフォールバックを用意してください。
<div class="card-grid"><div class="card">Card content</div></div>クイックチェック
グリッドアイテムに grid-template-rows: subgrid を指定すると、何が起こりますか。
まとめ
サブグリッドは、別々のカードにあるアイテムを同じベースラインに揃える必要があるカードグリッドなど、入れ子になったグリッドコンテンツの整列問題を解決します。複数の行にまたがるグリッドアイテムには grid-template-rows: subgrid を、列方向に揃える入れ子のコンテンツには grid-template-columns: subgrid を使ってください。現在では、すべての最新ブラウザーが対応しています。
よくある質問
「整列した入れ子コンテンツのためのSubgrid」レッスンは無料ですか？
はい。「整列した入れ子コンテンツのためのSubgrid」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「整列した入れ子コンテンツのためのSubgrid」で何を学びますか？
subgridを使い、入れ子になったグリッドアイテムを親グリッドのトラックに揃えます。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「整列した入れ子コンテンツのためのSubgrid」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 名前付きラインと名前付きグリッドエリア
- minmaxによるauto-fitとauto-fill
- 暗黙的グリッドとGrid-Auto-Flow
- 整列した入れ子コンテンツのためのSubgrid