Как сверстать карточки товара на bootstrap, с границей как у ячеек таблицы с border-collapse: collapse?

Question

[NotLogo]

Подскажи как решить задачу:

• Верстка выдачи товаров в категории, с учетом того что кол-во товаров может быть произвольный, и к тому же нечетным кол-ву товаров к колонке
  
• Верстать нужно на bootstrap c учетом адаптива (2,3 4 — карточки в ряду, в зависимости от брейкпоинта) поэтому использовать display: tabel и table-cell не имеет смысла
  
• Не должно быть двойных границ у карточек на стыке по вертикали и горизонтали
  
• Горизонтальных и вертикальных отступов между карточками нет
  

Решил задавать границы используя nth-child, меняя формулы для разных брекпойнтов.


Ссылка на демо

Не испробовав, даже адаптив, увидел проблему на стыке границ, если карточки в последнем ряду, не кратны кол-ву колонок —



Есть ли более правильное решение задачи и почему границы не сходятся на стыке у данного варианта?

Comments

[Ankhena]

Я бы предложила дорисовывать нижний и правый бордер. А левый и верхний задать у обертки.

[NotLogo]

Ankhena W: Спасибо! Ваш вариант верный codepen.io/NotLogo/pen/rWoVvQ если напилите его в ответы на вопрос, с удовольствием отмечу его ответом

[Ankhena]

NotLogo: Правильным ответом быть приятно :) Написала.

Answer 1

[Ankhena]

Я бы предложила дорисовывать нижний и правый бордер. А левый и верхний задать у обертки.