Как расположить карточки?

Question

[sw213]

Добрый день, помогите пожалуйста. Суть в том, что пытаюсь расположить карточки в контейнере. Но карточка не вмещается крайняя и остается белый отступ справа. Я не понимаю как это решить.
Карточкам задан фиксированный размер, потому что могут прилетать картинки разных размеров и карточку очень может сильно растянуть.
расположить элементы с помощью justify-content тоже не выйдет, потому что карточек может быть 2 и тогда это выглядит ужасно, как можно решить данную проблему
https://codepen.io/scrappyjs666/pen/ExGdzZm

Comments

[Ankhena]

Вопрос точно про верстку?
Может про дизайн?

Либо расскажите, а как должны себя вести карточки, если осталось свободное место? А потом запишите эти требования в css.

Как намек: размеры можно задавать в процентах или в единицах fr для гридов. И тому подобные мысли.

[sw213]

Ankhena, ну я это понимаю, но хочется, что бы карточки весли себя как при спейс-битвин, если их 4, если меньше, то как старт (justify-content)
при этом если задать сетку гридовую 5 штук, то они вылазят за контейнер, если 4, то ситуация не меняет, как на примере
В моём понимании, выход один - увеличить ширину карточек

[Ankhena]

sw213,

В моём понимании, выход один - увеличить ширину карточек

Да, гриды и minmax обычно дает хороший результат.

ну я это понимаю, но хочется, что бы карточки весли себя как при спейс-битвин, если их 4, если меньше, то как старт (justify-content)

Вы хорошо понимаете, что колонки не совпадут? Привет геометрии.

А так, nth-child в помощь
https://css-live.ru/articles/resheno-s-pomoshhyu-c...

[Сергей delphinpro]

.container {
  border: dashed 1px red;
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
 /* width: 318px; */
 /* height: 374px; */
  aspect-ratio: 318 / 374;
  background-color: grey;
  border-radius: 10px;
}