css 3 и html 5, Как мне сортировать карточки товаров по экрану?

Question

Я добавил margin в основную структуру карточки, но при ее копировании, все карточки идут вниз, а мне нужно чтоб они шли по порядку влево, и если места нет, то уже внизу. Как это можно реализовать?

.card {
  background-color: #eeeded;
  width: 175px;
  border-radius: 20px;
  padding: 20px 10px;
  box-shadow: 10px 10px 20px rgba(67, 64, 64, .4);
  margin: 80px 100px;
}

.card-img {
  border-radius: 11px;
  /*margin-right: 100px;*/
}

.card-title {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 501;
}

.card-description {
  font-size: 12px;
  font-weight: 300;
  margin-top: 20px;
}

.btn-keeper {
  margin-top: 20px;
  text-align: center;
}

.btn-add {
  /*padding: 7px 12px;*/
  /*margin-right: 500px;*/
  color: red;
  background-color: #EEEDEDFF;
  border-radius: 10px;
}

.btn-delete-from-cart {
  color: red;
  background-color: #EEEDEDFF;
  border-radius: 10px;
}

.btn-delete-from-cart:hover {
  color: red;
}

.btn-add:hover {
  color: red;
}

<div class="product-card">
  <!-- wrapper -->
  <div class="card">
    <img class="card-img" src="menu/6za700.jpg">
    <div class="card-title">6 за 700</div>
    <div class="card-description">3 крылышка, 3 стрипса. картошка фри, соус барбекью .кола 0,33. твистер с курей</div>
    <div class="btn-keeper">
      <a href="#" class="btn-delete-from-cart">
        <ion-icon name="remove-circle-outline"></ion-icon>
      </a>
      <a href="#" class="btn-add">
        <ion-icon name="add-circle-outline"></ion-icon>
      </a>
    </div>
  </div>
</div>

Answer 1

Решил так, добавил после главного div еще один div, в который поместил весь код.

БЛОГ НА HUSL

css 3 и html 5, Как мне сортировать карточки товаров по экрану?

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