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

CSS サブグリッド

公開日: 2023 年 9 月 28 日

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

サブグリッドの前は、このようなレイアウトのずれを避けるために、コンテンツを手作業で調整することが多かった。

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

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

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

Browser Support

Source

サブグリッドの基本

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 のスクリーンショット。モバイルサイズのグリッドレイアウトを示しています。行と列には、すばやく識別できるようにフルブレード、システムステータス、プライマリナビゲーション、プライマリヘッダー、メイン、フッター、システムジェスチャーという名前が付けられています。

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

これですべてが定義されたので、subgrid により、ネストされた画像をレイアウト全体に配置できるようになりました。負の値やトリックは使用せず、「レイアウトは fullbleed-start から fullbleed-end にまたがっている」という 1 行のコマンドを使用します。

.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 年以上前から使用されています。

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

サブグリッドバッジはグリッドバッジと同様に機能しますが、サブグリッドとそうでないグリッドを視覚的に区別します。

リソース

このリストは、サブグリッドに関する記事、デモ、開始にあたってのヒントを集めたものです。サブグリッドの学習を次のステップに進めたい場合は、以下の優れたリソースをぜひご覧ください。