jquery.app
日本語
EnglishDeutschFrancaisEspanol日本語Nederlands

CSSツール

無料 CSSサブグリッドレイアウトジェネレーター

親グリッドと子サブグリッドのCSSを生成し、トラックの共有アライメントを実現します。

ツールを読み込み中...

CSSサブグリッドレイアウトジェネレーターとは

Subgrid is a CSS Grid feature where a nested grid container can inherit the grid tracks of its parent. Instead of defining its own grid-template-columns or grid-template-rows, the child uses subgrid to align items with the parent grid lines. This is useful for card grids where each card needs internal alignment.

クイックアンサー

Use CSS subgrid to align nested grid items with their parent grid tracks. The child uses grid-template-columns: subgrid and/or grid-template-rows: subgrid to inherit track sizing, gaps, and named lines from the parent grid.

制限事項

  • Subgrid requires the parent to be a grid container with explicit tracks. If the parent uses auto-generated tracks (implicit grid), the subgrid has no tracks to inherit.
  • Browser support for subgrid is newer than basic CSS Grid. Firefox shipped it first (v71), Chrome and Edge added it in v117, and Safari added it in v16. Older browsers ignore subgrid entirely.
  • The subgrid child cannot override the parent gap. Gap values are inherited from the nearest grid ancestor and cannot be changed on the subgrid element itself.

使い方

  1. Define the parent grid columns and optionally rows. The subgrid child inherits these tracks.
  2. Set the column and row span for the subgrid child — how many parent grid cells it occupies.
  3. Choose whether the child uses subgrid for columns, rows, or both.
  4. Copy the parent and child CSS and apply matching selectors in your HTML.

主な用途

  • Create a card grid where each card has a header, body, and footer that align across columns.
  • Build a form layout where label-input pairs align across sections using subgrid.
  • Design a dashboard where widgets of different sizes share alignment with the main grid.

用途

使用例

例

Card grid with aligned content

A product grid has three columns. Each card spans one column and uses subgrid for rows so the title, description, and price align horizontally across cards regardless of content length.

例

Multi-section form layout

A form has two sections that share column alignment. Each section is a subgrid child that inherits label-input column tracks, ensuring consistent alignment without repeating grid definitions.

よくあるミス

  • Using subgrid without a parent grid — subgrid must descend from a grid container with explicit tracks.
  • Setting both grid-template-columns: subgrid and explicit column values — subgrid replaces, not supplements, the parent tracks.
  • Forgetting that subgrid inherits gaps from the parent — if the parent has gap: 16px, the subgrid child also uses 16px gaps by default.

検証

  1. Check the layout in browser DevTools Grid inspector — subgrid tracks should visually align with parent grid tracks.
  2. Test in Firefox and Chrome to confirm cross-browser subgrid behavior, as there are subtle differences in implicit track handling.

FAQ

CSSサブグリッドレイアウトジェネレーターのFAQ

What is the difference between subgrid and nested grids?

A nested grid creates independent tracks inside a child element — it does not share alignment with the parent grid. Subgrid inherits the parent grid tracks, so items in the subgrid align with items in the parent grid as if they were all in one flat grid. This enables cross-element track alignment.

Does subgrid inherit named grid lines from the parent?

Yes. Named grid lines defined in the parent grid-template-columns or grid-template-rows are available in the subgrid. This makes it easy to place subgrid items on named lines that span the entire layout.

Which browsers support subgrid?

Chrome 117+, Edge 117+, Firefox 71+, and Safari 16+. Firefox was the first to ship subgrid. It is safe to use as a progressive enhancement — browsers that do not support subgrid fall back to the regular grid behavior defined on the child element.

関連ツール

その他のcssツール

こちらもお試しください

こちらもお試しください