A CSS only honeycomb grid

When I started working for Fresenius Medical, a coding challenge we often gave to interview candidates was to code a hexagonal grid. They only had to pseudo-code it, on a whiteboard. This was an interesting challenge because there are so many ways to approach it. The only classy solution I’ve seen is on the D3 frontpage. This is a pure javascript solution. But there are various CSS solutions to the problem also. I’ve finally gotten around to making my own, on codepen:

See the Pen CSS hexagon by Peter Mumford (@Peter-Mumford) on CodePen.

What I like about this is the very lean and simple markup. There is not that much CSS either. I’ve used SCSS in the codepen to reduce it even further. I also set it so the cell size, number of columns, and gap width can all be changed on the fly with SCSS variables.

Leave a Reply