---
title: "CSS Subgrid Mental Model"
publishDate: "2024-09-14"
topic: "CSS"
tags: ["CSS", "Subgrid", "Layout"]
canonicalUrl: "https://sahillangoo.in/notes/css-subgrid-mental-model/"
---

# CSS Subgrid Mental Model

> Align card headers and footers across independent grid tracks without layout hacks.

- **Published**: 2024-09-14
- **Topic**: CSS
- **Tags**: CSS, Subgrid, Layout

CSS `grid-template-rows: subgrid` allows child elements inside grid items to align with the parent grid tracks:

```css
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

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

Now all headers, body excerpts, and action buttons align horizontally across every card in a row, regardless of text length.