Avoiding duplicate borders on divs

I am wondering if anyone can point me in the right direction as to hwo to achieve something similar to this, in that the large squares fit nicely in their containing div, with only a single pixel border between them, above and/or below.

I’ve tried several things, including an attempt t displaying my
divs (which are generated dynamically) as list items, and trying to apply :nth-child css rules, to no avail. It’s not just that I coudln’t achieve the desired effect I was looking for with teh :nth-child method—I couldn’t get it to work at all.

I was wondering if there was a method that utilized the same sort of “gutter-sizing” that masonry uses.

I’m a beginners when it comes to CSS, so i welcome anyne pointing me in the right direction.

Thansk in advance!