Lmst

#reponsive

Because this keeps getting asked over and over... subgrid is how you get such cards whose grids align even with varying component heights.

https://www.reddit.com/r/css/comments/1itgf3h/comment/mdsg2bh/

Both the card wrapper and the cards get `display: grid` and the rest you can see in the Styles panel in DevTools below.

Live on @codepen

https://codepen.io/thebabydino/pen/QwWNwOz?editors=0100

#CSS #layout #cssLayout #cssGrid #gridLayout #code #coding #frontend #reponsive #web #dev #webDev #webDevelopment #subgrid

Screenshot showing the page with grid overlays. DevTools is open on the right, showing the relevant code.

```
main, article { display: grid }

main { grid-template: repeat(3, max-content)/ repeat(auto-fit, min(35ch, 100%)) }

article {
grid-row-end: span 3;
grid-template-rows: subgrid
}
```

Because somebody asked, here's my take on the adaptive grid with a fixed row item spanning all columns https://www.reddit.com/r/css/comments/1ir2qp9/comment/mdrssnv/ - it all boils down to just 3 #CSS declarations as seen below.

Minimal @codepen example:
https://codepen.io/thebabydino/pen/pvogXOK?editors=1100

#layout #cssLayout #cssGrid #gridLayout #code #coding #frontend #reponsive #web #dev #webDev #webDevelopment

Code and desired result for different available space cases.

```
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, min(var(--w-col), 100%))
}

.fixed-item { grid-area: 2/ 1/ span 1/ -1 }
```

Client Info

Server: https://mastodon.social

Version: 2025.07

Repository: https://github.com/cyevgeniy/lmst