Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

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 class="hex"></div>
      <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 class="hex"></div>
      <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 class="hex"></div>
      <div class="hex"></div>
      <div class="hex"></div>
      <div class="hex"></div>
    </div>
  </div>
</div>
              
            
!

CSS

              
                // From Github: https://github.com/vmcreative/Hexi-Flexi-Grid
// Author: @vmcreative
// 

/// Hexi-Flexi Grid is an SCSS component, built on the CSS Grid layout, that creates a hexagonal lattice. The mixin includes a number of customizeable settings to control the size, layout and look of the hex grid. 
/// @author vmcreative
/// @link https://vmcreative.github.io/Hexi-Flexi-Grid/

/// Compute the fr of the vertical direction
/// @param {Number} $l
/// @param {Number} $c
/// @return {Number}
@function vfr($l, $c) {
    @return (($l / (($c * 3) + 1)) * 1.73);
}

/// Compute the fr of the horizontal direction
/// @param {Number} $l
/// @param {Number} $c
/// @return {Number}
@function hfr($l, $c) {
    @return (($l / (($c * 2) + 1)) * .578);
}

/// Grid horizontal height
/// @param {Number} $gridWidth - Set the width of the hex grid.
/// @param {Number} $rowCount - Set the number of rows in the hex grid.
/// @param {Number} $columnCount - Set the number of columns in the hex grid.
/// @return {Number}
@function hGridHeight($gridWidth, $rowCount, $columnCount) {
    @return hrf($gridWidth, $columnCount) * (($rowCount * 3) + 1);
}

/// Grid horizontal width
/// @param {Number} $gridHeight - Set the height of the hex grid.
/// @param {Number} $rowCount - Set the number of rows in the hex grid.
/// @param {Number} $columnCount - Set the number of columns in the hex grid.
/// @return {Number}
@function hGridWidth($gridHeight, $rowCount, $columnCount) {
    @return vfr($gridHeight, $rowCount) * (($columnCount * 2) + 1);
}

/// Grid vertical hegiht
/// @param {Number} $gridWidth - Set the width of the hex grid.
/// @param {Number} $rowCount - Set the number of rows in the hex grid.
/// @param {Number} $columnCount - Set the number of columns in the hex grid.
/// @return {Number}
@function vGridHeight($gridWidth, $rowCount, $columnCount) {
    @return vfr($gridWidth, $columnCount) * (($rowCount * 2) + 1);
}

/// Grid vertical width
/// @param {Number} $gridHeight - Set the height of the hex grid.
/// @param {Number} $rowCount - Set the number of rows in the hex grid.
/// @param {Number} $columnCount - Set the number of columns in the hex grid.
/// @return {Number}
@function vGridWidth($gridHeight, $rowCount, $columnCount) {
    @return hfr($gridHeight, $rowCount) * (($columnCount * 3) + 1);
}

/// @param {Number} $num
/// @return {Number}
@function hexRatio($num) {
    @return $num * 1.156;
}

/// @param {Number} $num
/// @return {Number}
@function hexRatioInv($num) {
    @return $num * .865;
}

/// @param {Number} $num
/// @param {Number} $pos
/// @return {Number}
@function increment($num, $pos) {
    @for $i from 1 to $num {
        $pos: $pos + 2;
    }
    @return $pos;
}

/// Hex wrapper
/// @param {Number} $gridWidth - Set the width of the hex grid.
/// @param {Number} $gridHeight - Set the height of the hex grid.
/// @param {String} $gridOrient - Set the orientation in which the grid cells will align.
/// @param {Number} $rowCount - Set the number of rows in the hex grid.
/// @param {Number} $columnCount - Set the number of columns in the hex grid.
@mixin hexWrapper($gridWidth, $gridHeight, $gridOrient, $rowCount, $columnCount) {
    @if $gridOrient == horizontal {
        @if $gridHeight == auto {
            $gridHeight: hGridHeight($gridWidth, $rowCount, $columnCount)
        } @else if $gridWidth == auto {
            $gridWidth: hGridWidth($gridHeight, $rowCount, $columnCount)
        }
    } @else if $gridOrient == vertical {
        @if $gridHeight == auto {
            $gridHeight: vGridHeight($gridWidth, $rowCount, $columnCount)
        } @else if $gridWidth == auto {
            $gridWidth: vGridWidth($gridHeight, $rowCount, $columnCount)
        }
    }

    height: $gridHeight;
    width: $gridWidth;
}

