CSS Subgrid Generator
Generate subgrid CSS so nested elements align to the parent grid tracks, solving the ragged card problem without fixed heights or JavaScript measurement.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
The ragged card problem
A row of cards each containing a title, a description and a button looks wrong when the titles differ in length: one wraps to two lines, so its description starts lower and its button sits at a different height from its neighbours. For years the fixes were all bad: fix the title height and truncate, measure with JavaScript and set heights, or accept the raggedness. Subgrid solves it properly by letting each card's internal rows align to the same tracks on the parent grid.
Subgrid inherits tracks rather than defining them
A normal nested grid creates its own independent tracks, which is why the cards do not align. Declaring grid-template-rows: subgrid makes the child use the parent's row lines instead, so every card's title occupies the same row as every other card's title, and that row is as tall as the tallest title. The alignment falls out of the track sharing rather than being computed.
The card must span the rows it wants to share
Subgrid only works when the child spans multiple tracks of the parent, so the card needs grid-row: span 3 for a three-part card, and the parent needs grid-template-rows: auto auto auto or a repeat that provides them. Forgetting the span is the usual reason subgrid appears to do nothing: the child is a subgrid of a single row, which aligns nothing.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
What problem does subgrid solve?
Aligning the internals of sibling elements. Without it, each card creates its own grid and a longer title in one card pushes its description and button out of line with the others.
Why does my subgrid do nothing?
Almost always because the child does not span multiple parent tracks. Subgrid shares the parent lines, so a child occupying one row is a subgrid of one row and aligns nothing. It needs an explicit grid-row span.
Can I use subgrid on both axes?
Yes, grid-template-columns and grid-template-rows both accept it, independently. Rows is the common case for cards; columns matters for forms where labels and fields should align across rows.
Do gaps come from the parent?
By default yes, the subgrid inherits the parent gap. Setting gap on the subgrid itself overrides it for that element, which is occasionally what you want and usually not.
Is subgrid supported?
Yes, in every current browser. For older ones the fallback is the ragged layout, which is what you had before, so it degrades to the previous behaviour rather than breaking.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Describe your card structure to generate subgrid CSS that aligns every card.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.