Repository files navigation

View live demo

This branch usesflexbox to layout the hexagons. Another version usingCSS grid layout is availbale on thecss-grid branch.
CSS grid has lower browser support than flexbox (seecanIuse) but makes the hexagon spacing easier to understand and work with.

• The hexagon grid is responsive according to the width of the container (#hexGrid)
• 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)

The CSS for the text and hover effect is identified in thehexagons.css stylesheet. You can remove it completely or change the hover effect, font, font-size...

The width of the.hex elements defines the number of hexagons per row. The CSS properties that need to be changed are all in the media queries under theHEXAGON SIZING AND EVEN ROW INDENTATION comment.
Each media query changes the number of hexagons per row.

Tochange the number of hexagons per row, you need to:

Customize the with of the.hex elements with:

w = width of the .hex elements in percentx = 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%

The even rows (2nd, 4th,6th...) are indented withmargin-left on the first hexagon of even rows.

The selector:
You can select that hexagon with the.hex:nth-child(an+b) selector (more info on on thenth-child() pseudo-class onMDN). To determine the selector, you can use this rule:

.hex:nth-child(an+b)x = the number of hexagons on odd rows(1st, 3rd, 5th...)Y = the number of hexagons on even rows(2nd, 4th, 6th...)a = x + yb = x + 1

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

x = 8y = 7a = 8 + 7 = 15b = 8 + 1 = 9The selector is : .hex:nth-child(15n+9)

Value of margin-left:
The value of margin left ishalf 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 byweb-tiki