
Building a Hexagonal Grid in CSS - indentit
https://ninjarockstar.dev/css-hex-grids/
======
josephwegner
This is a must read if you're working with hex grids:
[https://www.redblobgames.com/grids/hexagons/](https://www.redblobgames.com/grids/hexagons/)

~~~
jgallag8
Thanks for posting this, it was fascinating! I had to implement a hex grid
recently, so when I started reading through this page and seeing some of the
same things I had thought about, I thought I wouldn't find much that was new.
I couldn't have been more wrong!

------
danellis
I see a lot of convoluted CSS things like this. Is there not much awareness of
SVG in the webdev community, or is there some other reason people don't want
to use it?

~~~
chrisshroba
If you wanted arbitrary HTML content in the hexagons, would you be able to use
SVG? I know you could hack together similar output since SVG supports images,
links, text formatting, etc., but I can see people liking the idea of the
hexagonal containers being plain divs that you can put whatever content you
want into.

~~~
nybble41
You can put arbitrary HTML elements inside an SVG element embedded in an HTML
page:

[https://developer.mozilla.org/en-
US/docs/Web/SVG/Element/for...](https://developer.mozilla.org/en-
US/docs/Web/SVG/Element/foreignObject)

~~~
chryton
I wonder what the accessibility for html in svg is like. But really, isn't
this just an iframe with a different name?

~~~
chrismorgan
No. An iframe is a separate browsing context which as a developer you can’t
interact with perfectly, and is segregated from the rest as a user, which has
implications on keyboard interactivity especially. Essentially, <iframe> is an
accessibility headache. <foreignObject> is just the opposite of <svg>, so it’s
no trouble at all.

------
mmanfrin
Oooh, nice.

I have worked with hexes in little side project games, it was a difficult
process and I went through a phase of trying to home-roll canvas drawing of
hexes (and making some interesting looking bugs). I ended up using a js
library (Konva / [https://konvajs.org/](https://konvajs.org/)) which was
pretty easy to implement.

One completed (albeit ugly) project was an implementation of a minigame I
played in Magnum Opus:

[https://game.manfrincdn.com/#/](https://game.manfrincdn.com/#/)

It's been a little project kicking around that I want to make a hex game
engine of sorts in Vue. The difficult part I keep running in to is connecting
the state of the engine (in vue) with the state of the canvas (outside). I've
ended up often hitting lower level APIs to watch/update/rerender parts, but at
that point I feel like I end up reimplementing parts of vue within itself, and
that nagging 'you are missing an obvious solution' worm starts up.

A pure CSS approach would make this a lot simpler, because there'd be no need
to do any manual wiring up of state to canvas state, you'd just let vue handle
that cycle because that's its core competency.

~~~
amitp
Vue is pretty good at generating SVG (I use Vue+SVG on
[https://www.redblobgames.com/grids/hexagons/](https://www.redblobgames.com/grids/hexagons/))
but there's a trick for making it work with Canvas too.
[https://simblob.blogspot.com/2018/03/using-vue-with-
canvas.h...](https://simblob.blogspot.com/2018/03/using-vue-with-canvas.html)
— it will make the canvas drawing function depend on the right data in Vue, so
that if any of that data changes, it re-draws the canvas automatically.

~~~
mmanfrin
Oh excellent, thank you, I didn't know you had written about hexes + vue --
your site has been absolutely invaluable to me and is one of the primest
examples of visualization done well.

One problem I remember running in to (drawing hexes) is that the redraw of one
hex overwrote what had been drawn in another, causing corners of the bounding
box of a hex to clear its neighbors. Did you run in to any issues like that,
or was that likely just a quirk of how I coded it (I am amateur with canvas,
so it's a likely cause).

~~~
amitp
There are some gotchas when using sprites/images for hexagons. 1. The bounding
boxes overlap, so you'll want to make sure that the sprites have transparent
corners so that they don't overwrite what's in the next hexagon. 2. The images
won't be exactly regular (equal sided) hexagons because regular hexagons have
an irrational side width or height. The image size will be rounded off to the
nearest pixel. You'll need to adjust for this in your hexagon calculations,
either shrinking or expanding one of the axes a tiny bit so that both axes are
integer sized. For example if your hexagon spacing is 173.20508 x 150 then
you'll change your spacing to be 173 x 150, or whatever matches your image
size.

------
greencore
Impressive! It's interesting for me if such grade CSS developers get same
compensation as their JavaScript counterparts.

~~~
lecarore
I think not, because despite the high quality of the pure CSS result, there's
probably a js lib out there that will get the same result for a few hundred
extra kilobytes in the bundle. But knowing CSS is still very useful as a
skill, it's usually your "moat" that makes it hard for backend devs to do your
work while you're on vacation.

~~~
antigirl
They shouldn’t be doing frontend work. I’d argue frontend tooling and
paradigms are more complicated than backend now.

------
pugworthy
Kind of a nostalgia thing to see this, as one of my earliest answers on
gamedev stack was about creating a hex map (See
[https://gamedev.stackexchange.com/questions/6382/how-to-
crea...](https://gamedev.stackexchange.com/questions/6382/how-to-create-a-
hexagon-world-map-in-php-from-a-database-for-a-browser-based-str))

I cheated and used hex-shaped png files but looking back using CSS to just
auto-shape the PNG would be good.

That said, if you ARE using textures in the hexes and you'd like to actually
tile them, you'll have to explicitly design an image that will tile. So you
might as well just create hex shaped images like this and forget getting too
fancy.

~~~
pugworthy
So there's one trick that's kind of cool using PNG images (with transparency)
for your tiles. You can have parts of the image that actually extend out of
the tile. So a tree can extend off the top of the tile in a pseudo-isometric
style. Or a castle, or a mountain, or anything.

------
bynormous
PSA: don't open this on Safari on a Mac book Pro, it'll either take a while to
load or it'll freeze your computer if you have other heavy processes running.
Chrome works fine.

------
juanca
I would like to see this where each edge is also uniquely addressable.

------
cheeaun
This totally reminded me of Tantek's site
[http://tantek.com/map.html](http://tantek.com/map.html)

Wayback:
[http://web.archive.org/web/20020321021851/http://tantek.com/...](http://web.archive.org/web/20020321021851/http://tantek.com/map.html)

------
waisbrot
Why would you make this responsive? It doesn't make sense for any games to
have the map/board be different based on window-size.

------
_Microft
I ran into the problem too that CSS-counters are strings and not integers. Can
anyone explain the reasoning? It's understandable that the displayed value is
a string but the (sub)counters themselves could as well been done as integers
imo.

------
CGamesPlay
Can anybody explain to me why I would use the CSS grid to accomplish this and
not negative margins on inline divs? The latter is how I immediately guessed
that this would be implemented. What would be the advantages of the grid
method?

~~~
tln
Maybe the responsiveness? In a real use case I think you'd want to have a set
grid size so responsiveness seems like an odd goal.

------
terrycody
Sry noob here, but are there any spaces you have to use this hexagonal grid to
solve things?

~~~
tripzilch
Accessibility for people with hexagonal monitors.

------
gerdesj
I'm a bystander that ploughed through quite a lot of text regarding one case.

How do you do ngon grids in CSS?

~~~
emmanueloga_
I'm not sure if you are joking, but the answer is: you don't :-)

N-gon grids don't make sense for N other than 3, 4, and 6 [1]. N=4 is easy,
N=6 is in the OP. I suspect one could find a similar "css trick" for N=3.

1:
[https://en.wikipedia.org/wiki/List_of_regular_polytopes_and_...](https://en.wikipedia.org/wiki/List_of_regular_polytopes_and_compounds#Euclidean_tilings)

~~~
bobbylarrybobby
Don’t forget about the 15 pentagonal tilings!
[https://en.wikipedia.org/wiki/Pentagonal_tiling](https://en.wikipedia.org/wiki/Pentagonal_tiling)

~~~
amitp
Also cool: the last one wasn't discovered until 2015.

