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

CSS サブグリッド

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

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

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

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

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

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

サブグリッドの基本

以下は、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

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

課題同じデモを 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-start と fullbleed-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;
}

完成したマクロレイアウトは、プライマリナビゲーションとヘッダー行ではなく、フルブリードの名前付き列の各行まで拡張された全幅のネスト画像です。 — 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 年以上前からその機能が使用されています。

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

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

リソース

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