Publishing My Hexagonal Grid CSS Stylesheet

import HexInputGridExample from "../../components/HexInputGridExample.astro"; import HexCoordDiagrams from "../../components/HexCoordDiagrams.astro"; I finally cleaned up the hex grid stylesheet I wrote when I was building The Atlas of Mosaics and published it as on npm. If you want a more detailed writeup of developing the round specifically, I wrote Building the Atlas of Mosaics. In that post I mentioned I was planning to publish my stylesheet as a library, and I finally got around to it. Why CSS? At the outset, we knew we needed a hex grid but beyond that we didn't have any other requirements or constraints. Though we ended up doing entirely read-only content, early on we talked about input elements, so I had to consider that when I was getting started on the round. Going for raw CSS was the easiest way to maximize interoperability with other libraries and techniques. That also explains why I didn't choose to use something like react-hexgrid, which got me started with some inspiration, but was too limited for our needs. It's implemented as an SVG-centric approach, the main limitation for us was that its Drag and Drop example made use of the CSS property, which is not well-supported - caniuse says it's around 30% of browsers today. So raw CSS is the way we get away with being able to handle legitimately arbitrary content inside each hex. For example, this hex grid is a bunch of text inputs, you can tab through in the order that you render the hexes in! On top of that, initial discussions were actually around running an infinite grid of hexagons, using raw CSS made it trivial to interop with virtualization libraries. Some more illustrative examples Just recreating some of the grids from the Red Blob Games Hexagonal Grids guide