I came across a website the other day that had a grid of hexagons with images inside them across the space where a banner or hero image would go. I was immediatly curious how or even *if* I could get the same effect with pure css and I found a way!

The source and result is below but first a couple notes about what I did. This design is CSS Grid based which I’m personally a huge fan of for the great layout potential. The hexagon structure is achieved using the CSS property clip-path. The hardest part was getting every other row to be offset and trying to do it in such a way that you could drop the CSS into any project and get the grid working just by editing the HTML. The solution I came up with is to use the transform property and translate corresponding hexes. The tricky part was selecting the right ones. First I tried using the :nth-child() selector but that wouldn’t be very extensible if someone wanted rows of different widths. The final solution was to group corresponding rows within their own <div> tags that use display: contents. This is a nifty trick that allows the row items to flow within the parent grid. I suggest reading up on that property if you haven’t.

One last note, this solution may not be responsive but I’m not sure if you could get that without a little JS or some clever @media queries but maybe I’ll make a new version to account for that in the future. That said this solution is “dynamic” (defending the title) because it’s easy to change the size of the hexagons and the number that appear in each row.