Картинки разных размеров в ровный ряд

#html #css #bootstrap

Хочу сделать картинки(плитку) как на примере

Использую bootstrap 4. Мой код, до другого пока не додумался:
































Получается такое:



Что я делаю не так? Почему последний квадрат не стал на пустое место. Как правильно
написать код?
    

Ответы

Ответ 1

.wrap {
  display: flex;
  background: #ccc;
  padding: 5px;
}

.col {
  display: flex;
  flex-direction: column;
}

.col__item {
  display: flex;
  width: 100px;
  height: 100px;
  margin: 5px;
  background: #f00;
}

.col__item_stretch {
  flex: 1;
}