How to make such a wonderful grid adaptive? Or how to remove the BORDER from the extreme blocks?

Question

css

Friends! Is there a chance to make such a structure adaptive AT ALL? What would BORDER extreme blocks absent.
I'm still stuck on the fixed-width version, with the css property :nth-child(1) 2 3 4 and so on and so forth. But if you remove the width of the parent and start reducing it, everything collapses, there is adaptation, but there is trouble with the borders, I don’t know how to remove them from the edge blocks, what should I do? :( PAMAGITIII!!
Here is the grid that I want to make adaptive:

Here is an example I made up on codepin
https://codepen.io/Cheizer/pen/EQvXer
Tell me where to dig please, maybe like calc property css or something else? How to remove BORDER from end blocks?

Answer 1

Wrap your table in a div that will be overflow:hidden
Set the table width, height 100% + border-width and translate X and Y to the -border -width
https://jsfiddle.net/5ynfpn3n/
but it's easier with table
ps corrected the first post