How to "fit" hexagonal elements with CSS?

Question

My idea is to create a gallery where each item will have a hexagonal shape aligned in a way that looks like a beehive.

Look at this one so far:

.galeria {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
/*justify-content: center;*/
}

.hexagonal {
-webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 5% 75%, 5% 25%);
padding:10px;
background:linear-gradient(grey,lightgrey);
width:200px;
height:200px;
cursor:pointer;
}

<div class="galeria">
<div class="hexagonal">

</div>

<div class="hexagonal">

</div>

<div class="hexagonal">

</div>

<div class="hexagonal">

</div>

<div class="hexagonal">

</div>

<div class="hexagonal">

</div>
</div>

What I want to do is: As you add hexagons they will end up forming a second line. So far okay. But when it forms this new line it positions itself in such a way that the hexagons below fit into the hexagons above in order to form a honeycomb or beehive.

This is an experience that I am doing, but if it works cool I intend to use in my next projects.

Answer 1

Almost! What I want is to form a beehive. I even managed to make the hexagons lying down. See:

.galeria-hex {
    width:1010px;
    margin:auto;
    background: #eee;
    border: 1px solid #ddd;
    padding: 15px 60px 95px 15px;
}

.galeria-hex .item {
    margin:0;
    height:180px;
    width:200px;
    position:relative;
    overflow:hidden;
    display:inline-block;
    margin-right:-35px;
    vertical-align:middle;
}

.galeria-hex .item span {
    overflow:hidden;
    position:absolute;
    height:110%;
    width:100%;
    top:-5%;
    left:0;
    background:blue;
    transform:rotate(45.5deg) skew(16.5deg,15.5deg);
}

.galeria-hex .item span img {
    transform:rotate(-45deg) skew(0,0) scale(1.4,0.77);
    border:solid;
    width: 101%;
}

.item:nth-child(odd) {
    margin-bottom:15px;
}
.item:nth-child(even) {
    margin-bottom:-180px;
}

<ul class="galeria-hex">
   <li class="item">
      <span>
          <img />
      </span>
   </li>
   
   <li class="item">
      <span>
          <img />
      </span>
   </li>
   
   <li class="item">
      <span>
          <img />
      </span>
   </li>
   
   <li class="item">
      <span>
          <img />
      </span>
   </li>
   
  <li class="item">
      <span>
          <img />
      </span>
   </li>
   
   <li class="item">
      <span>
          <img />
      </span>
   </li>
   
   <li class="item">
      <span>
          <img />
      </span>
   </li>
   
   <li class="item">
      <span>
          <img />
      </span>
   </li>
   
   <li class="item">
      <span>
          <img />
      </span>
   </li>
   
   <li class="item">
      <span>
          <img />
      </span>
   </li>
   
   <li class="item">
      <span>
          <img />
      </span>
   </li>
   
   <li class="item">
      <span>
          <img />
      </span>
   </li>
</ul>

I’m just trying to get them to stand up. I’m having some ideas, I’m going to test and if it works out I’ll share it with us.

Answer 2

I made an example of your code in Codepen: https://codepen.io/rodrigos4y/pen/oNjJMod See if that’s the idea.

In that case I put in the . gallery flex-direction: row; and no. hexagonal margin: 0 -11px to give an idea of a hive.