# How CSS subgrid fixes alignment issues for good

URL: https://theosoti.com/short/css-subgrid-layout/
Published: 2025-02-17
Author: Theo Soti
Tags: CSS, modern CSS, CSS Grid, CSS layout, responsive design, frontend development, CSS tip


> Master CSS Subgrid for perfect layout alignment! Build consistent pricing cards, blog listings, and dashboards with ease.

## Subgrid is your new best friend.

Instead of each item defining its own layout, it inherits the parent’s grid structure.

That means:

- No more inconsistent heights.
- No more manually tweaking spacing.
- Everything stays perfectly aligned.

To make it work, it’s simple:

- Set `display: grid` on the child element.
- Use `grid-template-rows: subgrid` or `grid-template-columns: subgrid`.
- Use `grid-row: span 3;` (or equivalent) to stretch items across multiple tracks within the parent grid.
- The child now follows the parent’s grid.

In the pricing card example, all sections stay aligned across all cards, no extra hacks needed.

Subgrid is great in component-based layouts:

- Blog listings where titles, excerpts, and metadata align.
- Feature grids with perfectly balanced headings and descriptions.
- Dashboards where stats and labels need precise positioning.
- Forms with consistent input and label alignment.

Subgrid is reliable for most modern browsers with 91.51% support.

Some older browsers might need fallbacks, so use it as progressive enhancement where needed.

Here is the code:

```html
<section class="container">
  <div class="card">
    <h2>First plan - super long title</h2>
    <p>Content</p>
    <button>Super Cheap</button>
  </div>
  <div class="card">
    <h2>Best plan</h2>
    <p>Content</p>
    <button>Great Value</button>
  </div>
  ...
</section>
```

```css
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}
```

`subgrid` is most useful when child elements must align with a parent track system. It removes repeated grid definitions and keeps vertical rhythm stable across cards and editorial layouts.

Layout features like this provide real value when components move between narrow and wide containers. Testing nested contexts early prevents brittle breakpoint rules.

For teams, `display: grid` is easiest to maintain when it starts in one documented example before broader reuse. After validation, expand gradually to matching components and avoid ad-hoc one-off overrides.

---

If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.

Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!