CSSサブグリッドレイアウトジェネレーターとは
サブグリッドはネストされたグリッドコンテナが親のグリッドトラックを継承できるCSSグリッド機能です。自身のgrid-template-columnsやgrid-template-rowsを定義する代わりに子はsubgridを使用して親のグリッドラインに項目を整列させます。これは各カード内で内部の整列が必要なカードグリッドに便利です。
クイックアンサー
CSSサブグリッドを使用してネストされたグリッド項目を親のグリッドトラックに整列させます。子はgrid-template-columns: subgridやgrid-template-rows: subgridを使用して親グリッドからトラックサイズ、ギャップ、名前付きラインを継承します。
Last updated: 2026-05-28
制限事項
- サブグリッドを使用するには親が明示的なトラックを持つグリッドコンテナである必要があります。親が自動生成トラック（暗黙的グリッド）を使用する場合サブグリッドは継承するトラックを持ちません。
- サブグリッドのブラウザサポートは基本的なCSSグリッドよりも新しいものです。Firefoxが最初に搭載し（v71）ChromeとEdgeはv117で追加Safariはv16で追加しました。古いブラウザはサブグリッドを完全に無視します。
- サブグリッドの子は親のギャップを上書きできません。ギャップ値は最も近いグリッド祖先から継承されサブグリッド要素自体で変更することはできません。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- 親グリッドの列とオプションで行を定義します。サブグリッドの子はこれらのトラックを継承します。
- サブグリッドの子の列と行のスパンを設定します。親グリッドのセルをいくつ占有するかです。
- 子が列、行、または両方にsubgridを使用するかどうかを選択します。
- 親と子のCSSをコピーしHTMLで一致するセレクターを適用します。
主な用途
- 各カードにヘッダー、本文、フッターがありそれらが列間で整列するカードグリッドを作成します。
- サブグリッドを使用してラベルと入力のペアがセクション間で整列するフォームレイアウトを構築します。
- 異なるサイズのウィジェットがメイングリッドと配置を共有するダッシュボードをデザインします。