0

Как разместить элементы внутри родительского блока таким образом, чтобы расстояние между блоками пропорционально изменялось в зависимости от разрешения экрана (проще говоря сетку с товарами - а-ля интернет-магазин). Чтобы при разрешение @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.

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

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

2 ответа 2

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>

1

Вариант на 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.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.