У меня возникают сложности с расположением каталога товаров, или изображений в галерее ровно и главное адаптивно.
Какими способами я могу решить данную проблему?
2 ответа
Вот довольно удобный вариант на 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>
-
Спасибо, вы прям в grid хорошо разбираетесь, я его раньше использовал только для не стандартных блоков, когда один главный блок больше чем остальные например, но и не мог представить, что он хорошо справляется с обычной сеткой. 27 фев в 4:20
-
Как видите всё красиво встало и на любых разрешениях экрана будет адаптивно.
--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>
-
-
@OliverPatterson с display: grid я тоже знаком и вроде как там нет возможности переноса элементов на новую строку? В нём ты можешь распределить основные блоки, в том порядке, каком тебе нужно, но он не сможет адаптироваться под новые элементы. 25 фев в 10:48
-
-
@OliverPatterson спасибо, видать grid я ещё плохо знаю)). Если не против добавил твой вариант в ответ тоже. 25 фев в 11:09
-
В текущем варианте нет смысла от
grid-auto-flow: row
, это дефолтное значение. 25 фев в 12:22