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

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/

CodePudding user response：

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

CodePudding user response：

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;
}