[FIXED] How do I get rid of the space at the bottom of the grid elements?

Issue

I have this layout made with CSS grid.

It's adding extra space at the bottom of each element. I'd like the red background(grid cell) to take up the minimum height of it's content.

Something like:

grid-template-rows: <minimum height> <minimum height> <minimum height>;

How do I acheive this?

I know I can just change the HTML and make it easier but since the title comes first on smaller screens, I can't change the structure.

.container {
  display: grid;
  grid-template-areas: "image image title"
                       "image image desc-1"
                       "image image desc-2";
  gap: 1rem;
  width: 500px;
  margin: 0 auto;
}
.item {
  background: tomato;
}
.title {
  grid-area: title;
}
.image {
  grid-area: image;
}
.desc-1 {
  grid-area: desc-1;
}
.desc-2 {
  grid-area: desc-2;
}

.image img {
  display: block;
}
.title, .desc-1, .desc-2 {
  margin-block: 0;
}

<section class="container">
  <h2 class="item title">Lorem ipsum</h2>
  <div class="image">
    <img src="https://picsum.photos/300/200.jpg" />
  </div>
  <p class="item desc-1">Lorem ipsum dolor sit amet.</p>
  <p class="item desc-2">Sed ut perspiciatis unde.</p>
</section>

Solution

Use 4 rows instead of 3. You can also simplify your code like below:

.container {
  display: grid;
  grid-template-columns: 2fr 1fr; /* size of columns */
  gap: 1rem;
  width: 500px;
  margin: 0 auto;
}
.item {
  background: tomato;
}
.image {
  grid-row: 1/span 4; /* placed at 1st row and takes 4 rows */
  grid-column: 1; /* places at 1st column */
}
.image img {
  display: block;
}
.title, .desc-1, .desc-2 {
  margin-block: 0;
}

<section class="container">
  <h2 class="item title">Lorem ipsum</h2>
  <div class="image">
    <img src="https://picsum.photos/300/200.jpg" />
  </div>
  <p class="item desc-1">Lorem ipsum dolor sit amet.</p>
  <p class="item desc-2">Sed ut perspiciatis unde.</p>
</section>

Answered By - Temani Afif

Answer Checked By - Clifford M. (PHPFixing Volunteer)