/// Hex crop
/// @param {String} $crop - Set whether the grid will be rectangularly cropped.
/// @param {Number} $cropFactor - Set the amount the grid will be scaled when it is cropped.
@mixin hexCrop($crop, $cropFactor) {
    position: relative;
    @if $crop == none {
        overflow: visible;
    } @else if $crop = crop {
        overflow: hidden;
        .hexContainer {
            transform: scale($cropFactor);
        }
    }
}

/// Hex style
/// @param {String} $hexShape - Set the shape of the clip-mask on the cells.
/// @param {String} $gridOrient - Set the orientation in which the grid cells will align.
/// @param {String} $hexContent - Set the behavior of the cell content.
/// @param {String} $hexColor - Set the background color of the cells.
/// @param {Number} $hexMargin - Set the size of the margins on the cells.
/// @param {Number} $hexSize - Set the size of the cells.
@mixin hexStyle($hexShape, $gridOrient, $hexContent, $hexColor, $hexMargin, $hexSize){
  @if $hexContent == center and $hexSize == auto {height: 100%; width: 100%;}
  @if $hexShape == circle {
    -webkit-clip-path: circle(46% at 50% 50%);
    clip-path: circle(46% at 50% 50%);
    @if $hexContent == center and $hexSize != auto {
      @if $gridOrient == vertical {
        height: $hexSize; width: hexRatio($hexSize)}
      @else if $gridOrient == horizontal {
        height: hexRatio($hexSize); width: $hexSize}
      }
    }
  @else if $hexShape == hexagon {
    @if $gridOrient == vertical {
      @if $hexContent == center and $hexSize != auto {
        height: $hexSize; width: hexRatio($hexSize)}
      -webkit-clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
      clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);}
    @else if $gridOrient == horizontal {
      @if $hexContent == center and $hexSize != auto  {height: hexRatio($hexSize); width: $hexSize}
      -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);}
  }
  background-color: $hexColor;
  background-size: cover;
  @if $gridOrient == vertical {margin: (hexRatioInv($hexMargin)) $hexMargin}
  @else if $gridOrient == horizontal {margin: $hexMargin (hexRatioInv($hexMargin))}
}

/// Hex container
/// @param {Number} $gridWidth - Set the width of the hex grid. Value: `auto` || `<length>`
/// @param {Number} $gridHeight - Set the height of the hex grid. Value: `auto` || `<length>`
/// @param {String} $gridOrient - Set the orientation in which the grid cells will align. Value: `vertical` || `horizontal`
/// @param {Number} $columnCount - Set the number of columns in the hex grid. Value: `auto` || `number`
/// @param {String} $images - Set a list of files to be passed to the hex cells as background images. The files will be added to the grid according to the order specified by `$gridLayout`.
/// @param {Number} $rowCount - Set the number of rows in the hex grid. Value: `auto` || `number`
/// @param {String} $hexLayout - Set the direction the cells will populate the grid. Value: `row` || `column`
/// @param {String} $hexContent - Set the behavior of the cell content. Value: `auto` || `center`
/// @param {String} $hexShape - Set the shape of the clip-mask on the cells. Value: `hexagon` || `circle`
/// @param {String} $hexColor - Set the background color of the cells. Value: `color`
/// @param {Number} $hexMargin - Set the size of the margins on the cells. Value: number
/// @param {Number} $hexCount - Set the number of hex cells in the hex grid. Value: `auto` || `number`
/// @param {Number} $hexSize - Set the size of the cells.Value: `auto` || `number`
@mixin hexContainer(
    $gridWidth,
    $gridHeight,
    $gridOrient,
    $columnCount, 
    $images,$rowCount,
    $hexLayout,
    $hexContent,
    $hexShape,
    $hexColor,
    $hexMargin,
    $hexCount,
    $hexSize) {
    display: grid;
    justify-items: $hexContent;
    align-items: $hexContent;

    @if $rowCount == auto {
        $l: ceil($hexCount / $columnCount);
        $rowCount: $l;
    } @else if $columnCount == auto {
        $l: ceil($hexCount / $rowCount);
        $columnCount: $l;
    } @else if $hexCount == auto {
        $hexCount: $rowCount * $columnCount;
    }

    @if $gridOrient == horizontal {
        @if $gridHeight == auto {
            $gridHeight: hGridHeight($gridWidth, $rowCount, $columnCount)
        } @else if $gridWidth == auto {
            $gridWidth: hGridWidth($gridHeight, $rowCount, $columnCount)
        }
    } @else if $gridOrient == vertical {
        @if $gridHeight == auto {
            $gridHeight: vGridHeight($gridWidth, $rowCount, $columnCount)
        } @else if $gridWidth == auto {
            $gridWidth: vGridWidth($gridHeight, $rowCount, $columnCount)
        }
    }
    height: $gridHeight;
    width: $gridWidth;
    @include gridTemplate($gridOrient, $columnCount, $rowCount, $gridWidth, $hexCount);
    @include layout($columnCount, $rowCount, $hexLayout, $gridOrient, $hexCount);
    @include imageAssigner($images, $hexCount, $hexLayout);
    .hex {
        @include hexStyle($hexShape, $gridOrient, $hexContent, $hexColor, $hexMargin, $hexSize);
    }
}

