What is CSS Subgrid Layout Generator?
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.
quickAnswer
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.
limitations
- 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.
How to use this tool
- Define the parent grid columns and optionally rows. The subgrid child inherits these tracks.
- Set the column and row span for the subgrid child — how many parent grid cells it occupies.
- Choose whether the child uses subgrid for columns, rows, or both.
- Copy the parent and child CSS and apply matching selectors in your HTML.
What you can use it for
- 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.