Как сделать карточки flex бокса одного размера

Question

Как сделать подобную реализацию во flex боксах? Нужно чтобы при уменьшении экрана карточки переносились на другие строки и расширялись. Но есть проблемма, если карточек не ровно 6 штук, тогда при полном экране, 3 сверху нормальные и 2 снизу других размеров, как решить эту проблему?

Как нужно

Как получается

HTML:

<div class="cards">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>

css:

.cards {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}
.card {
    flex: 1 0 30%;
}

УВЕЛИЧЕНИЕ элемента нужно для адаптива! Чтобы при уменьшении экрана блоки переходили на новые строки и было не 3 эл-та, а 2 (половина на каждый эл) и потом 1 (во всю ширину)

Подскажите как правильно реализовать данный функционал

Answer 1

Извините, но с помощью grid намного легче, не нужно думать о ширине блоков, они сами автоматически будут адаптироваться.
Строка grid-template-columns: repeat(3, 1fr); означает, что 3 блока в строке одинакового размера, то есть когда нужно при мобильной версии вам 2 блока на строку, вы пишете вместо тройки, двойку, а когда одна, то просто вместо repeat(3, 1fr) пишете 1fr и все.
А вот ссылка на уже существующие решения, ознакомьтесь, там и flex и grid вариант рассмотрены - Красивое расположение элементов через flex и grid контейнеры

.card {
  display: block;
  height: 100px;
  background: lightgreen;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

<div class="cards">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>

Answer 2

Если карточкам задана максимальная ширина, которую они могут занимать, то они не будут выходить за ее предел. Не всегда нужно прописывать justify-content, можно оставить его на значении по умолчанию - она, кажется, start.

.cards {
display: flex;
width:390px;
height:100%;
flex-wrap: wrap;
gap: 30px;
background-color: red;  
}

.card {
    background-color: orange;  
    width: 100px;
    max-width: 100px;
    height: 100px;
}

И еще, в этой ситауции нет никакого смысла задавать flex-grow, flex-shrink и flex-basis с помощью свойства flex.

.card {
flex: 1 0 30%;
}

Answer 3

.cards {
  display: flex;
  font-size: 0;
  flex-wrap: wrap;
  margin: -30px 0 0 -30px;
}

.card {
  display: inline-block;
  background: red;
  margin: 30px 0 0 30px;
  flex-grow: 0;
  height: 100px;
  width: calc(100% * (1/3) - 30px)
}

<div class="cards">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>

Но лучше через grid

БЛОГ НА HUSL

Как сделать карточки flex бокса одного размера

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