/// Grid template
/// @param {String} $gridOrient - Set the orientation in which the grid cells will align. Value: `vertical` || `horizontal`
/// @param {Number} $columnCount - Set the number of columns in the hex grid. Value: `auto` || `number`
/// @param {Number} $rowCount - Set the number of rows in the hex grid. Value: `auto` || `number`
/// @param {Number} $gridWidth - Set the width of the hex grid. Value: `auto` || `<length>`
/// @param {Number} $hexCount - Set the number of hex cells in the hex grid. Value: `auto` || `number`
@mixin gridTemplate($gridOrient, $columnCount, $rowCount, $gridWidth, $hexCount) {
    @if $gridOrient == vertical {
        grid-template-columns: repeat($columnCount, 1fr 2fr) 1fr;
        grid-template-rows: repeat(($rowCount*2+1), vfr($gridWidth, $columnCount));
    } @else if $gridOrient == horizontal {
        grid-template-columns: repeat(($columnCount*2+1), 1fr);
        grid-template-rows: repeat($rowCount, hfr($gridWidth, $columnCount) (hfr($gridWidth, $columnCount)*2)) hfr($gridWidth, $columnCount);
    }
}

/// Layout
/// @param {Number} $columnCount - Set the number of columns in the hex grid. Value: `auto` || `number`
/// @param {Number} $rowCount - Set the number of rows in the hex grid. Value: `auto` || `number`
/// @param {String} $hexLayout - Set the direction the cells will populate the grid. Value: `row` || `column`
/// @param {String} $gridOrient - Set the orientation in which the grid cells will align. Value: `vertical` || `horizontal`
/// @param {Number} $hexCount - Set the number of hex cells in the hex grid. Value: `auto` || `number`
@mixin layout($columnCount, $rowCount, $hexLayout, $gridOrient, $hexCount){
    @if $hexLayout == strict {
        @include address($columnCount, $rowCount, $gridOrient);
    } @else if $hexLayout == column {
        .hex {
            display: none;
        }
        @include address($columnCount, $rowCount, $gridOrient);
        
        $c: 1; $r: 1;
        @for $i from 1 through ($hexCount) {
            @if $r > $rowCount {
                $r: 1; 
                $c: $c+1
            }

            .hex:nth-child(#{$i}) {
                display: flex;
                align-items: center;
                justify-content: center;

                @if $gridOrient == vertical {
                    @extend .r-#{$r}, .c-#{$c}, .c-#{$c}.r-#{$r};
                } @else if $gridOrient == horizontal {
                    @extend .r-#{$r}, .c-#{$c}, .r-#{$r}.c-#{$c};
                }
            }
            $r: $r + 1;
        }
    } @else if $hexLayout == row {
        .hex {
            display: none;
        }
    
        @include address($columnCount, $rowCount, $gridOrient);
    
        $c: 1; $r: 1;
        @for $i from 1 through ($hexCount) {
            @if $c > $columnCount {
                $r: $r + 1; 
                $c: 1
            }
      
            .hex:nth-child(#{$i}) {
                display: flex;
                align-items: center;
                justify-content: center;
        
                @if $gridOrient == vertical {
                    @extend .r-#{$r}, .c-#{$c}, .c-#{$c}.r-#{$r};
                } @else if $gridOrient == horizontal {
                    @extend .r-#{$r}, .c-#{$c}, .r-#{$r}.c-#{$c};
                }
            }
        $c: $c + 1;}
    }
}

