CSS responsive grid of hexagons
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 CSS for the text and hover effect is identified in the
hexagons.cssstylesheet. You can remove it completely or change the hover effect, font, font-size...
The width of the
.hexelements defines the number of hexagons per row. The CSS properties that need to be changed are all in the media queries under the
HEXAGON SIZING AND EVEN ROW INDENTATIONcomment.
To change the number of hexagons per row, you need to:
Customize the with of the
.hexelements 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%
The even rows (2nd, 4th,6th...) are indented with
margin-lefton the first hexagon of even rows.
You can select that hexagon with the
.hex:nth-child(an+b)selector (more info on on the
nth-child()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