Getting Started

To build the basic 3x2 hex grid shown above, follow the steps listed below.

HTML

Include the following nested div tree in your HTML markup at the location you want to build the hex grid. Give the top level parent a unique id.

Within the div with the class .hexContainer , include a number of divs with the class .hex equal to the number of hexagonal cells in the grid (in this case 6).

HTML <div id="myHexGrid"> <div class="hexCrop"> <div class="hexContainer"> <div class="hex"></div> <div class="hex"></div> <div class="hex"></div> <div class="hex"></div> <div class="hex"></div> <div class="hex"></div> </div> </div> </div>

SCSS

Include the Hexi-Flexi Grid component files in the same directory as your main SCSS file. Within your main SCSS file, import hex-style.scss above any rules that will affect the content of the grid.

SCSS (main) @import 'path/to/hex-style.scss';

Inside of hex-style is a modular block of code that contains settings for the hex grid. Set the id selector the top of the code block to match the id of the top-level parent div.

If there will be multiple unique hex grids, duplicate this code block for each unique id.

SCSS (_hex-style.scss) #myHexGrid { $gridWidth: 20em; $gridHeight: auto; $columnCount: 3; $rowCount: 2; $hexCount: auto; $hexLayout: row; $gridOrient: vertical; $crop: none; $cropFactor: 1; $hexContent: auto; $hexSize: auto; $hexMargin: 0.5em; $hexShape: hexagon; $hexColor: #48a999; $breakpoints: none; $images: none; // ... }

Customization

The grid can be assigned custom css from inside the hex-style codeblock.

Hexi-Flexi Grid assigns unique class names to each individual column, row and cell in the hex grid.

.c-[n] targets every cell in column [n].

.r-[n] targets every cell in row [n].

.c-[n1].r-[n2] targets the cell located at column [n1], row [n2].