Getting the obvious out of the way, it would be quite easy to have the hexagons as square png masks with a transparent hexagonal shape knocked out of its center - like so:
Although I do recommend spending more than 2 minutes on it.
If you want to go the hardcore route, you could have 2 sets of 3 regular rectangles, overlayed un top of one another. Here’s a tutorial that deals with that: https://starbugstone.eu/2017/08/30/who-said-that-hexagons-with-borders-were-hard-in-web-dev/
Regarding the the staggered position - I’d suggest simply adding a subclass to every other topmost element, adding the needed margin when appropriate.
Btw, this is more a #help:design-help kind of question