Responsive Honeycomb Layout

index.html

<ul class="honeycomb" lang="es">
  <li class="honeycomb-cell">
    <img class="honeycomb-cell__image" src="https://source.unsplash.com/random/1">
    <div class="honeycomb-cell__title">Diseño exclusivo</div>
  </li>
  <li class="honeycomb-cell">
    <img class="honeycomb-cell__image" src="https://source.unsplash.com/random/2">
    <div class="honeycomb-cell__title">Impermeables</div>
  </li>
  <li class="honeycomb-cell">
    <img class="honeycomb-cell__image" src="https://source.unsplash.com/random/3">
    <div class="honeycomb-cell__title">Tablero doble cara</div>
  </li>
  <li class="honeycomb-cell">
    <img class="honeycomb-cell__image" src="https://source.unsplash.com/random/4">
    <div class="honeycomb-cell__title">Maletín de empaque</div>
  </li>
  <li class="honeycomb-cell">
    <img class="honeycomb-cell__image" src="https://source.unsplash.com/random/5">
    <div class="honeycomb-cell__title">Antireflectivo<small>No vidrio</small></div>
  </li>
  <li class="honeycomb-cell">
    <img class="honeycomb-cell__image" src="https://source.unsplash.com/random/6">
    <div class="honeycomb-cell__title">6 fichas<small>1 de repuesto</small></div>
  </li>
  <li class="honeycomb-cell">
    <img class="honeycomb-cell__image" src="https://source.unsplash.com/random/7">
    <div class="honeycomb-cell__title">Tablero magnético</div>
  </li>
  <li class="honeycomb-cell honeycomb__placeholder"></li>
</ul>

responsive-honeycomb-layout.markdown

Responsive Honeycomb Layout

Honeycomb-like layout based on flexbox, the cells are shaped through clip-path. In order to make it work as a CSS-only solution the responsiveness is achieved through media queries (a smaller container may cause problems)

A Pen by Jesús Castro on CodePen.

License.

DEMO https://codemyui.com/responsive-honeycomb-grid-layout-in-pure-css/

style.scss

$hexagon-width: 250px;
$hexagon-height: $hexagon-width*.55;
$hexagon-margin: 25px;
$hexagon-title-color: #fff;
$hexagon-border-color: #fff;
$hexagon-border-color--hover: #72f88e;
$hexagon-image-color: #3ea0eb;
$honeycomb-max-width: 1200px;
$viewport-thereshold: $hexagon-width + $hexagon-margin;

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

body {
  font-family: 'Montserrat', sans-serif;
  background: #3ea0eb;
}

*, *::before, *::after {
  box-sizing: border-box;
}

.honeycomb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  align-items: center;
  max-width: $honeycomb-max-width;
  margin: 0 auto;
  padding: 0;
  transform: translateY(#{$hexagon-height/4});

  &-cell {
    flex: 0 1 $hexagon-width;
    max-width: $hexagon-width;
    height: $hexagon-height;
    margin: $hexagon-height/2.1 $hexagon-margin/2 $hexagon-margin;
    position: relative;
    padding: 0.5em;

    text-align: center;
    z-index: 1;


    &__title {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      hyphens: auto;
      word-break: break-word;
      text-transform: uppercase;
      color: #fff;
      font-weight: 700;
      font-size: 1.75em;
      transition: opacity 350ms;
      
      > small {
        font-weight: 300;
        margin-top: 0.25em;
      }
    }

    &__image {
      object-fit: cover;
      object-position: center;
    }
    
    &::before, &::after {
      content: '';
    }

    &::before, &::after, &__image {
      top: -50%;
      left: 0;
      width: 100%;
      height: 200%;
      display: block;
      position: absolute;
      clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      z-index: -1;
    }

    &::before {
      background: $hexagon-border-color;
      transform: scale(1.055);
    }

    &::after {
      background: $hexagon-image-color;
      opacity: 0.5;
      transition: opacity 350ms;
    }

    &:hover {
      
      .honeycomb-cell__title {
        opacity: 0;
      }
      
      &::before {
        background: $hexagon-border-color--hover;
      }

      &::after {
        opacity: 0;
      }
    }
  }

  &__placeholder{
    display:none;
    opacity: 0;
    width: $hexagon-width;
    margin: 0 $hexagon-margin/2;
  }
}

@media (max-width:#{2*$viewport-thereshold}){
  .honeycomb-cell {
    margin: #{$hexagon-margin/2 + $hexagon-height/2} $hexagon-margin;
  }
}

@media (min-width: #{2*$viewport-thereshold}) and (max-width:#{3*$viewport-thereshold}){
  .honeycomb-cell:nth-child(3n) {
    margin-right: calc(50% - #{$hexagon-width/2});
    margin-left: calc(50% - #{$hexagon-width/2});
  }

  .honeycomb__placeholder:nth-child(3n + 5) {
    display:block;
  }
}

@media (min-width: #{3*$viewport-thereshold}) and (max-width:#{4*$viewport-thereshold}) {
  .honeycomb-cell:nth-child(5n + 4) {
    margin-left: calc(50% - #{$hexagon-width + $hexagon-margin});
  }

  .honeycomb-cell:nth-child(5n + 5) {
    margin-right: calc(50% - #{$hexagon-width + $hexagon-margin});
  }

  .honeycomb__placeholder:nth-child(5n), .honeycomb__placeholder:nth-child(5n + 3) {
    display:block;
  }
}

@media (min-width: #{4*$viewport-thereshold}) {
  .honeycomb-cell:nth-child(7n + 5)  {
    margin-left: calc(50% - #{$hexagon-width*1.5 + $hexagon-margin});
  }

  .honeycomb-cell:nth-child(7n + 7), .honeycomb-cell:nth-child(7n + 5):nth-last-child(2) {
    margin-right: calc(50% - #{$hexagon-width*1.5 + $hexagon-margin});
  }

  .honeycomb__placeholder:nth-child(7n + 7), .honeycomb__placeholder:nth-child(7n + 9), .honeycomb__placeholder:nth-child(7n + 11){
    display:block;
  }
}