Задать вопрос
@aex-svs

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

Добрый день, уже 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;
}

6238b5b972e42469503700.jpeg6238b5c397b59204398583.jpeg6238b5e95ec92135049059.jpeg
  • Вопрос задан
  • 238 просмотров
Подписаться 1 Средний 2 комментария
Пригласить эксперта
Ответы на вопрос 2
userAlexander
@userAlexander
Верстка наше все)
aex-svs
Варианты:
1. У каждого третьего справа нет границы, у последних трех нет нижней.
Выводите ячейки всегда, а содержимое уже динамическое.
2. Задать gap:1px, background у родителя, background у ячеек.
Данный вариант "костыль" но может подойти
Ответ написан
SilenceOfWinter
@SilenceOfWinter
та еще зажигалка...
1. border со всех сторон, справа и сверху border белый - это чтобы размеры плиток не менялись
2. контейнер с плитками имеет margin-left: -1px; margin-top: 1px; и вложен в другой контейнер который перекроет левый и нижний border плиток
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы