Расположение сетки с использованием grid-column и grid-row

Question

Я использую сетку строк и столбцов.Я получаю проблему на последнем элементе.Мне нужен второй ряд с равными высотой и шириной.Поэтому я попробовал приведенный ниже код.

ожидаемый вывод

Я получаю вывод

.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

Вы использовали число 5, которое затрудняет деление на 3.Например, используйте 15, и вы можете легко разделить его на 3, и для первого ряда у вас будет 9 + 6 вместо 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>

ОБНОВЛЕНИЕ

Согласно комментариям OP, это правильный вывод, необходимый:

.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>