Create accountLogin

Recent searches

No recent searches

Search options

Only available when logged in.
mastodon.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
The original server operated by the Mastodon gGmbH non-profit

Administered by:

Server stats:

357K
active users

mastodon.social: AboutStatusProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.4.0-nightly.2025-03-19

Ana Tudor 🐯

subgrid help?

Live test codepen.io/thebabydino/pen/raN with problem: want the same fixed height for description on all card rows

repeat(3, auto) 😿 different heights for cards on different lines
repeat(6, auto auto 3lh) 😿 unwanted space below cards widescreen
auto-fit instead of 6 won't work 😿

Shows 6 cards distributed 3 at the top and 3 at the bottom. The `grid-template-rows` value for the cards wrapper is `repeat(3, auto)`. This gets inherited on the individual cards via subgrid. It succeeds in giving the corresponding card components the same height for cards on the same row, however, the card components have different heights depending on the row they're on. The description component for example, has a height of `224px` for the top cards and a height of `116px` for the bottom cards.
Shows 6 cards distributed 3 at the top and 3 at the bottom. The `grid-template-rows` value for the cards wrapper is `repeat(6, auto auto auto)`. This gets inherited on the individual cards via subgrid. It succeeds in giving the corresponding card components the same height for *all* the cards, however this means lots of unnecessary grid tracks and space created at the bottom for wider viewports where we can have multiple cards side by side.
#subgrid#cssLayout#cssGrid
Feb 21, 2025, 12:32 PM·Public
0boosts·1favorite
Public *
CSS by T. Afif :verified:

@anatudor repeat(3, auto auto 1fr) ?

PS: you disabled the reply on bluesky.

Public
Ana Tudor 🐯

@css Nope.

I don't want them to stretch to the max content of the widest, but to collapse to a fixed height, let's say 3lh (not quite, but whatever, not that important).

Also, the 3 repetition fails if the cards aren't on 2 columns. If more columns fit, then there's space at the bottom (like in my second case). If only one column fits then the last 3 cards have a description height equal to the paragraph height.

And thanks for the heads-up.

Public
Kevin Powell

@anatudor Instead of a fixed number of rows, you can use `grid-auto-rows` in the same way :)

Here's a fork that I think does what you're after: codepen.io/kevinpowell/pen/dPy

codepen.iosubgrid problem...
Public
Ana Tudor 🐯

@kevinpowell TIL.

Never used `grid-auto-rows` before. Because I could never understand what it does.

Any idea if I could make the .card elements overflow their grid-area? I can make the p overflow (codepen.io/thebabydino/pen/raN) and it just might be enough for what I want, but I'm curious if I could make the .card overflow too. 🤔

codepen.iosubgrid problem...
Public
Kevin Powell

@anatudor hmm, that's a good question 🤔

I don't think so. I'm not 100% sure, but I think with them being grid items, things like max-content are limited to the size of the cell(s).

ExploreLive feeds
About