Building a Hexagonal Grid Using CSS Grid
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. The end result I’m going to break down how this works step by step, but here’s the end result I was able to come up with. The article list for this website actually uses a version of this as well. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 HTML Let’s break down what the html for this looks like, and then we’ll get into how the grid is set up. One of the requirements was flexibility, and part of that was making sure that there wasn’t a lot of complicated markup involved. Also, CSS grid requires us to have pretty flat markup, as all of our grid items have to be siblings right now. Sub-grid will make this not a requirement, but it’s not quite there yet and this proved to not be an issue anyway. 1 2 … As you can see, we have a pretty standard list going here. We do need an extra content in order to pull off the look we’re going for; this is due to needing to force an aspect ratio for these hexagons, as you’ll see when we get into the CSS. If you’re curious about forcing ratios in CSS, this is a good article to check out. CSS Alright, let’s get into how this crazy grid system works. My first stab at this explored trying to figure out an auto placement scheme, but that quickly became a dead end as I realized that one of my requirements, interconnecting hexagons, was going to prevent any sort of automatic placement, at least from my understanding of grid. CSS grids are super interesting in that they really don’t care if there’s an element already occupying the space that you tell them to go to, so if you tell multiple elements to occupy the same grid cell they will happily do that, but you have to explicitly tell the grid what elements you need to overlap, so auto placement was a no-go. Once I figured that out, I moved into figuring out what my grid needed to actually look like. This proved to be far more challenging than I expected. » Read More
Like to keep reading?
This article first appeared on ninjarockstar.dev. If you'd like to keep reading, follow the white rabbit.