Responsive Fluid Hexagon Grid Layout In CSS/SASS – Hextile

Preview:

Description:

CSS Grid Layout is a standard in responsive design enabling designers to create fast, flexible, and adaptable web page layouts.

In this post, we take a look at Hextile, an open-source SASS library designed to produce responsive and fluid hexagon grid layouts in pure CSS using the CSS Grid Layout.

How to use it:

1. Load the hextile-static.min.css in the document.

<link rel="stylesheet" href="../css/hextile-static.min.css">

2. Add the CSS class hextile-grid to an HTML list and specify the number of columns to generate using the hextile-n-column class.

<ul class="hextile-grid hextile-4-column">
  <li>
    Cell 1
  </li>
  <li>
    Cell 2
  </li>
  <li>
    Cell 3
  </li>
  ...
</ul>

3. Create your own layout by importing the textile SASS component and then writing your own styles as follows:

// Gallery.sass
@use 'sass:math';
@use 'sass:string';
@use './sass/hextile';
.gallery {
  @include hextile.grid($columns: 4, $max-rows: 5, $stagger-direction: up);
  padding: 1em;
  filter: drop-shadow(1px 4px 2px rgba(0, 0, 0, 0.5));
  > * {
    @include hextile.hex {
      background: #333;
    }
  }
  h3 {
    text-shadow: 1px 1px 2px hsla(0,0,0,0.75);
  }
}
h1 {
  font-size: 3em;
  text-align: center;
  transform-origin: center;
  transform: translate(-33%, 1.5em) rotateZ(-30deg);
  filter: drop-shadow(1px 4px 2px rgba(0, 0, 0, 0.35));
}
h3 {
  text-align: center;
  width: 50%;
  margin: auto auto 1em;
}
@function zero-fill($number, $digits) {
  $num-string: '#{$number}';
  @for $i from 0 to math.max($digits - string.length($num-string), 0) {
    $num-string: '0#{$num-string}';
  }
  @return $num-string;
}
@for $i from 1 through 20 {
  $nonce: zero-fill(math.round(math.random() * math.random($i) * 1000), 5);
  #thumb-#{zero-fill($i, 3)} {
    background-image: url(https://unsplash.it/1280?random&gravity=center&nonce=#{$nonce});
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
  }
}