CSSのサブグリッド（subgrid）の基礎知識と使い方、たった一行のCSSで複数カードの水平グリッドを簡単に揃えられる！
Post on:2023年10月12日
sponsors
CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。
先日の記事でもお伝えしたように、subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができます
CSSのサブグリッド（subgrid）の基礎知識と使い方、プログレッシブエンハンスメント、デベロッパーツールによるデバッグ方法などを紹介します。
CSS Subgrid
by Adam Argyle
下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。
- はじめに
- サブグリッド（subgrid）の基礎知識
- ページレベルの「マクロ」グリッドを共有する
- サブグリッドのサポートをチェックする
- デベロッパーツールの対応
- サブグリッド（subgrid）のリソース
はじめに
CSS Gridは非常に強力なレイアウトエンジンですが、親グリッド上に作成された行と列はグリッドコンテナの直接の子要素の配置しか使用できません。デベロッパーが定義した名前付きグリッドエリアやラインは、直接の子要素以外の要素では失われてしまいます。
そこでサブグリッド（subgrid）の登場です。サブグリッドを使用すると、トラックのサイズ設定、テンプレート、名前をネストされたグリッドと共有することができます。この記事では、それらの仕組みとどのように機能するかを解説します。
祝🎉
EdgeのエンジニアがChromiumにsubgridを提供してくれたことに感謝します。CSSのこの機能は Alison Maher, Ethan Jimenez, Kurt Catti-Schmidt, Ana Sollano Kim, Daniel Libbyの素晴らしい仕事のおかげで利用可能になりました。さらに、Google ChromiumチームのIan Kilpatrickにも感謝したいです。ありがとうございます！
サブグリッド以前は、下記のようなレイアウトを水平に揃えるためには、手作業で一つひとつを調整するしかありませんでした。
水平に揃えるのは大変
サブグリッドにするには、たった一行加えるだけ。
|
1 |
grid-template-rows: subgrid; |
サブグリッド以後は、高さの異なるコンテンツの整列が可能になります。
水平に揃えるのは簡単
実際の動作はデモページでご覧ください。
幅が小さいと分かりにくいので、右上「Edit on CodePen」をクリックして別タブでご覧ください。
See the Pen
Untitled by coliss (@coliss)
on CodePen.
CSSのサブグリッド（subgrid）のサポートブラウザは、下記の通りです。
サブグリッド（subgrid）の基礎知識
CSSのsubgridの基礎知識を紹介する簡単な使用例を示します。
まず、HTMLは2つの子要素があり、ラッパーのdiv要素が2つあります。
|
1 2 3 4 5 6 |
<div class="grid"> <div class="subgrid"> <div>Column 1</div> <div>Column 2</div> </div> </div> |
グリッドは2つのカラム名で設定され、1つ目は幅20ch、2つ目は1frで残りのスペースです。カラム名は必須ではありませんが、説明目的には最適です。
|
1 2 3 4 5 |
.grid { display: grid; gap: 1rem; grid-template-columns: [column-1] 20ch [column-2] 1fr; } |
次にグリッドの子はこれらの2つのカラムにまたがり、グリッドコンテナとして設定され、grid-template-columnsの値にsubgridを設定することで親のカラムを採用します。
|
1 2 3 4 5 6 |
.grid > .subgrid { grid-column: span 2; display: grid; grid-template-columns: subgrid; /* 20ch 1fr */ } |
下記のように表示されます。
これで親グリッドのカラムはサブグリッドとしてレベルダウンされました。このサブグリッドは、これらのカラムのいずれかに子を割り当てることがでるようになりました。
垂直方向のgrid-template-rowsにも同様にサブグリッドを使用できます。
ページレベルの「マクロ」グリッドを共有する
デザイナーは共有グリッドを使用して作業し、デザイン全体にガイドを引き、必要な要素をグリッドに合わせて配置します。デベロッパーにもそれが可能になりました。まったく同じワークフローに加え、さらに多くのワークフローを実現できます！
マクログリッドから完成デザインまで、グリッドで指定されたエリアが事前に作成され、後から必要に応じてコンポーネントを配置できます。
一般的なデザイナーが使用するグリッドのワークフローを実装すると、subgridの機能、ワークフロー、可能性について優れた洞察が得られます。
下記は、Chromeのデベロッパ－ツールから取得したモバイルページのマクログリッドのスクリーンショットです。行には名前があり、コンポーネントを配置するための明確なエリアがあります。
モバイルページのマクログリッドのスクリーンショット
下記のCSSは、デバイスレイアウト用（.device）に行と列に名前を付けてグリッドを作成します。それぞれの行と列にはサイズがあります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.device { display: grid; grid-template-rows: [system-status] 3.5rem [primary-nav] 3rem [primary-header] 4rem [main] auto [footer] 4rem [system-gestures] 2rem ; grid-template-columns: [fullbleed-start] 1rem [main-start] auto [main-end] 1rem [fullbleed-end]; } |
スタイルをいくつか追加したので、下記のようなデザインになります。
スタイルをいくつか追加
親要素の内部には、さまざまなネストされた要素があります。このデザインでは、navとheaderの行の下に全幅の画像を必要です。一番左と右カラムの行の名前は、fullbleed-startとfullbleed-endです。このようにグリッド行に名前を付けることで、fullbleedという配置の省略形を使用して子要素を同時に整列させることができます。これは見てすぐ分かるようにとても便利です。
子要素を同時に整列させることができる
適切な名前の行と列で作成された全体的なデバイスレイアウトを作成した状態で、subgridを使用して、ネストされたグリッドレイアウトに適切な名前の行と列を渡してみましょう。これがsubgridの魔法です！
デバイスレイアウト（.device）は、名前付きの行と列を.appコンテナに渡し、.appコンテナはそれをすべての子に渡します。
|
1 2 3 4 5 6 7 8 9 |
.device > .app, .app > * { display: grid; grid: subgrid / subgrid; /* same as */ grid-template-rows: subgrid; grid-template-columns: subgrid; } |
CSSのサブグリッドは、グリッドトラックのリストの代わりに使用される値です。要素がその親からまたがる行と列は、その要素が提供するのと同じ行と列になります。これにより、.appだけでなく、.deviceグリッドの行名も利用できます。.app内の要素は、サブグリッド以前では.deviceによって作成されたグリッドトラックを参照できませんでした。
display:grid;は、行や列の受け渡しを希望するすべての要素に必要です。
これらをすべて定義すると、ネストされた画像はsubgridのおかげで全幅（fullbleed）で表示できるようになります。マイナスの値やトリックは必要なく、その代わりに「レイアウトはfullbleed-startからfullbleed-endまで広がります」という素敵な実装ができます。
|
1 2 3 |
.app > main img { grid-area: fullbleed; } |
画像は常に、全幅で表示されます。
これで、デザイナーが使用するようなマクログリッドをCSSで実装できました。このコンセプトは必要に応じて拡張し、成長させることができます。
サブグリッドのサポートをチェックする
CSSとサブグリッドを使用したプログレッシブエンハンスメントは、使い慣れた簡単な方法です。
@supportsを使用し、括弧内でブラウザがgrid-template-columnsまたはgrid-template-rowsの値でsubgridを理解するかどうかを確認するだけです。
|
1 2 3 |
@supports (grid-template-columns: subgrid) { /* safe to enhance to */ } |
プログレッシブエンハンスメントを使用したデモページをご覧ください。
「Run Pen」をクリックして、「You have subgrid」と表示されればsubgridをサポートしているブラウザです。「You don't have subgrid」と表示されればサポートしていないブラウザです。
See the Pen
Subgrid feature detection by coliss (@coliss)
on CodePen.
デベロッパーツールの対応
Chrome, Edge, Firefox, SafariのすべてにCSS Gridに対応した素晴らしいデベロッパーツールがあり、Chrome, Edge, Firefoxにはサブグリッドに役立つ機能も備えています。
Chromeのデベロッパーツールでサブグリッドを表示
「subgrid」バッジは「gird」バッジと同様に機能しますが、どのグリッドがサブグリッドでどのグリッドがサブグリッドではないかを視覚的に区別できます。
サブグリッド（subgrid）のリソース
下記のリストはサブグリッドの記事やデモ、そしてサブグリッドを始めるためのインスピレーションをまとめたものです。サブグリッドを学ぶための次のステップを探すのであれば、これらの素晴らしいリソースを楽しんで探索してみてください。
- MDN
- Rachel Andrew with aligned captions
- Rachel Andrew with 10 great examples
- Rachel Andrew with a site of examples
- Michelle Barker at CSS Day 2022
- Cards
- Chris Coyier with forms
- Facundo Corradini with form alignment
- Chris Coyier with aligning list item markers
- Michelle Barker popping out of container to align with parent grid
- Miriam Suzanne showing named line names and subgrid interactions
- Kevin Powell with named area basics
- Kevin Powell with aligned lists
- Shannon Moeller with aligned lists
- Kevin Powell with a page level grid passed down to components
- Elad Shechter with a devtool overlay and fallback
- Aaron Iker with a nice typographic use of subgrid for baseline alignment of footnotes
- Adam Argyle with a fullbleed image inside an article
sponsors
