CSS Grid of Hexagons - Display as squares at mobile resolution

Question

So I found this resource here https://github.com/web-tiki/responsive-grid-of-hexagons for a responsive grid of hexagons with images. Does anyone know how I can update this so when the display hits <768 it displays 2 columns of square boxes and then <400 1 column of square boxes? So far I have updated the hexagons.css to this with no luck. I was hoping to get the effect of this website http://builtbybuffalo.com/

* {
    margin: 0;
    padding: 0;
}
body {
    background: rgb(123, 158, 158);
}
.container
{
    width: 100%;
    margin: 0 auto;
}
#hexGrid {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  list-style-type: none;
}

.hex {
  position: relative;
  visibility:hidden;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hex::after{
  content:'';
  display:block;
  padding-bottom: 86.602%;  /* =  100 / tan(60) * 1.5 */
}
.hexIn{
  position: absolute;
  width:96%;
  padding-bottom: 110.851%; /* =  width / sin(60) */
  margin:0 2%;
  overflow: hidden;
  visibility: hidden;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
  -webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
      -ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
          transform: rotate3d(0,0,1,-60deg) skewY(30deg);
}
.hexIn * {
  position: absolute;
  visibility: visible;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hexLink {
    display:block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
        -ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
            transform: skewY(-30deg) rotate3d(0,0,1,60deg);
}

/*** HEX CONTENT **********************************************************************/
.hex img {
  left: -100%;
  right: -100%;
  width: auto;
  height: 100%;
  margin: 0 auto;
  -webkit-transform: rotate3d(0,0,0,0deg);
      -ms-transform: rotate3d(0,0,0,0deg);
          transform: rotate3d(0,0,0,0deg);
}

.hex h1, .hex p {
  width: 100%;
  padding: 5%;
  box-sizing:border-box;
  background-color: rgba(0, 128, 128, 0.8);
  font-weight: 300;
  -webkit-transition:  -webkit-transform .2s ease-out, opacity .3s ease-out;
          transition:          transform .2s ease-out, opacity .3s ease-out;
}
.hex h1 {
  bottom: 50%;
  padding-top:50%;
  font-size: 1.5em;
  z-index: 1;
  -webkit-transform:translate3d(0,-100%,0);
      -ms-transform:translate3d(0,-100%,0);
          transform:translate3d(0,-100%,0);
}
.hex h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 45%;
  width: 10%;
  text-align: center;
  border-bottom: 1px solid #fff;
}
.hex p {
  top: 50%;
  padding-bottom:50%;
  -webkit-transform:translate3d(0,100%,0);
      -ms-transform:translate3d(0,100%,0);
          transform:translate3d(0,100%,0);
}


/*** HOVER EFFECT  **********************************************************************/
.hexLink:hover h1, .hexLink:focus h1,
.hexLink:hover p, .hexLink:focus p{
  -webkit-transform:translate3d(0,0,0);
      -ms-transform:translate3d(0,0,0);
          transform:translate3d(0,0,0);
}

/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/

#hexGrid{
padding-bottom: 4.4%
}
.hex {
width: 20%; /* = 100 / 5 */
}
.hex:nth-child(9n+6){ /* first hexagon of even rows */
margin-left:10%;  /* = width of .hex / 2  to indent even rows */
}

/*show two columns of squares ???*/
@media (max-width: 768px) { 
  #hexGrid{
    padding-bottom: 11.2%
  }
  .hex {
    width: 50%;
    display: block;
    float: left;
    margin: 10px;
  }
  .hex:nth-child(9n+6)
  {
      margin-left: 0;
  }
  .hexIn,
  .hexLink,
  .hex img
  {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
  }

}
/* show one column of squares ???*/
@media (max-width: 400px) { 

}

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="hexagons.css">
    <link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <ul id="hexGrid">
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
    </ul>
  </body>
</html>

We were hoping you'd create a minimal reproducible example. As of now your example is made from CSS taken from a public plugin and entirely missing markup. Which doesn't make it very "your" s. You're supposed to show some research effort in order to get help on Stack Overflow. Also, as a side note: unfortunately, cases where the code makes (more) sense and the result is acceptable in production environment are ever more seldom, due to several factors, way too many to list here. If that's what you're hoping from coding, you're in for major disappointment. — tao
– tao, Commented Jul 28, 2017 at 9:46
Have you tried placing your code inside a @media(min-width:768px){/* go hex here */}? — tao
– tao, Commented Jul 28, 2017 at 9:53
if you download the example just use the css i have with that. — Magearlik
– Magearlik, Commented Jul 29, 2017 at 2:22
Linking external websites has two major downsides, compared to a minimal reproducible example. First off, at some point you're going to fix it on the linked website, which means your question will no longer be relevant, so it won't help future visitors with a similar problem. And secondly, it shows no respect for the time of people trying to help you. You're supposed to trim down your problem to the minimum amount of code necessary to reproduce it. So please use the snippet button (<>), linking required resources to make it work here, in the question itself. Please see How to Ask for details. — tao
– tao, Commented Jul 29, 2017 at 2:31

