How to lay out product cards on bootstrap, with a border like table cells with border-collapse: collapse?

Question

css

Please advise how to solve the problem:

• The layout of the issuance of products in the category, taking into account the fact that the number of products can be arbitrary, and besides, an odd number of products for the column
  
• You need to layout on bootstrap, taking into account the adaptive (2,3 4 - cards in a row, depending on the breakpoint), so using display: tabel and table-cell does not make sense
  
• Cards should not have double borders at the junction vertically and horizontally
  
• No horizontal or vertical padding between cards
  

I decided to set the borders using nth-child, changing the formulas for different breakpoints.
Link to the demo
Without trying, even adaptive, I saw a problem at the junction of the borders, if the cards in the last row are not a multiple of the number of columns -

Is there a more correct solution to the problem and why the borders do not converge at the junction for this option?

Answer 1

I would suggest finishing the bottom and right border. And set the left and top at the wrapper.