CSS サブグリッド

CSS グリッドは非常に強力なレイアウト エンジンですが、行と列は 親グリッドで作成した列トラックは、直接的な配置にのみ使用できます 子要素を指定します。作成者が名前付きのグリッド領域を定義し、 行が欠落した 直接子。subgrid を使用すると、トラックのサイズ設定、テンプレート、名前を共有できます 必要がありますこの記事では、その仕組みについて説明します。

サブグリッドが表示される前は、雑然としたレイアウトにならないように、コンテンツが手作業で調整されていました。 表示されます。

3 つのカードが横並びに表示され、それぞれに 3 つのコンテンツ:
見出し、段落、リンクの 3 つですそれぞれテキストの長さが異なり、
カードが隣り合わせに並んでいて、不自然な配置になっていることがあります。

After サブグリッドでは、コンテンツの可変サイズの配置が可能です。

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

対応ブラウザ

  • Chrome: 117。 <ph type="x-smartling-placeholder">
  • Edge: 117。 <ph type="x-smartling-placeholder">
  • Firefox: 71. <ph type="x-smartling-placeholder">
  • Safari: 16。

ソース

サブグリッドの基本

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

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

次に、この 2 つの列にまたがるグリッドの子をグリッド コンテナとして設定します。 また、grid-template-columnssubgrid

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

  display: grid;
  grid-template-columns: subgrid; /* 20ch 1fr */
}
<ph type="x-smartling-placeholder">
</ph> CSS グリッド DevTools のスクリーンショット。2 つの列が並んでいて、列の行の先頭に名前が付いています。
https://codepen.io/web-dot-dev/pen/NWezjXv

これで、親グリッドの列がレベル分けされて サブグリッドで分割できます。このサブグリッドで、これらのいずれかの列に子を割り当てることができます。

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

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

デザイナーは多くの場合、共有グリッドを使用して、デザイン全体に線を引き、 配置したい要素を配置しますウェブ デベロッパーも利用できるようになります。この正確な 多くのことが可能になります

マクロ グリッドから最終的なデザインまで。 グリッドに名前付きエリアが事前に作成されます その後のコンポーネントは必要に応じて配置されます。

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

以下は、Chrome DevTools で撮影したモバイル ページ レイアウト マクロ グリッドのスクリーンショットです。行には名前があり、コンポーネントの配置用の明確な領域があります。


モバイルサイズのグリッド レイアウトを示す Chrome CSS グリッド DevTools のスクリーンショット
行と列には、簡単に識別できるように名前が付けられています。
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-startfullbleed-end です。このようにグリッド線に名前を付ける 子はプレースメントに合わせて各要素に同時に配置できます。 省略形 /fullbleed。これから説明するので、これはとても便利です。


DevTools のグリッド オーバーレイのスクリーンショット。
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」というキャッチコピー

.app > main img {
    grid-area: fullbleed;
}
<ph type="x-smartling-placeholder">
</ph> 完成したマクロ レイアウトは、プライマリ ナビゲーションとヘッダー行ではなく、フルブリードの名前付き列の各行まで拡張された全幅のネスト画像です。
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 があります。 Edge と Firefox には、サブグリッドを表示するための特定のツールが用意されています。Chrome の発表 ツールを 115 で、 Firefox では 1 年以上前からその機能が使用されています。

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

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

リソース

このリストは、サブグリッドの記事、デモ、全体的なアイデアをまとめたものです。 ご覧くださいサブグリッドの次のステップを確認したい場合 ぜひご活用ください