Возможно я вас неправильно понял, но, возможно, вы что-то типа такого хотели сделать?
Как это работает:
Допустим, мы хотим, чтобы по умолчанию у нас 3 элемента по линии шли, каждый из них будет занимать 100%/3
ширины. Это если у нас не будет внешних отступов от элементов, если будут отступы между этими элементами, то надо будет из ширины вычитать эти отступы.
Чтобы сделать отступы, чтобы элементы друг друга отодвигали, нужно каждому не третьему элементу сделать отступы справа margin-right
, допустим 10px, это записывается так:
ul > li:not(:nth-child(3n)) {
margin-right: 10px;
}
Эта запись означает: в ul найти на первом уровне вложенности все теги li, которые не являются n*третьим ребенком.
Кроме отступов, нам нужно сделать правильную ширину, она запишется так:
ul > li:not(:nth-child(3n)) {
margin-right: 10px;
}
ul > li {
width: calc(100%/3 - 20px/3);
}
Ширина = 100% / кол-во элементов в линии - сумма всех отступов в линии / кол-во элементов в линии
Таким образом, мы в ширину вместим эти отступы, распределим эти отступы равномерно по ширине каждого элемента в линии.
На этом всё не заканчивается, нужно ещё сделать адаптивности.
Чтобы сделать 2 элемента в линии, нужно:
- Пересчитать высоту по нашему правилу
- Обнулить
margin-right
у каждого не n*третьего элемента
- Сделать
margin-right
у каждого не n*второго элемента
@media (max-width: 600px) {
ul > li {
width: calc(100%/2 - 10px/2);
}
ul > li:not(:nth-child(3n)) {
margin-right: 0;
}
ul > li:not(nth-child(2n)) {
margin-right: 10px;
}
}
И тоже самую логику надо будет сделать для элементов, когда они в линию будут идти по одному, т.е. 100%.
Как вы понимаете, то здесь явно видна логика и притом математически это всё легко описывается. Поэтому я создал CSS переменные, которые отвечают за отступ справа, и кол-во элементов в линии. И уже не придётся это всё просчитывать в голове, можно просто поменять переменную.
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 20px;
}
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
ul>li {
--marginRight: 10px;
--marginBottom: 15px;
--elements: 3;
background: gray;
padding: 10px;
margin-bottom: var(--marginBottom);
width: calc( 100% / var(--elements) - ( ((var(--elements) * var(--marginRight)) - var(--marginRight)) / var(--elements)));
}
ul>li:not(:nth-child(3n)) {
margin-right: var(--marginRight);
}
@media(max-width: 600px) {
ul>li {
--elements: 2;
}
ul>li:not(:nth-child(3n)) {
margin-right: 0;
}
ul>li:not(:nth-child(2n)) {
margin-right: var(--marginRight);
}
}
@media(max-width: 300px) {
ul>li {
--elements: 1;
}
ul>li:not(:nth-child(2n)) {
margin-right: 0;
}
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>