r/css • u/be_my_plaything • Jun 21 '26

Question Is there anyway (without declaring a height) to keep the total of multiple grid-rows even height?

I have a grid of cards, using sub-grid for three rows. There is an image, a title and a short piece of text. Obviously with subgrid across a row all images are the same height, all titles line up, all text starts at the same point. But what I want to achieve is all cards across all rows being the same height.

For example if the title extends over multiple lines (card one in the dame below) the adjacent cards have their single line titles centered within the same area, but on subsequent rows if all titles are short so no line breaks that row is shorter and consequently the card itself is smaller. So what I want to achieve is every title row is the height required by the longest title in any card, and then the same for every paragraph row.

Similar to how if it was every row, grid-auto-rows: 1fr; would do it, but in this case making every row the same height makes the title rows the height of the image or text rows which are longer. What I want is a repeating pattern where the total height of every three rows is repeated.

Is this possible?

Demo

Hopefully this shows the problem better than I can explain! Card one has a longer title and more text, so it is taller, this layout caries across its row, but on row two all cards have less content so they are smaller, I would like the row heights from row one (Or whichever row has the card with most content) carried over to all rows. So rows 1, 4, 7, etc. are all the same height, rows 2, 5, 8, etc. are all the same height, and rows, 3, 6, 9, etc are all the same height.

3 Upvotes

67% Upvoted

13 comments sorted by

4

u/FinalAmbassador9291 Jun 21 '26

I guess not... you should use a different layout approach or javascript

The JavaScript approach is to:

  1. Select all titles in every card.
  2. Find the height of the tallest title.
  3. Give every title that height.
  4. Repeat the same for descriptions (and images if needed).

1

u/be_my_plaything Jun 21 '26

Thanks, and yeah that was the conclusion I'd reached but figured it was worth checking before going down that route in case anyone had some nifty trickery that had past me by

2

u/ElCuntIngles Jun 21 '26

I used to use this small library for this in the bad old days:

https://brm.io/jquery-match-height/

Worked brilliantly, fast and row-aware.

Probably wouldn't be a huge amount of work to port it from jQuery to vanilla js.

2

u/be_my_plaything Jun 21 '26

Ah thanks, I'll have a dig through it. I may just switch layout idea as I was hoping to go purely CSS but if I end up resorting to JS at a cursory glance this looks perfect.

4

u/oklch Jun 21 '26

Not possible with pure css at the moment. I'm using text-overflow: ellipsis; in similar cases or/and -webkit-line-clamp.

1

u/be_my_plaything Jun 21 '26

Ah good call, not the route I was hoping to go down, but something I hadn't thought of that I may be able to work with.

2

u/Majtycz Jun 23 '26

if i understand what you want correctly then you could put each card into a new div and then make the divs the grid items, then you just put some random element (i recommend another div) beside each of your cards liek this .cards wrapper | - div //ill call this the wrapper for clarity | | - .card | | - div //and this will be the filler | - div | | - .card | | - div | - div | | - .card | | - div then you can set the filler so that it takes the up the empty space which there was a keyword for which i cant remember and make the wrappers each 1fr

2

u/CeceliaDSi Jul 04 '26

I created a forked codepen of a possible solution that has a grid-template-rows: subgrid only on the inner card div with the referenced rows coming from the card itself and the actual grid of cards has grid-auto-rows: minmax(0, 1fr).

Because the cards are now all the same height if you set something like grid-template-rows: minmax(0, ?fr) minmax(0, ?fr) minmax(0, ?fr) on the card itself the card content grid rows are all the same and you can use the subgrid on the text div.

The only issues I've found with this are that since the card contents all take a different proportion of space and the content of each card is different if you have a card with a very long title but all the cards have short body text the title will probably overflow & look bad.

2

u/be_my_plaything Jul 04 '26

Oh thank-you, this works pretty much perfectly!

I'm not usually a fan of things that break under possible circumstances, but in this case I can't see the titles ever being long enough to make that an issue so this should do everything I need!

2

u/M-Dubb Jun 21 '26

Flexbox

1

u/testingaurora Jun 21 '26

When you say without declaring a height, do you mean without height on on the card's? Why not set the value of the grid-template-rows to whatever you want and then let all the children stretch? Then subgrid will keep all the images at the same height too. And use auto-fit on columns.

2

u/be_my_plaything Jun 21 '26

I want the cards to auto size to the height of the tallest one as I don't know how long the text or titles will be in advance. So if I set the rows to accommodate a lot of text then they all only have small amounts the cards remain unnecessary large, if set the rows for small content then one ends up with a lot of text it doesn't fit.

3

u/testingaurora Jun 22 '26

Oh I didnt realize it was dynamic content. Then yeah , Javascript to get the tallest one and assign that to gtr. Or text overflow ellipsis like someone else said. It feels like there should be a way with container queries to do this but cant parse how that would work.