Brick Wall with Border-collapse Alternatives - html

Question

I want containers in a brick wall pattern, see image. The borders should collapse into 1px (works for tables only). Tiles should change border color during interaction. I'm seeking cleanest solution. Things I've tried:
A single table: aligns the columns, ruining brick layout.
Each row as separate table: allows border-collapse within the row only.
Margin 1px with background color: won't collapse with floated or inline-block divs. (I read margin-collapse is for vertical space only.)
My best solution (not pictured): each row is separate table with border-collapse, border around half cells (not preferred), removed top borders of all cells, added border to top of top row. Container in the containers have 1px transparent border which becomes red when tile is highlighted. I lose space to this border. I chose transparent instead of 0px to keep it consistent. The half cells aren't interactive, they're just for layout. I wish they didn't have a border so it would have a toothy look on edge.
For tables I'm using divs with display:table etc. I was hoping not to resort to canvas yet, though at some point I will for overlaying robust graphics.

Answer 1

you may relay only on 2 borders or box-shadow to avoid interaction with the container.
example with box shadow :
* {
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
}
article {
margin: 15px;
flex: 1;
display: grid;
grid-template-columns: repeat(9, 1fr);
border: 1px solid;
background: tomato;
}
div {
box-shadow: 1px 1px 0 1px;
grid-column: auto / span 2;
}
div:nth-child(10n),
div:nth-child(10n-9) {
grid-column: auto / span 1
}
<article>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</article>