row-height weird behaviour with align-items stretch

Here's the HTML and CSS minimum code I am using :

* {
  margin: 0;
  padding: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px auto;
  align-items: stretch;
}

.sub-grid {
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #ccc;
  font-size: 1.2rem;
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: 15px 10px;
}

.sub-grid>.icon {
  grid-row: 1 / span 2;
  width: 45px;
  height: 45px;
}

<div class="grid">
  <div class="sub-grid cell-1"><img class="icon"
src="https://picsum.photos/id/237/200/300"
alt="Icon 1"
/>
    <h2>Heading 1</h2>
    <p>Lorem,
      ipsum dolor sit amet consectetur adipisicing elit. Tenetur distinctio necessitatibus pariatur voluptatibus. </p>
  </div>
  <div class="sub-grid cell-2"><img class="icon"
src="https://picsum.photos/id/237/200/300"
alt="Icon 2"
/>
    <h2>Heading 2</h2>
    <p>Voluptatum mollitia quae. Vero ipsum sapiente molestias accusamus rerum sed a eligendi aut quia. </p>
  </div>
  <div class="sub-grid cell-3"><img class="icon"
src="https://picsum.photos/id/237/200/300"
alt="Icon 3"
/>
    <h2>Heading 3</h2>
    <p>Tenetur distinctio necessitatibus pariatur voluptatibus quidem consequatur harum. </p>
  </div>
  <div class="sub-grid cell-4"><img class="icon"
src="https://picsum.photos/id/237/200/300"
alt="Icon 4"
/>
    <h2>Heading 4</h2>
    <p>Vero ipsum sapiente molestias accusamus rerum. Lorem,
      ipsum dolor sit amet consectetur adipisicing elit. </p>
  </div>
  <div class="sub-grid cell-5"><img class="icon"
src="https://picsum.photos/id/237/200/300"
alt="Icon 5"
/>
    <h2>Heading 5</h2>
    <p>Quidem consequatur harum,
      voluptatum mollitia quae. Tenetur distinctio necessitatibus pariatur voluptatibus. </p>
  </div>
  <div class="sub-grid cell-6"><img class="icon"
src="https://picsum.photos/id/237/200/300"
alt="Icon 6"
/>
    <h2>Heading 6</h2>
    <p>Pariatur voluptatibus quidem consequatur harum,
      voluptatum mollitia quae </p>
  </div>
</div>

https://jsfiddle.net/Rutheless_Vayu/2ut5vrs3/9/

I notice that the space below the h2 element differs for sub-grid when they have different number of text-lines like for eg: the first subgrid has 4 lines and the second subgrid has 3 lines. As a result, the second row of first-subgrid is slightly above the second row of second subgrid...Can someone explain why this is happening and I noticed that using align-items:start on grid class will solve this issue and the subgrid rows will be in line with each other

Solution

Your .sub-grid elements are actually separate grids with no alignment, between them. You can manually align to the start, or set all of them as actual sub-grids, so they would align themselves to each other.

.sub-grid {
  grid-template-rows: sub-grid; /* set rows to be a sub-grid of main grid */ 
  grid-row: span 2; /* each sub-grid's contents use 2 lines */

* {
  margin: 0;
  padding: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px auto;
  align-items: stretch;
}

.sub-grid {
  grid-template-rows: subgrid;
  grid-row: span 2;
  
  grid-template-columns: min-content 1fr;
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #ccc;
  font-size: 1.2rem;
  display: grid;
  gap: 15px 10px;
}

.sub-grid>.icon {
  grid-row: 1 / span 2;
  width: 45px;
  height: 45px;
}

<div class="grid">
  <div class="sub-grid cell-1">
    <img
          class="icon"
          src="https://picsum.photos/id/237/200/300"
          alt="Icon 1"
        />
    <h2>Heading 1</h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur
      distinctio necessitatibus pariatur voluptatibus.
    </p>
  </div>
  <div class="sub-grid cell-2">
    <img
          class="icon"
          src="https://picsum.photos/id/237/200/300"
          alt="Icon 2"
        />
    <h2>Heading 2</h2>
    <p>
      Voluptatum mollitia quae. Vero ipsum sapiente molestias accusamus
      rerum sed a eligendi aut quia.
    </p>
  </div>
  <div class="sub-grid cell-3">
    <img
          class="icon"
          src="https://picsum.photos/id/237/200/300"
          alt="Icon 3"
        />
    <h2>Heading 3</h2>
    <p>
      Tenetur distinctio necessitatibus pariatur voluptatibus quidem
      consequatur harum.
    </p>
  </div>
  <div class="sub-grid cell-4">
    <img
          class="icon"
          src="https://picsum.photos/id/237/200/300"
          alt="Icon 4"
        />
    <h2>Heading 4</h2>
    <p>
      Vero ipsum sapiente molestias accusamus rerum. Lorem, ipsum dolor sit
      amet consectetur adipisicing elit.
    </p>
  </div>
  <div class="sub-grid cell-5">
    <img
          class="icon"
          src="https://picsum.photos/id/237/200/300"
          alt="Icon 5"
        />
    <h2>Heading 5</h2>
    <p>
      Quidem consequatur harum, voluptatum mollitia quae. Tenetur distinctio
      necessitatibus pariatur voluptatibus.
    </p>
  </div>
  <div class="sub-grid cell-6">
    <img
          class="icon"
          src="https://picsum.photos/id/237/200/300"
          alt="Icon 6"
        />
    <h2>Heading 6</h2>
    <p>
      Pariatur voluptatibus quidem consequatur harum, voluptatum mollitia
      quae
    </p>
  </div>
</div>