Как исправить верстку в грид?

Question

[caof19]

Возникла проблема с гридами. Стоит шаблон для грида, он рассчитан, что там будет 10 элементов. Но если там будет элементов меньше, например 8, то происходит не очень красивая история. Вариант с "не добавляй туда меньше 10 элементов" - не подходит.



А именно, 8 элемент, который по шаблону должен занимать два ряда, на 10 пикселей выбивается из ряда.

Comments

[Ankhena]

И что вы хотите?
Расстояние между строк 10px. Они и торчат.

Вы можете делать нижние margin вместо gap.

[caof19]

Ankhena, что такое нижние margin и к какому элементу?

[Ankhena]

caof19,

что такое нижние margin и к какому элементу?

margin с нижней стороны блока, т.е. margin-bottom
к элементам
можно не ко всем, а только к тем, у которых должен быть нижний отступ
а gap оставьте только горизонтальный

Answer 1

[Ankhena]

Так:
https://jsfiddle.net/ge2vq61u/

Answer 2

[Александр]

добавьте в item8 margin-bottom: 50px;

Comments

[caof19]

Спасибо, это работает, но к сожалению, это не универсально.

[Александр]

caof19, к чему же вам универсальность? конечное количество элементов (10) небольшое, можно и прибегнуть к созданию велосипеда.
если всё-таки понадобится универсальность - ответ Ankhena

[caof19]

Александр, к сожалению, универсальность нужна, потому что этот грид строится (в моем случае) по данным из админки wp, а там пользователь может задать от 1 до 10 элементов