1

У меня возникают сложности с расположением каталога товаров, или изображений в галерее ровно и главное адаптивно.
Какими способами я могу решить данную проблему?

2 ответа 2

1

Вот довольно удобный вариант на grid.

.grid
{
  display: grid;
  grid-template-columns: repeat(var(--column), 1fr);
  
  gap: 15px;
}

.grid > div
{
  height: 20vh;
  background-color: #DC4242;
}

@media (min-width: 600px)
{
  .grid--media { --column: 3; }
}

@media (min-width: 900px)
{
  .grid--media { --column: 4; }
}

@media (min-width: 1100px)
{
  .grid--media { --column: 5; }
}

/* for beauty */
body { margin: 10px; background-color: #1F1F1F; }
h3 { color: #909090; text-align: center; }
.grid { counter-reset: item; }
.grid > div { display: flex; align-items: center; justify-content: center; }
.grid > div::before { counter-increment: item; content: "Item " counter(item); font-size: 1.5rem; color: #FFFFFF; }
<h3>5 column</h3>
<div class="grid" style="--column: 5">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<h3>4 column</h3>
<div class="grid" style="--column: 4">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<h3>3 column</h3>
<div class="grid" style="--column: 3">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<h3>5 column + media</h3>
<div class="grid grid--media">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

2
  • Спасибо, вы прям в grid хорошо разбираетесь, я его раньше использовал только для не стандартных блоков, когда один главный блок больше чем остальные например, но и не мог представить, что он хорошо справляется с обычной сеткой. 27 фев в 4:20
  • Он и создан для сетки.. Так то) 27 фев в 9:44
1

Как видите всё красиво встало и на любых разрешениях экрана будет адаптивно. --width-three-blocks: calc(calc(100% / 3) - calc((var(--adv-width-gap) * 2) / 3)) - в этой строке тебе нужно запомнить, что 3 - это количество элементов, а 2 это количество отступов у элементов(всегда количество отступов на один меньше).
--adv-width-gap - это мы вписали расстояние 30px.
Потом просто вставляем вместо цифр в нужные места переменные вместо цифр.
Также если при 992px скажем у вас уже не 4 элемента, а 3 должно отображаться вы просто создаёте ещё пtременную на 3 элемента и вставляете через @media (max-width:992px)

Также благодаря @Oliver Patterson добавлен более универсальный способ через grid, не требующий дополнительных манипуляций.

:root {
  --adv-width-gap: 30px;
  --width-three-blocks: calc(calc(100% / 3) - calc((var(--adv-width-gap) * 2) / 3));
  --width-four-blocks: calc(calc(100% / 4) - calc((var(--adv-width-gap) * 3) / 4));
  --width-five-blocks: calc(calc(100% / 5) - calc((var(--adv-width-gap) * 4) / 5));
}

.wrapper, .wrapper2, .wrapper3 {
  width: 100%;
  display:flex;
  gap: var(--adv-width-gap);
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.item {
  background: green;
  height: 100px;
  display: block;
}
.wrapper .item {
  width: var(--width-three-blocks);
}
.wrapper2 .item {
  width: var(--width-four-blocks);
}
.wrapper3 .item {
  width: var(--width-five-blocks);
}
.wrapper-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.item1 {
  background: blue;
  height: 100px;
}
<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="wrapper2">
  <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 class="wrapper3">
  <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 class="wrapper-grid">
  <div class="item1"></div>
  <div class="item1"></div>
  <div class="item1"></div>
  <div class="item1"></div>
  <div class="item1"></div>
  <div class="item1"></div>
</div>

5
  • Не проще использовать гриды? 25 фев в 10:40
  • @OliverPatterson с display: grid я тоже знаком и вроде как там нет возможности переноса элементов на новую строку? В нём ты можешь распределить основные блоки, в том порядке, каком тебе нужно, но он не сможет адаптироваться под новые элементы. 25 фев в 10:48
  • grid-auto-* может это что-то даст?) 25 фев в 10:48
  • @OliverPatterson спасибо, видать grid я ещё плохо знаю)). Если не против добавил твой вариант в ответ тоже. 25 фев в 11:09
  • В текущем варианте нет смысла от grid-auto-flow: row, это дефолтное значение. 25 фев в 12:22

Ваш ответ

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

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