The Bee Keeper’s Guide to Hexagon Grids: JS Libraries, CSS Tricks, and One Man’s Obsession

My hexagon obsession (full disclosure)

I have been obsessed with hexagons for years. Like, unreasonably obsessed. My logo is literally a hexagon. People in my life have started calling me the bee keeper, and honestly I’ve stopped arguing about it. So yeah, when it came to picking a topic I actually care about — this is it. Six sides of pure geometric perfection, and I will die on this hill LOL

The obsession eventually went full circle (or full hexagon, whatever) and I built my own thing: cubicFUSION Hexagon Grid, a fully configurable honeycomb grid widget for Elementor. It supports four content sources — manual cells, WordPress media galleries, post/CPT queries, and user/team grids — with a visual pattern painter that lets you literally draw shapes out of hexes like a bitmap editor.

There’s animated stat counters, seven hover effects, entry animations, pointy-top and flat-top orientation, per-cell style overrides, the honeycomb shape itself is pure CSS, though reflow and auto-fit are handled by a small JavaScript layer — no bloated dependencies, just a lean handler on top of Elementor’s own runtime. It’s basically everything I ever wanted to just drop into a WordPress page without wrestling with code.

Hexagons are having a moment!

Hexagons are having a moment, and honestly? It makes total sense. Whether you’re building a strategy game board, a honeycomb image gallery, an interactive data visualization, or just want something that looks way cooler than boring old squares, hex grids deliver that geometric satisfaction that rectangles just can’t touch. Six sides, perfect tessellation, and zero awkward dead zones between tiles — they’re basically the platonic ideal of grid layout design.

The catch? The math is a little weird at first. Unlike square grids where x and y coordinates map to rows and columns in a dead-obvious way, hexagons have three natural axes, two orientation modes (pointy-top vs flat-top), and an offset problem that trips up every developer at least once. The good news is the JavaScript ecosystem has matured a lot here, and modern CSS can handle the visual side without any script at all.

This guide covers everything: the best JS libraries for hex grid logic, the cleanest CSS techniques for rendering those shapes, a complete working example you can drop straight into a project, and a decision guide that tells you exactly which approach fits your use case. Let’s get into it.

Why Hexagon Grids?

Before we get into the code, it’s worth understanding why hexagons are worth the extra setup. This isn’t just a styling trend — there are genuine mathematical advantages that make hex grids the right architectural choice for certain applications.

• Equidistant neighbors — Every adjacent hexagon is exactly the same distance from its center as every other neighbor. In a square grid, diagonal neighbors are roughly 1.41x farther than side neighbors. This matters enormously for game movement, pathfinding, and data visualization where distance should feel consistent.
• Perfect tessellation — Hexagons tile without gaps, just like squares and triangles. But they cover a 2D plane more efficiently than squares when the goal is packing maximum area coverage around a central point.
• Six-direction navigation — Six directions feel more natural than four cardinal directions for most spatial applications. Games feel smoother, movement feels more organic, and angular data relationships map more intuitively.
• Visual distinctiveness — Hexagonal UI layouts catch the eye and stand out immediately against a sea of rectangular card grids and standard Bootstrap layouts. For galleries, portfolios, and dashboards, that differentiation is valuable.

Use cases range from board games and tactical simulators to geographic mapping (many GIS tools use hex grids for spatial analysis), honeycomb image galleries, interactive data cells, and even generative art. The moment you need any kind of spatial relationship between elements that’s more complex than a flat list, hexagons start making sense.

The Two Orientations You Need to Know

Every hex grid conversation starts here because choosing the wrong orientation will haunt you. Hexagons have two modes, and they affect your math, your CSS polygon points, and how you offset rows and columns.

• Pointy-top — The hexagon’s tip points straight up. Rows stagger horizontally. This is what most people picture when they think “hexagon.” The clip-path polygon starts at the top center.
• Flat-top — The hexagon has a flat horizontal edge at the top. Columns stagger vertically. Common in board games like Civilization. The clip-path polygon starts at the top left edge.

Both are equally valid. Pick one and stick with it throughout your project — mixing them is a nightmare. Most web UI work defaults to pointy-top because it reads more naturally in a left-to-right horizontal layout. Most JS libraries support both modes via a simple configuration flag.

