How to set a fixed height for all Grid rows?

When I was building 100Ideas there was a small requirement that when the ideas grow large it shouldn't affect the layout of the grid, the row and column height of the grid element should be fixed

Before

After

Code

HTML

  <div className='container'>
      <div className='content'>
           <div className='item'/>
           <div className='item'/>
      </div>
  </div>

CSS

Setting grid-auto-rows does the trick

.content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 10rem; // this does the trick
  grid-gap: 2% 2%
}