Need help with responsive-grid-of-hexagons?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

487 Stars 242 Forks Apache License 2.0 60 Commits 2 Opened issues


CSS responsive grid of hexagons

Services available


Need anything else?

Contributors list

# 50,236
50 commits
# 155,983
5 commits
# 31,953
1 commit

CSS and HTML responsive grid of hexagons.

View live demo

Responsive grid of hexagons demo

Flexbox vs CSS grid

This branch uses flexbox to layout the hexagons. Another version using CSS grid layout is availbale on the css-grid branch.
CSS grid has lower browser support than flexbox (see canIuse) but makes the hexagon spacing easier to understand and work with.


  • The hexagon grid is responsive according to the width of the container (
  • Hexagons keep their aspect ratio according to their width
  • The number of hexagons per row is adaptive and changes from 5 to 2 on media query break points
  • A title and short text slide in on hexagon hover and focus
  • Hexagons and can be cycled through with tab (keyboard navigation)

Text and hover effect:

The CSS for the text and hover effect is identified in the

stylesheet. You can remove it completely or change the hover effect, font, font-size...

Changing the number of hexagons per row:

The width of the

elements defines the number of hexagons per row. The CSS properties that need to be changed are all in the media queries under the
Each media query changes the number of hexagons per row.

To change the number of hexagons per row, you need to:

Width of

Customize the with of the

elements with: ``` w = width of the .hex elements in percent x = the number of hexagons you want on the odd rows (1st, 3rd, 5th...)

w = 100 / x ```

Example for 8 hexagons on odd rows (this means there will be 7 hexagons on even rows):

w = 100 / 8 = 12.5%

Indent even rows

The even rows (2nd, 4th,6th...) are indented with

on the first hexagon of even rows.

The selector:
You can select that hexagon with the

selector (more info on on the
pseudo-class on MDN). To determine the selector, you can use this rule:

x = the number of hexagons on odd rows(1st, 3rd, 5th...) Y = the number of hexagons on even rows(2nd, 4th, 6th...) a = x + y b = x + 1

Example for 8 hexagons on odd rows (this means there will be 7 hexagons on even rows): ``` x = 8 y = 7 a = 8 + 7 = 15 b = 8 + 1 = 9

The selector is : .hex:nth-child(15n+9) ```

Value of margin-left:
The value of margin left is half the width of one hexagon so for 8 hexagons on odd row : ``` with of hexagons = 12.5% (see "width of .hex") margin-left = 12.5 / 2 = 6.25%


Created by web-tiki

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.