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

[Drunk_Monkey]

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

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

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


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

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

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

[by chris]

.container {
  margin-top: 50px;
  border: {
    top: 1px solid lightgray;
    left: 1px solid lightgray;
  }
}

.product-card {
  padding: 50px;
  text-align: center;
  border: {
    bottom: 1px solid lightgray;
    right: 1px solid lightgray;
  }
  &:first-child {
    color: red;
  }
  &:nth-child(4n+4),
  &:last-child {
    color: green;
  }
  &:nth-last-child(-n+4) {
    // color: yellow;
  }
}