The JavaScript Libraries Worth Your Time

The good news is you don’t have to derive the axial coordinate math yourself. Several solid libraries handle the heavy lifting — coordinate systems, neighbor lookups, pathfinding, grid traversal, and shape generation — so you can focus on building the actual thing you want to build.

Honeycomb-grid — The Clear Winner

Honeycomb-grid is the most complete, actively maintained hexagon library in the JavaScript ecosystem right now. It’s written in TypeScript with full type definitions, works in both Node (>=16) and modern browsers, and is heavily inspired by Red Blob Games’ definitive hexagonal grid guide — which means the math is correct and well-documented. Install it via npm or drop it in via unpkg/jsdelivr.

Basic setup to create a rectangular 10×10 grid and log all hex positions:

Honeycomb doesn’t render anything itself — it’s pure math and coordinate logic. You connect it to SVG, canvas, or WebGL yourself. That’s actually a feature, not a bug: it stays lightweight and framework-agnostic while giving you a clean coordinate API to drive any rendering system you want.

Perfect for: Game boards, pathfinding, map generation, data visualization, any project where hex coordinate math is the complexity you’re solving rather than just the visual shape.

hex-grid.js — Barebones Coordinate Math

hex-grid.js is a leaner, more minimal take on the same Red Blob Games math. No TypeScript, no fancy traversal API, just the raw axial and cube coordinate functions you need. If you’re working in a vanilla JS environment and need something even lighter than Honeycomb, this is a reasonable option — though it hasn’t seen active maintenance recently, so treat it as a math utility you can audit and own rather than a dependency you should keep updating.

Hexagon.js — Canvas Drawing, Flat-top Only

Hexagon.js bundles both coordinate math and canvas rendering together. It’s a plug-and-draw solution that handles the shape drawing for you, which is convenient for quick prototypes. The catch: it only supports flat-top hexagons and is not actively maintained. Fine for a small internal demo — not ideal if you’re building something that needs to evolve.

HoneyCombLayoutJs — HTML Element Positioning

HoneyCombLayoutJs takes a completely different approach from the others. Instead of dealing with canvas or SVG at all, it positions standard HTML elements (divs, images, cards) into a honeycomb pattern. It computes all the offset math and applies inline positioning so your markup stays clean. If you’re building an image gallery or a content card layout and you want the honeycomb shape without touching canvas, this one’s your shortcut.

Red Blob Games Reference — Not a Library, But Read It First

Amit Patel’s hexagonal grid guide at Red Blob Games is the canonical resource for understanding hex grid math. Every serious library references it. If you’re going to build anything beyond a pure CSS honeycomb layout, spend 20 minutes reading this first — it covers cube coordinates, offset systems, distance calculations, and rotation. You’ll avoid months of debugging weird edge cases.

CSS Approaches: Pure Shape, No Script

If all you need is the visual shape — a gallery grid, a decorative pattern, some UI cards in a honeycomb arrangement — you don’t need JavaScript at all. Modern CSS is surprisingly capable here. Three main techniques are worth knowing.

clip-path: polygon() — The Modern Favourite

This is the cleanest approach available right now. clip-path clips any HTML element into an arbitrary polygon shape using percentage-based coordinates. No hacks, no transforms, no extra wrappers. Browser support is excellent across all modern engines.

One important heads-up: the clipped area outside the polygon boundary is no longer interactive — pointer events pass straight through it. If you’re putting buttons or links inside hexagon cells, test your click targets carefully on touch devices.

CSS Grid + nth-child Offset

For a full honeycomb layout, you combine clip-path shapes with CSS Grid and a margin-left (or translate) shift on every other row using nth-child selectors. This is the pattern used by the popular responsive hexagon grid CSS solutions on CSS Script.

shape-outside + float (Legacy Approach)

The shape-outside CSS property can make text flow around hexagon shapes when combined with floats. It’s clever but float-based, which means fragile layout behavior and a steep debugging curve. It’s also not supported in as many contexts as clip-path. Skip it for new projects unless you specifically need text wrapping around a hex shape — and even then, consider whether a simpler layout might serve the purpose better.

Comparison: JS Libraries vs CSS Approaches