/// Address
/// @param {Number} $columnCount - Set the number of columns in the hex grid. Value: `auto` || `number`
/// @param {Number} $rowCount - Set the number of rows in the hex grid. Value: `auto` || `number`
/// @param {String} $gridOrient - Set the orientation in which the grid cells will align. Value: `vertical` || `horizontal`
@mixin address($columnCount, $rowCount, $gridOrient) {
    @if $gridOrient == vertical {
        @for $ci from 1 to ($columnCount + 1) {
            $cPos: 1;

            @if $ci > 1 {
                $cPos: increment($ci, $cPos)
            }
      
            .c-#{$ci} {
                grid-column-start: $cPos;
                grid-column-end: span 3
            }

            @for $ri from 1 to ($rowCount + 1) {
                $rPos: 1;
                
                @if $ci % 2 == 0 {
                    $rPos: 2;
                }

                @if $ri > 1 {
                    $rPos: increment($ri, $rPos)
                }

            .c-#{$ci}.r-#{$ri} {
                grid-row-start: $rPos;
                grid-row-end: span 2}
            }
        }
    } @else if $gridOrient == horizontal {
    
        @for $ri from 1 to ($rowCount + 1) {
            $rPos: 1;
            @if $ri > 1 {
                $rPos: increment($ri, $rPos);
            }
            .r-#{$ri} {
                grid-row-start: $rPos;
                grid-row-end: span 3;
            }

            @for $ci from 1 to ($columnCount + 1) {
                $cPos: 1;
                @if $ri % 2 == 0 {
                    $cPos: 2;
                }
                @if $ci > 1 {
                    $cPos: increment($ci, $cPos);
                }
                .r-#{$ri}.c-#{$ci} {
                    grid-column-start: $cPos;
                    grid-column-end: span 2;
                }
            }
        }
    }
}

/// image Assigner
/// @param {String} $images - Set a list of files to be passed to the hex cells as background images. The files will be added to the grid according to the order specified by `$gridLayout`.
/// @param {String} $hexLayout - Set the direction the cells will populate the grid. Value: `row` || `column`
/// @param {Number} $hexCount - Set the number of hex cells in the hex grid. Value: `auto` || `number`
@mixin imageAssigner($images, $hexCount, $hexLayout){
    @if $hexLayout != strict {
        @for $i from 1 through length($images) {
            .hex:nth-child(#{$i}) {
                background-image: url(nth($images, $i));
            }
        }
    }
}

#myHexGrid {
//--- SETTINGS -------------- VALUES ---------//
  $gridWidth:   40em;       // 'auto',(px,pt,r/em,vw/h)
  $gridHeight:  auto;       // 'auto',(px,pt,r/em,vw/h)
  $columnCount: 6;          // 'auto',(number)
  $rowCount:    4;          // '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:    #00bfff;    // hexcode,rgb/a,named
  $images:      none;
//--- MIXINS ---------------------------------//
  @include hexWrapper(
    $gridWidth,
    $gridHeight,
    $gridOrient,
    $rowCount,
    $columnCount);
  
  .hexCrop {
    @include hexCrop($crop,$cropFactor)
  }
  
  .hexContainer {
    @include hexContainer(
      $gridWidth,
      $gridHeight,
      $gridOrient,
      $columnCount, 
      $images,
      $rowCount,
      $hexLayout,
      $hexContent,
      $hexShape,
      $hexColor,
      $hexMargin,
      $hexCount,
      $hexSize
    )
  }
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(-135deg, magenta, red);
}
              
            
!

JS

              
                
              
            
!
999px

Console