Grid layout using grid-column and grid-row

Question

I am using the grid rows and column. I am getting the issue at the last element. I need the second row with equal height and width. So I tried below code.

expected output is

I am getting the output

.content {
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: minmax(150px, auto);
  grid-gap: 10px;
}

.content div {
  background-color: #333;
  padding: 30px;
  color: #fff;
}

.one {
  grid-column: 1/4;
  grid-row: 1/3
}

.two {
  grid-column: 4/6;
  grid-row: 1/3;
}

.three {
  grid-column: 1/3;
  grid-row: 3/5
}

.four {
  grid-column: 3/5;
  grid-row: 3/5;
}

.five {
  grid-column: 5/6;
  grid-row: 3/5;
}

<div class="content">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
  <div class="five">5</div>
</div>

Answer 1

You used the number 5 which make it difficult to divide by 3. Use 15 for example and you can easily divide it by 3 and for the first row you will have 9 + 6 instead of 3 + 2

.content {
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(15, 1fr);
  grid-auto-rows: minmax(150px, auto);
  grid-gap: 10px;
}

.content div {
  background-color: #333;
  padding: 30px;
  color: #fff;
}

.one {
  grid-column: 1/10;
  grid-row: 1/3
}

.two {
  grid-column: 10/16;
  grid-row: 1/3;
}

.three {
  grid-column: 1/6;
  grid-row: 3/5
}

.four {
  grid-column: 6/11;
  grid-row: 3/5;
}

.five {
  grid-column: 11/16;
  grid-row: 3/5;
}

<div class="content">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
  <div class="five">5</div>
</div>

UPDATE

As per the OP comments, this is the correct output needed:

.content {
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(150px, auto);
  grid-gap: 10px;
}

.content div {
  background-color: #333;
  padding: 30px;
  color: #fff;
}

.one {
  grid-column: 1/3;
  grid-row: 1/3
}

.two {
  grid-column: 3/4;
  grid-row: 1/3;
}

.three {
  grid-column: 1/2;
  grid-row: 3/5
}

.four {
  grid-column: 2/3;
  grid-row: 3/5;
}

.five {
  grid-column: 3/4;
  grid-row: 3/5;
}

<div class="content">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
  <div class="five">5</div>
</div>