Honeycomb grid with 9 combs CSS HTML JS

Question

Could you please assist me in setting up a honeycomb grid like the one below ?

Ive tried using https://github.com/nasirkhan/honeycombs But once the viewport changes it changes the layout.

I would only need this to be bout 450-580 px wide and not necessarily responsive or just collapsing in to 3/3/3

@DavidThomas I've provided the library where the Demo is, i've achieved my result but explained that due to libraries responsivness it messes up the grid. — dExIT, Aug 29 '19 at 12:01
In what way does that constitute the minimum reproducible example code? Your relevant code must be in your question, otherwise we don't have any insight into what you're doing or what might be going wrong. Nor should those people trying to help you with your specific problem be expected to visit external sites in order to do so. As it happens your question appears to be a duplicate anyway, so hopefully you'll find a useful answer to the other question. — David Thomas, Aug 29 '19 at 12:03
@dExIT I have a flexible solution for you: https://codepen.io/HerrSerker/pen/pozwLwJ — yunzen, Aug 29 '19 at 13:48

Jeremy · Accepted Answer · 2019-08-29T12:05:19.657

If you want to try and make your own, try clip-path. It's an easy way to get shapes like hexagons. To see what you can do with clip-paths I find this link very usefull: https://bennettfeely.com/clippy/.

Some more info about clip paths: https://css-tricks.com/almanac/properties/c/clip-path/

And an example:

img{
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

<img src="https://via.placeholder.com/150">

U can put multiple next to eachother and play with positioning:

.canvas{
  width: 500px;
}

img{
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.comb{
  width: 75px;
  height: 75px;
  position: relative;
  display: inline-block;
  margin-bottom: 165px;
}

.comb:nth-of-type(2n){
  top: 120px;
}

<div class="canvas">
<div class="comb"><img src="https://via.placeholder.com/150"></div>
<div class="comb"><img src="https://via.placeholder.com/150"></div>
<div class="comb"><img src="https://via.placeholder.com/150"></div>
<div class="comb"><img src="https://via.placeholder.com/150"></div>
<div class="comb"><img src="https://via.placeholder.com/150"></div>
<div class="comb"><img src="https://via.placeholder.com/150"></div>
<div class="comb"><img src="https://via.placeholder.com/150"></div>
<div class="comb"><img src="https://via.placeholder.com/150"></div>
<div class="comb"><img src="https://via.placeholder.com/150"></div>
<div class="comb"><img src="https://via.placeholder.com/150"></div>
<div class="comb"><img src="https://via.placeholder.com/150"></div>
<div class="comb"><img src="https://via.placeholder.com/150"></div>

@dExIT see updated answer, this way it is easier to add more elements to it. — Jeremy, Aug 29 '19 at 12:00
Im trying to rotate it but your solution is 90% and i've learned something new today cheers :) — dExIT, Aug 29 '19 at 12:02

Honeycomb grid with 9 combs CSS HTML JS

1 Answers1