How do I make content of different heights the same height in css grid?

Question

I'm creating a vertical single column listing. Some of the text is 200 characters long and some is 1 character. And list width changes dynamically.

How do I dynamically make each the same height?

all conditions are below.

no stretch. If there are margins with only two pieces, pack them on top.
Must be scrollable if it extends beyond the screen.
Match height to largest cell.

There are ways to make the height uniformly 200px, but I don't like it because it is not dynamic. When we set each height to 200px, the layout will be broken if we change the width of the list.

this is now. As you can see, the height of red and blue are different. I want these to be the same.

.grid {
  height: 100vh;
  overflow: scroll;
  display: grid;
  grid-template-rows: repeat(auto-fill, auto);
  grid-template-columns: 1fr;
}

https://jsfiddle.net/msickpaler/Lndmjc46/17/

Can you provide a minimal working example using the "Code snippet" tool? — whitespace, Jul 30 '22 at 11:57
So do I get this right: You want the grid item height to be defined by the highest grid item and all other grid items should grow so that they match that height? — whitespace, Jul 30 '22 at 12:14
yes! Thanks for the clear summary. and added details. sry for late — msickpaler, Jul 30 '22 at 12:22

score 1 · Answer 1 · answered Jul 30 '22 at 12:23

1

Change the grid-template-rows to

grid-auto-rows: 1fr;

Which should automatically make them all the height of the highest item.

Answered in detail here

answered Jul 30 '22 at 12:23

Calvin Douglas

46
4

I added the property you answered and commented out the height property and it worked. However, if I added `height: 100vh;` and `overflow: scroll;` the height depends on the respective content. Do you have any good ideas? this is fiddle. https://jsfiddle.net/msickpaler/twconkr5/2/ – msickpaler Jul 30 '22 at 12:35
I think grid-auto-rows only works when there is infinite space for it to expand the grid into, ie. no fixed height. – Calvin Douglas Jul 30 '22 at 12:44

score 0 · Answer 2 · answered Jul 30 '22 at 12:36

0

try this:

.grid {
   height: 100vh;
   overflow: scroll;
   display: grid;
   /* grid-template-rows: 100px 100px; */
   grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));
   grid-template-columns: 1fr;
}

.long-text {
   background-color: red;
}

.short-text {
   background-color: blue;
}

answered Jul 30 '22 at 12:36

Idris

1
1
1

thanks, I tried with a lot of childs. Looks good, but oddly enough, nothing has changed in the height of the area protruding from the screen. – msickpaler Jul 30 '22 at 12:42

How do I make content of different heights the same height in css grid?

2 Answers2