CSS subgrid adds uneven space between element

I am using subgrid to create card with even spacing. For some reason card adds lot of space between elements and space is different in FF and Chrome. Below is the code based on this tutorial.

.wrapper{
  margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
  gap:1rem;
  margin-top:0rem;
  max-height:400px;
}
.wrapper p h2 {  margin:0px;}
.wrapper img {
  max-width:100%;
  display:block;
}
.box{
   border:1px solid #ccc;
  border-radius: 6px;
  padding:1rem;
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 3;
}

<div class="wrapper">
  <div class="box">
    <img src="https://picsum.photos/600/400?random=1" />
    <h2>This is Title One</h2>
    <p>This is the short description of the article which will be used for now</p>
  </div>
  <div class="box">
    <img src="https://picsum.photos/600/400?random=4" />
    <h2>This is Title One</h2>
    <p>This is the short description of the article which will be used for now This is the short description of the article which will be used for now</p>
  </div>
  <div class="box">
    <img src="https://picsum.photos/600/400?random=3" />
    <h2>This is Title One</h2>
    <p>This is the short description of the article which will be used for now</p>
  </div>
  <div class="box">
    <img src="https://picsum.photos/600/400?random=2" />
    <h2>This is Title One</h2>
    <p>This is the short description of the article which will be used for now</p>
  </div>
</div>

Solution

It is because of how you limit the image size. For some reason in Firefox the height of the track is calculated before the images are shrunk by max-width:100%. (Though I can't find the spec for which is the correct behavior.)

To deal with problems caused by replaced elements within a grid or flex container, using a <div> wrapper usually does the trick, which is the case here.

.wrapper {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1rem;
  margin-top: 0rem;
  max-height: 400px;
}

.wrapper p h2 {
  margin: 0px;
}

.box > div {
  max-width: 100%;
}

img {
  max-width: 100%;
  display: block;
}

.box {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 1rem;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

<div class="wrapper">
  <div class="box">
    <div>
      <img src="https://picsum.photos/600/400?random=1" />
    </div>
    <h2>This is Title One</h2>
    <p>This is the short description of the article which will be used for now</p>
  </div>
  <div class="box">
    <div>
      <img src="https://picsum.photos/600/400?random=4" />
    </div>
    <h2>This is Title One</h2>
    <p>This is the short description of the article which will be used for now This is the short description of the article which will be used for now</p>
  </div>
  <div class="box">
    <div>
      <img src="https://picsum.photos/600/400?random=3" />
    </div>
    <h2>This is Title One</h2>
    <p>This is the short description of the article which will be used for now</p>
  </div>
  <div class="box">
    <div>
      <img src="https://picsum.photos/600/400?random=2" />
    </div>
    <h2>This is Title One</h2>
    <p>This is the short description of the article which will be used for now</p>
  </div>
</div>