Responsive Hexagon Layout In Pure CSS – Hexi-Flexi Grid

Hexi-Flexi Grid is an SCSS component used to render a responsive, flexible, customizable hexagon layout using CSS grid layout.

How to use it:

Import the ‘hex-style.scss’ into your project.

@import './hex-style.scss';

The HTML to create a basic hexagon layout.

<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>

Customize the hexagon layout in the ‘_hex-style.scss’.

$gridWidth:   20em;       // 'auto',(px,pt,r/em,vw/h)
$gridHeight:  auto;       // 'auto',(px,pt,r/em,vw/h)
$columnCount: 3;          // 'auto',(number)
$rowCount:    2;          // 'auto',(number)
$hexCount:    auto;       // 'auto',(number)
$hexLayout:   row;        // 'row','column','strict'
$gridOrient:  vertical;   // 'vertical','horizontal'
$crop:        none;       // 'none','crop'
$cropFactor:  1;          // (number)
$hexContent:  auto;       // 'auto','center'
$hexSize:     auto;       // 'auto',(px,pt,r/em,vw/h)
$hexMargin:   0.5em;      // (px,pt,r/em,vw/h)
$hexShape:    hexagon;    // 'hexagon','circle'
$hexColor:    #48a999;    // hexcode,rgb/a,named
$images:      none;