Как сверстать карточки на flex

Question

У меня вопрос следующий: как правильно сверстать адаптивно карточки на css flex как здесь - https://codepen.io/begovon/pen/abdQOdq

.element {
  width: 100%;
  max-width: 1400px;
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
  padding: 20px;
}

.element__slot {
  width: 100%;
  height: 300px;
  background: url(http://ewigkeit.ucoz.club/wallpaper/poster-4.jpg) no-repeat
    center center / cover;
}

<div class="element">
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
</div>

Answer 1

Если именно на flex, то как-то так:

.element {
  width: 100%;
  max-width: 1400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  padding: 20px;
  background-color: black;
}

.element__slot {
  width: 200px;
  height: 300px;
  background: url(http://ewigkeit.ucoz.club/wallpaper/poster-4.jpg) no-repeat
    center center / cover;
}

.element__slot:not(:last-child) {
  margin-right: 10px;
  margin-bottom: 10px;
}

  <div class="element">
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
  <div class="element__slot"></div>
</div>

БЛОГ НА HUSL

Как сверстать карточки на flex

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