Approach	Best For	Handles Logic?	Renders Itself?	Dependencies
Honeycomb-grid	Games, pathfinding, data vis	Yes (full coordinate API)	No (bring your own renderer)	npm package
hex-grid.js	Quick vanilla math utility	Yes (basic)	No	Standalone JS
Hexagon.js	Flat-top canvas sketches	Partial	Yes (canvas)	Standalone JS
HoneyCombLayoutJs	HTML element grids, galleries	Layout only	Yes (DOM positioning)	Standalone JS
clip-path CSS	Visual shape, no logic needed	No	Yes	None
CSS Grid + nth-child	Responsive UI honeycomb layouts	No	Yes	None

Pure CSS Honeycomb Layout Example

Here’s a complete, copy-pasteable honeycomb grid in pure CSS — no JavaScript required. Eight cells, two staggered rows, hover effects. Drop this straight into your project and swap out colors and content.

That’s it — zero JavaScript, eight hexes, hover animations, staggered rows. The key numbers to understand: aspect-ratio: 0.866 comes from the mathematical ratio of a regular hexagon’s width to height (√3/2 ≈ 0.866), and the negative margin-bottom creates the vertical overlap that makes rows lock together into a true honeycomb.

Canvas Hex Grid with Click Detection — Simple JS Example

When you need interactivity beyond hover effects — click events, dynamic state per cell, pathfinding, or data binding — canvas is the right tool. This example renders a full pointy-top hex grid on an HTML canvas with hover highlighting and click detection, no external dependencies, roughly 70 lines of code.

Save hexgrid.js next to the HTML file and open it in a browser. You get a 9×7 interactive hex grid: hover to highlight, click to toggle selection state (purple), move the mouse away and everything resets. The hit test function is a fast approximation that works well for all practical interactive use cases.

Honeycomb-grid with SVG Rendering — Production Pattern

For anything beyond a quick prototype — especially if you need text inside cells, tooltips, accessibility, or React/Vue integration — SVG is a better rendering target than canvas. Here’s the pattern for wiring honeycomb-grid to an SVG element.

SVG polygons are real DOM elements, so they get hover states via CSS, they respond to pointer-events correctly, screen readers can see them if you add aria attributes, and they scale crisply at any resolution. For a production data visualization or interactive map, this is the approach you want.

Coordinate Systems: The Part Everyone Gets Wrong

If you’re doing anything beyond pure visual rendering — neighbor lookups, distance calculations, pathfinding, or storing per-cell data — you need to understand hex coordinate systems. The short version:

• Axial coordinates (q, r) — Two axes at 60 degrees. This is what Honeycomb-grid uses by default. Clean, efficient, and the best choice for storage and calculation.
• Cube coordinates (q, r, s) — Three axes where q+r+s=0 always. Conceptually clearer and makes neighbor/distance math trivially simple. Most algorithms are easiest in cube form.
• Offset coordinates (col, row) — Looks like a regular grid with every other row shifted. This is what our canvas example uses visually, and it feels intuitive — but doing math in offset coordinates is painful. Convert to cube for calculations, then convert back.

The golden rule: use offset coords for display and user-facing stuff (column 3, row 5 is easy to communicate), use cube/axial coords for all internal logic and algorithms. Honeycomb-grid handles this conversion internally, which is one of the big reasons it’s worth using.

Quick Decision Guide

• You want a honeycomb image gallery or card layout → Pure CSS with clip-path + flexbox offset. No JS needed, fully responsive, easy to maintain.
• You need click events and basic interactivity on hex cells → Vanilla canvas example above. Self-contained, no dependencies, easy to customize.
• You’re building a game, strategy board, or pathfinding demo → honeycomb-grid for the math, SVG or canvas for rendering. Don’t try to hand-roll axial coordinate math.
• You need hex grids in React or Vue with full component integration → Honeycomb-grid for logic + SVG rendering inside your component. The corners API gives you everything you need to generate polygon points.
• You just want to understand the math before committing to a library → Read Red Blob Games first. Seriously. One hour there saves ten hours debugging.
• You need to position regular HTML elements (divs, images) in a hex pattern → HoneyCombLayoutJs handles the DOM math for you without canvas or SVG.

FAQ