tao · Accepted Answer · 2017-07-29 13:06:37Z

You're trying to apply float layout-ing techniques to flex items. It won't do anything. What you want is:

@media (max-width: 768px) { 
  .hex {
    flex: 0 0 50%;
  }
}

@media (max-width: 400px) { 
  .hex {
    flex-basis: 100%;
  }
}

You could replace flex-basis with width in your particular example:

* {
    margin: 0;
    padding: 0;
}
body {
    background: rgb(123, 158, 158);
}
.container
{
    width: 100%;
    margin: 0 auto;
}
#hexGrid {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  list-style-type: none;
}

.hex {
  position: relative;
  visibility:hidden;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hex::after{
  content:'';
  display:block;
  padding-bottom: 86.602%;  /* =  100 / tan(60) * 1.5 */
}
.hexIn{
  position: absolute;
  width:96%;
  padding-bottom: 110.851%; /* =  width / sin(60) */
  margin:0 2%;
  overflow: hidden;
  visibility: hidden;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
  -webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
      -ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
          transform: rotate3d(0,0,1,-60deg) skewY(30deg);
}
.hexIn * {
  position: absolute;
  visibility: visible;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hexLink {
    display:block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
        -ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
            transform: skewY(-30deg) rotate3d(0,0,1,60deg);
}

/*** HEX CONTENT **********************************************************************/
.hex img {
  left: -100%;
  right: -100%;
  width: auto;
  height: 100%;
  margin: 0 auto;
  -webkit-transform: rotate3d(0,0,0,0deg);
      -ms-transform: rotate3d(0,0,0,0deg);
          transform: rotate3d(0,0,0,0deg);
}

.hex h1, .hex p {
  width: 100%;
  padding: 5%;
  box-sizing:border-box;
  background-color: rgba(0, 128, 128, 0.8);
  font-weight: 300;
  -webkit-transition:  -webkit-transform .2s ease-out, opacity .3s ease-out;
          transition:          transform .2s ease-out, opacity .3s ease-out;
}
.hex h1 {
  bottom: 50%;
  padding-top:50%;
  font-size: 1.5em;
  z-index: 1;
  -webkit-transform:translate3d(0,-100%,0);
      -ms-transform:translate3d(0,-100%,0);
          transform:translate3d(0,-100%,0);
}
.hex h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 45%;
  width: 10%;
  text-align: center;
  border-bottom: 1px solid #fff;
}
.hex p {
  top: 50%;
  padding-bottom:50%;
  -webkit-transform:translate3d(0,100%,0);
      -ms-transform:translate3d(0,100%,0);
          transform:translate3d(0,100%,0);
}


/*** HOVER EFFECT  **********************************************************************/
.hexLink:hover h1, .hexLink:focus h1,
.hexLink:hover p, .hexLink:focus p{
  -webkit-transform:translate3d(0,0,0);
      -ms-transform:translate3d(0,0,0);
          transform:translate3d(0,0,0);
}

/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/

#hexGrid{
padding-bottom: 4.4%
}
.hex {
width: 20%; /* = 100 / 5 */
}
.hex:nth-child(9n+6){ /* first hexagon of even rows */
margin-left:10%;  /* = width of .hex / 2  to indent even rows */
}

/*show two columns of squares ???*/
@media (max-width: 768px) { 
  #hexGrid{
    padding-bottom: 11.2%
  }
  .hex {
    flex: 0 0 50%;
  }
  .hex:nth-child(9n+6)
  {
      margin-left: 0;
  }
  .hexIn,
  .hexLink,
  .hex img
  {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
  }

}
/* show one column of squares ???*/
@media (max-width: 400px) { 
 .hex {
    flex-basis: 100%;
    }
}

<ul id="hexGrid">
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
      <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">
        <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />
        <h1>This is a title</h1>
        <p>Some sample text about the article this hexagon leads to</p>
      </a>
    </div>
      </li>
    </ul>

Magearlik · Accepted Answer · 2017-07-30 04:34:18Z

Here is an alternative solution that I came up with. Kudos to the person that wrote this tutorial https://www.codesmite.com/article/how-to-create-pure-css-hexagonal-grids. I used the formula Height = 2x Width/ sqrt(3) for the hexagon which I found http://www.drking.org.uk/hexagons/misc/dims.html. Someone can correct me on the math if I am wrong.

