I’ve been chasing the idea of using (abusing?) CSS grid to build a interconnected hexagonal grid, where each hexagon fits together seamlessly. An example of this would be a lot of tabletop war games, some board games (Settlers of Catan, for instance), and some computer games (I used to play The Battle for Wesnoth, it uses a system like this).

Here’s the list of requirements I had going into this:

• Must interconnect. This means a certain amount of overlap of the individual items, because we’re fitting a hexagon into a square hole.
• Must respect grid-gap, or allow for gutters of some kind. Preferably grid-gap.
• Must be flexible. I need to be able to just throw a new item into it and have it just work.
• Must be responsive. A grid that starts out at 5 across on larger screens should go down to one or two across on smaller screens.

#grid #css