How to give all `grid-template-rows` same height dynamically?

Question

This is grid-template-rows. As you can see last rows has more height. I wanna make all of the row's height same whenever a row get more height than other's. This must be with display: grid; property.

Answer 1

Just set grid-auto-rows to 1fr as the example below:

More info on MDN and CSS tricks

.container {
  display: grid;
  grid-auto-rows: 1fr; /* make all rows the same height */
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.container > div {
  border: 1px solid gray;
  padding: 0.5rem;
}

<div class='container'>
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E<br>E<br>E</div>
</div>