.hex-background {
  background-size: cover;
  background-position: center;
}
.hex-background:hover {
  background-size: 200%;
}
.grid {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
}
.grid li {
  list-style-type: none;
  position: relative;
  float: left;
  width: 18%;
  padding-bottom: 20.78461%;
  -o-transform: rotate(-60deg) skewY(30deg);
  -moz-transform: rotate(-60deg) skewY(30deg);
  -webkit-transform: rotate(-60deg) skewY(30deg);
  -ms-transform: rotate(-60deg) skewY(30deg);
  transform: rotate(-60deg) skewY(30deg);
  overflow: hidden;
  visibility: hidden;
}
.grid li:nth-child(2n) {
  margin: 0 1%;
}
.grid li:nth-child(10n+6),
.grid li:nth-child(10n+7),
.grid li:nth-child(10n+8),
.grid li:nth-child(10n+9),
.grid li:nth-child(10n+10) {
  margin-top: -4.5%;
  margin-bottom: -4.5%;
  -o-transform: translateX(48%) rotate(-60deg) skewY(30deg);
  -moz-transform: translateX(48%) rotate(-60deg) skewY(30deg);
  -webkit-transform: translateX(48%) rotate(-60deg) skewY(30deg);
  -ms-transform: translateX(48%) rotate(-60deg) skewY(30deg);
  transform: translateX(48%) rotate(-60deg) skewY(30deg);
}
.grid li .hexagon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-transform: skewY(-30deg) rotate(60deg);
  -moz-transform: skewY(-30deg) rotate(60deg);
  -webkit-transform: skewY(-30deg) rotate(60deg);
  -ms-transform: skewY(-30deg) rotate(60deg);
  transform: skewY(-30deg) rotate(60deg);
  overflow: hidden;
  /*background images*/
}
.grid li .hexagon.img1 {
  background: url("https://c2.staticflickr.com/6/5560/15235542331_fbe56a772e_b.jpg");
  background-size: cover;
  background-position: center;
}
.grid li .hexagon.img1:hover {
  background-size: 200%;
}
.grid li .hexagon.img2 {
  background: url("https://c2.staticflickr.com/8/7490/16150657349_cf9be4ce7e_b.jpg");
  background-size: cover;
  background-position: center;
}
.grid li .hexagon.img2:hover {
  background-size: 200%;
}
.grid li .hexagon.img3 {
  background: url("https://c2.staticflickr.com/6/5205/5262879347_26a831f439_b.jpg");
  background-size: cover;
  background-position: center;
}
.grid li .hexagon.img3:hover {
  background-size: 200%;
}
.grid li * {
  visibility: visible;
}
.grid li p {
  transform: translateY(100%);
  text-align: center;
  color: #fff;
}
.clear:after {
  content: "";
  display: block;
  clear: both;
}
@media only screen and (max-width: 768px) {
  .grid li {
    display: inline-block;
    width: 49%;
    padding: 0;
    height: 35%;
    padding-bottom: 0%;
    -o-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    overflow: visible;
    visibility: visible;
    padding-bottom: 2%;
  }
  .grid li:nth-child(2n+1) {
    margin-right: 2%;
  }
  .grid li:nth-child(2n) {
    margin: 0 0%;
  }
  .grid li .hexagon {
    position: relative;
    top: none;
    left: none;
    width: 100%;
    height: 200px;
    -o-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    overflow: visible;
  }
  .grid li:nth-child(10n+6),
  .grid li:nth-child(10n+7),
  .grid li:nth-child(10n+8),
  .grid li:nth-child(10n+9),
  .grid li:nth-child(10n+10) {
    margin-top: 0%;
    margin-bottom: 0%;
    -o-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}
@media only screen and (max-width: 400px) {
  .grid li {
    display: inline-block;
    width: 100%;
    height: 35%;
    padding-bottom: 10px;
  }
  .grid li:nth-child(2n+1) {
    margin-right: 0%;
  }
}

<!doctype html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="hex.css">
</head>
<body class="container">
	<ul class="grid">
		<li>
			<div class="hexagon img1"></div>
		</li>
		<li>
			<div class="hexagon img2"></div>
		</li>
		<li>
			<div class="hexagon img3"></div>
		</li>
		<li>
			<div class="hexagon img1"></div>
		</li>
		<li>
			<div class="hexagon img2"></div>
		</li>
		<li>
			<div class="hexagon img3"></div>
		</li>
		<li>
			<div class="hexagon img1"></div>
		</li>
		<li>
			<div class="hexagon img2"></div>
		</li>
		<li>
			<div class="hexagon img3"></div>
		</li>
		<li>
			<div class="hexagon img1"></div>
		</li>
		<li>
			<div class="hexagon img2"></div>
		</li>
		<li>
			<div class="hexagon img3"></div>
		</li>
		<li>
			<div class="hexagon img1"></div>
		</li>
		<li>
			<div class="hexagon img2"></div>
		</li>
		<li>
			<div class="hexagon img3"></div>
		</li>
	</ul>
</body>
</html>

Here is the LESS file:

.hex-background
{
    background-size: cover;
    background-position: center;

    &:hover
    {
        background-size: 200%;
    }
}

.grid
{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;

    li
    {
        list-style-type: none;
        position: relative;
        float: left;
        //H = 2W/sqrt(3)
        width: 18%; //width of hexagon
        padding-bottom: 20.78461%; //height of hexagon
        -o-transform: rotate(-60deg) skewY(30deg);
        -moz-transform: rotate(-60deg) skewY(30deg);
        -webkit-transform: rotate(-60deg) skewY(30deg);
        -ms-transform: rotate(-60deg) skewY(30deg);
        transform: rotate(-60deg) skewY(30deg);
        overflow: hidden;
        visibility:hidden;


        &:nth-child(2n) //every even hexagon
        {
            margin: 0 1%;
        }

        //move every even row across
        &:nth-child(10n+6),
        &:nth-child(10n+7),
        &:nth-child(10n+8),
        &:nth-child(10n+9),
        &:nth-child(10n+10)
        {
            margin-top: -4.5%; 
            margin-bottom: -4.5%; 
            -o-transform: translateX(48%) rotate(-60deg) skewY(30deg);
            -moz-transform: translateX(48%) rotate(-60deg) skewY(30deg);
            -webkit-transform: translateX(48%) rotate(-60deg) skewY(30deg);
            -ms-transform: translateX(48%) rotate(-60deg) skewY(30deg);
            transform: translateX(48%) rotate(-60deg) skewY(30deg);
        }

        .hexagon
        {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            -o-transform: skewY(-30deg) rotate(60deg);
            -moz-transform: skewY(-30deg) rotate(60deg);
            -webkit-transform: skewY(-30deg) rotate(60deg);
            -ms-transform: skewY(-30deg) rotate(60deg);
            transform: skewY(-30deg) rotate(60deg);
            overflow: hidden;

                /*background images*/
                &.img1
                {
                    background: url("https://c2.staticflickr.com/6/5560/15235542331_fbe56a772e_b.jpg");
                    .hex-background;

                }
                &.img2
                {
                    background: url("https://c2.staticflickr.com/8/7490/16150657349_cf9be4ce7e_b.jpg");
                    .hex-background;
                }
                &.img3
                {
                    background: url("https://c2.staticflickr.com/6/5205/5262879347_26a831f439_b.jpg");
                    .hex-background;
                }
        }

        *
        {
            visibility: visible;
        }

        p
        {
            transform: translateY(100%);
            text-align: center;
            color: #fff;
        }
    }


}
.clear:after 
{
    content: "";
    display: block;
    clear: both;
}
@media only screen and (max-width: 768px) 
{
    .grid
    {
        li
        {
            display: inline-block;
            width: 49%;
            padding: 0;
            height: 35%;
            padding-bottom: 0%;
            -o-transform: none;
            -moz-transform: none;
            -webkit-transform: none;
            -ms-transform: none;
            transform: none;
            overflow: visible;
            visibility:visible;
            padding-bottom: 2%; //so doesn't conflict with margin

            &:nth-child(2n+1)
            {
                margin-right: 2%;
            }
            &:nth-child(2n) 
            {
                margin: 0 0%;
            }
            .hexagon
            {
                position: relative;
                top: none;
                left: none;
                width: 100%;
                height: 200px;
                -o-transform: none;
                -moz-transform: none;
                -webkit-transform: none;
                -ms-transform: none;
                transform: none;
                overflow: visible;
            }

            &:nth-child(10n+6),
            &:nth-child(10n+7),
            &:nth-child(10n+8),
            &:nth-child(10n+9),
            &:nth-child(10n+10)
            {
                margin-top: 0%; 
                margin-bottom: 0%; 
                -o-transform: none;
                -moz-transform: none;
                -webkit-transform: none;
                -ms-transform: none;
                transform: none;
            }
        }

    }
}
@media only screen and (max-width: 400px) 
{
    .grid
    {
        li
        {
            display: inline-block;
            width: 100%;
            height: 35%;
            padding-bottom: 10px;

            &:nth-child(2n+1)
            {
                margin-right: 0%;
            }
        }
    }
}

Collectives™ on Stack Overflow

CSS Grid of Hexagons - Display as squares at mobile resolution

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related