Как разместить два последних элемента слева при justify-content: space-between

Question

Есть список карточек. Необходимо без левых/правых марджинов разместить два последних ребенка в флекс-контейнере слева контейнера при свойстве justify-content: space-between; пример

Подскажите, пожалуйста, как это сделать без марджинов.

Answer 1

Никак. Можно использовать grid.

.cont {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 50px;
}

.cont div {
  border: 3px dashed red;
  padding: 50px;
}

<div class="cont">
  <div>a</div>
  <div>SF</div>
  <div>sf</div>
  <div>sfse</div>
  <div>edf</div>
</div>

↑ Разверните на всю страницу

upd: Все же можно использовать позиционионирование, но не думаю, что это хорошая практика

БЛОГ НА HUSL

Как разместить два последних элемента слева при justify-content: space-between

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