Как разместить элементы внутри блока на одинаковом расстоянии

Question

Как разместить элементы внутри родительского блока таким образом, чтобы расстояние между блоками пропорционально изменялось в зависимости от разрешения экрана (проще говоря сетку с товарами - а-ля интернет-магазин). Чтобы при разрешение @media(min-width: 980px) получалась сетка из 4-х колонок @media(max-width: 720px) из 3-х колонок и все, что меньше, в одну колонку?

Пробую делать так:

.container {
    max-width: 980px;
    width: 95%;
    margin: 0 auto;
}
.items {
    width: inherit;
    border: 1px solid black;
    padding: 10px;
}
.item {
    width: 200px;
    height: 200px;
    border: 1px solid white;
    background-color: red;
    display: inline-block;
    vertical-align: middle;
    margin: 1.5%;
}

Вроде все работает, но тогда приходится прописывать @media через каждые 2-5 пикселей и менять margin, что вроде и логично, но неверное, как мне кажется. Пробую делать на flexbox.

.items {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

И вроде бы работает, но вылезает артефакт в виде того, что если элементов становится, например, не 6, а 8, то они раскидываются один в левую сторону, другой - в правую, что опять же логично при использовании justify-content: space-between.

Но тогда возникает вопрос: как это реализовать?

Пытаюсь сделать так, чтобы получилось так, как на картинке (от края до края на любом разрешении экрана) и менялось только количество колонок и отступы между колонками

Answer 1

Думаю тут лучше подойдёт grid-template-columns

.list {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(110px,1fr));
  
  /* Расстояние между ячейкаами в колонке */
  grid-gap: 10px;

  /* Выравниваем контент по середине ячейки */
  justify-items: center;
  
  
  border: 1px solid green;
  /* анимация, т.к. редактор не удобно изменять по размеру */
  animation: 4s accordion infinite alternate-reverse linear;
}

.item {
    width: 100px;
    height: 100px;
    border: 1px solid blue;
    background-color: red;
}

@keyframes accordion {
  from {
    width: 100vw;
  }
  
  to {
    width: 50vw;
  }
}

<div class="list">

  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>

</div>

Answer 2

Вариант на Flexbox

Для того, чтобы элементы выстраивались слева-направо, нужно использовать justify-content: flex-start; при flex-direction: row или align-items: flex-start; при flex-direction: column;.

Для создания такой сетки простым способом будет задавать дочерним элементам размер 100% / n - где n будет количество ячеек в ряду, тем самым при медиа запросах можно менять n и получать нужное кол-во.

.container {
  max-width: 980px;
  width: 95%;
  margin: 0 auto;
  border: 1px solid black;
  box-sizing: border-box;
}

.items {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  width: calc(100% + 20px);
  margin-right: -20px;
  margin-bottom: -20px;
}

.item {
  display: inline-block;
  width: calc(100% / 4 - 20px);
  border: 1px solid white;
  background-color: red;
  box-sizing: border-box;
  margin-right: 20px;
  margin-bottom: 20px;
}

.item::before {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  padding-top: 100%;
}

@media (max-width: 980px) {
  .item {
    width: calc(100% / 3 - 20px);
  }
}

@media (max-width: 720px) {
  .item {
    width: calc(100% / 2 - 20px);
  }
}

@media (max-width: 480px) {
  .items {
    width: 100%;
    margin-right: 0;
    margin-bottom: 0;
  }

  .item {
    width: calc(100%);
    margin-right: 0;
    margin-bottom: 0;
  }
  
  .item:not(:last-child) {
    margin-bottom: 20px;
  }
}

<div class="container">
  <div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

Для отступов в сетке Flexbox используется свойство gap, но я на всякий пожарный демонстрирую реализацию без этого свойства на margin.
Обратите внимание, что отступы имеют блоки .item, и такой же но отрицательный отступ имеет родительский .items.

БЛОГ НА HUSL

Как разместить элементы внутри блока на одинаковом расстоянии

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