Как выстроить блоки с помощью grid?

Question

[12Vadim12]

Как должно быть

А вот что вышло

<div class="main__work-blocks">
        <div class="main__work-block  work__block-with">
          <img src="img/main/book.jpg" alt="1">
          <div class="main__work-left">
            <h4 class="main__work-left-title">Образование</h4>
            <h5 class="main__work-left-text">Диплом о высшем психологическом образовании и дополнительные сертификаты</h5>
          </div>
        </div>
        <div class="main__work-block work__block-without">
          <h4 class="main__work-left-title">Опыт работы</h4>
          <h5 class="main__work-left-text main__work-left-text-litle">Подтвержденный опыт работы не менее 3-х лет</h5>
        </div>

        <div class="main__work-block work__block-without">
          <h4 class="main__work-left-title">Обучение</h4>
          <h5 class="main__work-left-text main__work-left-text-litle">Прохождение супервизии от 20 часов в год</h5>
        </div>

        <div class="main__work-block work__block-with">
          <img src="img/main/watch.jpg" alt="1">
          <div class="main__work-left">
            <h4 class="main__work-left-title">Личная терапия</h4>
            <h5 class="main__work-left-text">Прохождение личной терапии от 50 часов в год</h5>
          </div>
        </div>
      </div>

.main__work-blocks {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(470px, 1fr));
}
.main__work-block {
  display: flex;
  background-color: #EBF5FF;
  padding: 20px 59px 20px 30px;
  border-radius: 20px;
}
.work__block-with{
  align-items: center;
  grid-column: span 2;
}

Answer 1

[Dino Winchester]

.main__work-blocks {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(12, 1fr);
}

.main__work-block:nth-child(n + 2) {
  grid-column: span 4;
}

.main__work-block:nth-child(3n + 1) {
  align-items: center;
  grid-column: span 8;
}