How to implement a product grid with same height items but a custom height banner in HTML/CSS?

I am trying to implement a grid that displays some product items. All grid items of the grid should have the same height which I am able to accomplish with grid-auto-rows: 1fr;. But now I also want to add a banner in between with the height of its content. Of course this does not work because of grid-auto-rows: 1fr;. If I remove grid-auto-rows: 1fr; or change it to grid-auto-rows: auto; or grid-template-rows: 1fr; the banner will have the height of its content, but the other gris items will have the height based on the row. The goal is that still all grid items and all rows in the grid should have the same height.
How can I implement that?

I created a codepen: codepen.io/dsalvia/pen/Podzrjr
The first product has 5 rows. The banner has 1 row and other products have 3 rows. I want to have all product items the height of the tallest product item. So in this case all product items should have the height of 5 rows. Only the banner should have the height of 1 row

This is my HTML:

<div class="product-list">
    <div class="grid-item">
        <!-- Product Item -->
    </div>
    <div class="grid-item">
        <!-- Product Item -->
    </div>
    <div class="grid-item">
        <!-- Product Item -->
    </div>
    <div class="grid-item banner" style="grid-row-start: 2">
        <!-- Banner -->
    </div>
    <div class="grid-item">
        <!-- Product Item -->
    </div>
    <div class="grid-item">
        <!-- Product Item -->
    </div>
    <div class="grid-item">
        <!-- Product Item -->
    </div>
</div>

And the CSS:

.product-list{
    display: grid;
    gap: 2rem;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(3,1fr);
}

.product-list .grid-item.banner{
    grid-row-start: 2;
    grid-column: 1/-1;
}

This is what I get:Banner with same height as the product items

And this is what I want to have: Banner with height of its content

Does someone have an idea how I can accomplish that?

As explained in here MDN grid-auto-rows, specifies the size of an implicitly-created grid row track or pattern of tracks.

Based on your edited description, that is still achieveable with using grid-template-rows to set second row as auto. The third row and next can use implicit grid with grid-auto-rows: 1fr so if you have product item with height of 6 lines of text in the future, every grid item will match the tallest item.

I take and modified your sample code to show you the result

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-css -->

.product-list {
  display: grid;
  gap: 2rem;
  grid-auto-rows: 1fr;
  grid-template-rows: 1fr auto;
  grid-template-columns: repeat(3, 1fr);
}

.product-list .grid-item {
  border: 1px solid black;
  background-color: lightgray;
}

.product-list .grid-item.banner {
  grid-row-start: 2;
  grid-column: 1/-1;
  background-color: red;
}

<!-- language: lang-html -->

<div class="product-list">
  <div class="grid-item">
    <!-- Product Item -->
    row 1 <br> row 2 <br> row 3 <br> row 4 <br> row 5
  </div>
  <div class="grid-item">
    <!-- Product Item -->
    row 1 <br> row 2 <br> row 3
  </div>
  <div class="grid-item">
    <!-- Product Item -->
    row 1 <br> row 2 <br> row 3
  </div>
  <div class="grid-item banner">
    <!-- Banner -->
    banner
  </div>
  <div class="grid-item">
    <!-- Product Item -->
    row 1 <br> row 2 <br> row 3
  </div>
  <div class="grid-item">
    <!-- Product Item -->
    row 1 <br> row 2 <br> row 3
  </div>
  <div class="grid-item">
    <!-- Product Item -->
    row 1 <br> row 2 <br> row 3
  </div>
  <div class="grid-item">
    <!-- Product Item -->
    row 1 <br> row 2 <br> row 3
  </div>
  <div class="grid-item">
    <!-- Product Item -->
    row 1 <br> row 2 <br> row 3
  </div>
  <div class="grid-item">
    <!-- Product Item -->
    row 1 <br> row 2 <br> row 3 <br> row 4 <br> row 5 <br> row 6
  </div>
</div>

<!-- end snippet -->

Hope it helps and fit with your case.

Try:

.product-list {
   grid-template-rows: 1fr;
}

instead of:

.product-list {
   grid-auto-rows: 1fr;
}

Here is the closest to what you are looking for that I could find. But it is not ideal since it assumes the number of rows in a page is fixed (5 rows in this example).
If that's not want you want, I hope you find better.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.product-list{
display: grid;
gap: .5rem;
grid-template-rows: 1fr auto repeat(3,1fr) ;
grid-template-columns: repeat(3,1fr);
}
.product-list .grid-item.banner{
grid-row-start: 2;
grid-column: 1/-1;
background-color: lime;
}
.grid-item {
border: 1px solid;
background-color: pink;
}

<!-- language: lang-html -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="test.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
</head>
<body>
<div class="product-list">
<div class="grid-item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam aperiam porro hic ut iure eaque reprehenderit! Totam consequatur ea dicta.
</div>
<div class="grid-item">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit eligendi quod similique nesciunt quos labore, quae distinctio reprehenderit animi nostrum totam cupiditate maiores non iure magnam, perferendis autem. Velit, distinctio?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatibus, rem! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam aperiam porro hic ut iure eaque reprehenderit! Totam consequatur ea dicta.
</div>
<div class="grid-item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam aperiam porro hic ut iure eaque reprehenderit! Totam consequatur ea dicta.
</div>
<div class="grid-item banner" style="grid-row-start: 2">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem, hic!
</div>
<div class="grid-item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam aperiam porro hic ut iure eaque reprehenderit! Totam consequatur ea dicta.
</div>
<div class="grid-item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam aperiam porro hic ut iure eaque reprehenderit! Totam consequatur ea dicta.
</div>
<div class="grid-item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam aperiam porro hic ut iure eaque reprehenderit! Totam consequatur ea dicta.
</div>
<div class="grid-item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam aperiam porro hic ut iure eaque reprehenderit! Totam consequatur ea dicta.
</div>
<div class="grid-item">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum placeat quibusdam atque! Veritatis mollitia dolore possimus, explicabo omnis tenetur veniam quaerat corporis ipsam tempora rerum, autem reiciendis inventore quis. Minima?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam aperiam porro hic ut iure eaque reprehenderit! Totam consequatur ea dicta.
</div>
<div class="grid-item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam aperiam porro hic ut iure eaque reprehenderit! Totam consequatur ea dicta.
</div>
<div class="grid-item">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum placeat quibusdam atque! Veritatis mollitia dolore possimus, explicabo omnis tenetur veniam quaerat corporis ipsam tempora rerum, autem reiciendis inventore quis. Minima?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam aperiam porro hic ut iure eaque reprehenderit! Totam consequatur ea dicta.
</div>
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis odit quam, necessitatibus incidunt, totam quod laborum ab, recusandae fugiat ea nemo dolor?</p>
</body>
</html>

<!-- end snippet -->