Как создать внутреннею решетку на css, чтобы она была динамической?

Question

[aex-svs]

Добрый день, уже 3 день бьюсь над этим решением, но ответа так и не нашел, поэтому решил задать данный вопрос...
Суть такова, необходимо отрисовать внутреннюю решетку, рисовал следующим образом - всем элементам сетки задал - нижний и правый бордер, а потом у последних 3 и у каждого 3 убрал бордер в итоге получилась решетка, но когда убавляются или добавляются элементы , соответственно сетка ломается, Вопрос заключается, как сделать так , чтобы она при динамики не ломалась?? Реально ли это сделать? сама сетка с айтемами построена на гридах

.product__use-item {
    border-bottom: 1px solid #C5C5C5;
    border-right: 1px solid #C5C5C5;
}

.product__use-item:nth-child(3n) {
    border-right: none;
}

.product__use-item:nth-last-child(-n+3) {
    border-bottom: none;
}

Comments

[Ankhena]

Просто немножко недописали nth (не всё предусмотрели)
Вот толковая статья: https://css-live.ru/articles/resheno-s-pomoshhyu-c...

[aex-svs]

Ankhena, можете подсказать решение?

Answer 1

[Саша]

aex-svs
Варианты:
1. У каждого третьего справа нет границы, у последних трех нет нижней.
Выводите ячейки всегда, а содержимое уже динамическое.
2. Задать gap:1px, background у родителя, background у ячеек.
Данный вариант "костыль" но может подойти

Comments

[Александр]

Последние N ячеек будут залиты фоном границ.

[Саша]

Александр, в обоих вариантах данный момент реализуем.

Answer 2

[Антон Шаманов]

1. border со всех сторон, справа и сверху border белый - это чтобы размеры плиток не менялись
2. контейнер с плитками имеет margin-left: -1px; margin-top: 1px; и вложен в другой контейнер который перекроет левый и нижний border плиток