CSS Subgrid: A Practical Guide to Aligned Layouts

Subgrid solved the card alignment problem I fought for years. Here is how I use it in production to keep nested grid content visually aligned. I was building a card layout recently where each card had a title, a subtitle, a body excerpt, and a footer with metadata. The cards were in a responsive grid, and I wanted the titles to align across cards, the subtitles to align, and so on. so the cards looked like a neat table rather than a pile of uneven blocks. Before subgrid, I would have used JavaScript to measure heights and set them manually, or given up and accepted the visual mess. With subgrid, it was one property. What Subgrid Actually Does Subgrid lets a grid item inherit the grid tracks of its parent. Normally, when you set display: grid on an element, its children participate in that grid but its grandchildren start fresh grids of their own. Subgrid breaks that boundary. a child grid can opt to use the parent's rows or columns instead of defining its own. The practical effect is that content in nested grids can align to the parent's tracks. If the parent grid has…