このページは Cloud Translation API によって翻訳されました。

CSS サブグリッド

CSS グリッドは非常に強力なレイアウトエンジンですが、親グリッド上に作成された行と列のトラックは、グリッドコンテナの直接の子を配置するためにのみ使用できます。直接の子要素以外の要素で、作成者が定義した名前付きグリッド領域と線が失われる。subgrid を使用すると、ネストされたグリッドとトラックのサイズ設定、テンプレート、名前を共有できます。この記事では、その仕組みについて説明します。

サブグリッドが表示される前は、このように不規則なレイアウトにならないように、コンテンツが手動で調整されていました。

3 つのカードが左右に並んで表示され、それぞれにヘッダー、段落、リンクの 3 ビットのコンテンツが表示されています。テキストの長さがそれぞれ異なるため、カードが隣接して配置されると、カードの配置が不自然になります。

サブグリッドの後、サイズが異なるコンテンツを配置できます。

3 つのカードが左右に並んで表示され、それぞれにヘッダー、段落、リンクの 3 ビットのコンテンツが表示されています。テキストの長さはそれぞれ異なりますが、サブグリッドは各コンテンツアイテムの最も高さのある行の高さを設定できるようにすることで配置を修正し、配置の問題を解消しました。

対応ブラウザ

ソース

サブグリッドの基本

CSS subgrid の基本を紹介する簡単なユースケースを次に示します。グリッドは 2 つの名前付きの列で定義されます。1 列目の幅は 20ch で、2 列目はスペース 1fr の「残り」です。列名は必須ではありませんが、説明や教育の目的に適しています。

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: [column-1] 20ch [column-2] 1fr;
}

次に、そのグリッドの子が、この 2 つの列にまたがってグリッドコンテナとして設定され、grid-template-columns を subgrid に設定することで親の列を採用します。

.grid > .subgrid {
  grid-column: span 2;

  display: grid;
  grid-template-columns: subgrid; /* 20ch 1fr */
}

CSS グリッド DevTools のスクリーンショット。2 つの列が並んでいて、列の行の先頭に名前が付いています。 — https://codepen.io/web-dot-dev/pen/NWezjXv

これで、親グリッドの列が 1 レベル下のサブグリッドに実質的に渡されました。このサブグリッドでは、これらの列のいずれかに子を割り当てることができます。

課題: 同じデモを grid-template-rows に対して行います。

ページレベルの「マクロ」グリッドを共有する

デザイナーは通常、共有グリッドを使用して、デザイン全体に線を描き、必要な要素を配置します。ウェブデベロッパーも、このようなワークフローを実現できるだけでなく、さらに多くのことが可能になります。

マクログリッドから最終的なデザインへ。グリッドに名前付き領域を作成する作業は、先に作成し、その後、必要に応じてコンポーネントを配置します。

最も一般的なデザイナーグリッドワークフローを実装すると、subgrid の機能、ワークフロー、可能性に関する優れた分析情報を得ることができます。

次のスクリーンショットは、Chrome DevTools のモバイルページレイアウトマクログリッドのスクリーンショットです。線に名前が付けられており、コンポーネントを配置する領域が明確に示されている。

Chrome CSS グリッド DevTools のスクリーンショット。モバイルサイズのグリッドレイアウトが表示され、簡単に識別できるように行と列の名前（fullbleed、system-status、primary-nav、primary-header、main、footer、system-gestures）が表示されています。

次の CSS は、デバイスレイアウト用の名前付きの行と列を使用して、このグリッドを作成します。各行と各列にはサイズがあります。

.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];
}

その他のスタイルでは、次のデザインになります。

以前と同じ CSS DevTools グリッドオーバーレイですが、今回はモバイルシステム UI の一部、シャドウ、少しの色が含まれています。デザインの方向性を把握するのに役立ちます。

この親の内部には、さまざまなネストされた要素があります。このデザインでは、ナビゲーション行と見出し行の下に全幅画像が必要です。右端と左端の列行の名前は fullbleed-start と fullbleed-end です。グリッド線にこのように名前を付けると、fullbleed の配置の省略形を使用して、子を同時に各線に配置できます。これから説明するので、これはとても便利です。

デベロッパーツールのグリッドオーバーレイの拡大スクリーンショット。特に、fullbleed-start 列名と fullbleed-end 列名に注目してください。

適切な名前の行と列で作成されたデバイスの全体的なレイアウトで、subgrid を使用して、適切な名前の行と列をネストされたグリッドレイアウトに渡します。これが subgrid マジックモーメントです。デバイスレイアウトは、名前付きの行と列をアプリコンテナに渡します。アプリコンテナは、その行と列をすべての子に渡します。

.device > .app,
.app > * {
    display: grid;
    grid: subgrid / subgrid;

    /* same as */
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
}

CSS サブグリッドは、グリッドトラックのリストの代わりに使用される値です。要素が親からまたいでいるのは、要素が提供する行と列と同じ行と列になりました。これにより、.app だけでなく、.app の子でも .device グリッドからの行名を使用できるようになります。.app 内の要素は、サブグリッドの前に .device によって作成されたグリッドトラックを参照できませんでした。

これらをすべて定義すると、subgrid のおかげで、ネストされた画像をレイアウト内でフルブリードにできるようになりました。負の値やコツはなく、「my layout spans from fullbleed-start to fullbleed-end」という簡潔なフレーズを使用します。

.app > main img {
    grid-area: fullbleed;
}

完成したマクロレイアウトは、プライマリナビゲーションとヘッダー行ではなく、フルブリードの名前付き列の各行まで拡張された全幅のネストされた画像です。 — https://codepen.io/web-dot-dev/pen/WNLyjzX

これで、デザイナーが使用するようなマクログリッドが CSS で実装されました。このコンセプトは、必要に応じて拡張できます。

サポートを確認する

CSS とサブグリッドによるプログレッシブエンハンスメントは、なじみのある簡単な方法です。@supports を使用して、括弧内で、サブグリッドをテンプレート列または行の値として認識しているかどうかをブラウザに尋ねます。次の例では、grid-template-columns プロパティが subgrid キーワードをサポートしているかどうかを確認します。true の場合、サブグリッドを使用できることを意味します。

@supports (grid-template-columns: subgrid) {
  /* safe to enhance to */
}

DevTools

Chrome、Edge、Firefox、Safari にはいずれも優れた CSS グリッドの DevTools があり、Chrome、Edge、Firefox にはサブグリッドをサポートする特定のツールが用意されています。Chrome は 115 でツールを発表しましたが、Firefox では 1 年以上前から使用されています。

[要素] パネルの要素に表示されるサブグリッドバッジのスクリーンショットプレビュー。

サブグリッドバッジはグリッドバッジと同様に機能しますが、どのグリッドがサブグリッドであるかを視覚的に区別します。

リソース

このリストは、サブグリッドの記事、デモ、ご利用にあたっての全体的なアイデアをまとめたものです。サブグリッド教育の次のステップをお探しの場合は、これらの優れたリソースをご覧ください。