(Bootstrap) Не выходит сверстать сетку из изображений

Question

Я собирался построить вот такую сетку, квадраты на которой представляют из себя изображения, но как бы я ни старался, как бы я не гуглил, что-то всё равно не выходит. В итоге у меня получается, что нижняя линия изображений становится длинее, а две верхние изображения справа вообще не совпадают по границам с большим блоком. Понятие особого нету, как можно это реализовать через классы вроде row и col. В итоге у меня получилось то, чего я точно не ожидал:

Надеюсь, что этот вопрос не похож на типичный заказ на фрилансе. Заранее благодарен!

Answer 1

Такое легче всего сделать на grid, без Bootstrap:

.layout {
  display: grid;
  grid-template-areas: 'big big one'
                       'big big two'
                       'three four five';
  grid-template-rows: 100px 100px 100px;
  grid-gap: 1em;
}

.big     { grid-area: big; }
.small-1 { grid-area: one; }
.small-2 { grid-area: two; }
.small-3 { grid-area: three; }
.small-4 { grid-area: four; }
.small-5 { grid-area: five; }

/* Просто, чтобы лучше было видно */
.block {
  border: 3px solid #000;
  text-align: center;
  box-sizing: border-box;
  font-size: 20px;
  padding: 40px 20px;
}

<section class="layout">
  <div class="block big">Big block</div>
  <div class="block small-1">1</div>
  <div class="block small-2">2</div>
  <div class="block small-3">3</div>
  <div class="block small-4">4</div>
  <div class="block small-5">5</div>
</section>

БЛОГ НА HUSL

(Bootstrap) Не выходит сверстать сетку из изображений

Ответы (1 шт):