Responsive hexagon grid without media query

^{Find out more CSS tricks at css-tip.com}

I know there is a ton of articles detailing how to create hexagon grid but how many of them are responsive? Only few of them and they rely on a lot of media query or JS.

Here is a CSS only solution to have a responsive hexagon grid that fit nicely into all the sreen sizes. No JS, no media query and no complex html code. Only few lines of CSS.

Here you go

Explanation

<div class="main">
  <div class="container">
    <div></div>
    <div></div>
    ...
  </div>
</div>

.main {
  --s: 100px;  /* size of a hexagon */
  --m: 4px;    /* space between each heaxgon */
  --r: calc(var(--s)*3*1.1547/2 + 4*var(--m));
  display:flex;
}
.container div {
  width: var(--s);
  height: calc(var(--s)*1.1547); 
  margin: var(--m);
  display: inline-block;
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
  margin-bottom: calc(var(--m) - var(--s)*0.2885); 
}
.container::before {
  content: "";
  width: calc(var(--s)/2 + var(--m));
  float: left;
  height: 100%;
  shape-outside: repeating-linear-gradient(     
                  transparent 0 calc(var(--r) - 3px),      
                  #fff        0 var(--r));
}

[main]

Nothing special here. A basic div where I am defining some CSS variables and it need to be a flexbox container.

[container]

No CSS here, this is our flex item that will allow us to use the height:100%.

[div]

Our hexagon item. The width/height are defined with the variable s (1.15 ~ 1/cos(30deg)). We use clip-path to create the hexagon shape ^ref. Finally we apply a margin-bottom to create the overlap with the next line ( 0.2885 ~ tan(30deg)/2).

Until now nothing complex. Let's move to the intresting part!

[container::before]

A floated pseudo element where I will apply shape-outside to allow the hexagon items to wrap around a particular shape creating the perfect indentation between lines.

A figure to illustrate:

It's trivial that our float element need to fill all the container thus the use of height:100%. Each "even" line of our grid need an indentation equal to half the width of an hexagon item plus a margin which will give us width:calc(var(--s)/2 + var(--m)).

We need to repeat the logic for each 2 lines and the height of 2 lines is 2 height of hexagon + 4 margin + 2 negative margin-bottom = 2xS/cos(30deg) + 4xM - 2xSxtan(30deg)/2

After some simplification we get (3xS)/(2xcos(30deg)) + 4xM and this is our r variable. The shape-outside will create a repeating gradient having transparent within [0, r - x] and non-transparent within [r - x, r].

The non-transparent part (illustrated by the blue rectangle) will push the elements of the second line creating our beautiful responsive behavior.

^{x can have any value but not too big to avoid pushing the first line too (1px should do the trick but to avoid rounding issue we use a bigger value).}

That's It!

In addition to this being responsive, we can easily adjust the size of the hexagon items, the margin between them and since we are dealing with empty divs we can add any content inside.

Check the below post for more shapes:

Hexagons and Beyond: Responsive Grid Patterns, Sans Media Queries

Temani Afif for This is Learning ・ Jun 9 '21

#css #html #webdev #tutorial

---

OR

Comments

[Michael Hungbo]

Wow, just wow!

[Michael Hungbo]

Great post Temani! Permission to use this code in a personal project? ☺

[Temani Afif]

go ahead and use it ;) I am sharing tricks to be used :)

[Michael Hungbo]

Thank you!

[leximarie27]

Great post!

[Ezekiel Lawson]

i love this!

[Eugene Dakin]

Maybe this one? scispec.ca/index.php/blog/45-draw-...

[Temani Afif]

Will tackle that one too, probably in another post. Stay tunned ;)

[sufyan yaan]

cool, can use for web page background?

[Temani Afif]

what kind of background? only colored and repeated hexagon?

[Linus Ahlborg]

Hi Temani! I wanted to thank you so much for your help with responsive hexagons on Stackoverflow (since you´re not supposed to waste comments on such trivial things over there). And this post is just the best, could´ve really used it weeks ago! I think this resource will be a game changer for anyone trying their handshexagon tile board games. Keep up the good work :)

[Temani Afif]

Thanks, more content is coming. Stay tunned ;)

[⚡️]

And hexagons, as you sure know, are the bestagons.

[akeshma]

Hi,
I already try to edit available code to make hexagon game board like the attached photo. However, I could not able to make it 100%.
dev-to-uploads.s3.amazonaws.com/up...
This is my code:
codepen.io/akeshma/pen/RwweNZG

[Temani Afif]

I don't see my code in that codepen

[akeshma]

Thanks for quick response. Oh, I'm sorry. I ment availave code in another place.

My question: is it possible to make Hexagon Game Board 5x5 using your code here?
dev-to-uploads.s3.amazonaws.com/up...

each Hexagon contains a letter and can be colored RED or GREEN depend on who is the winner.

[Temani Afif]

of course, it should be pretty easy if you take my code as a starting point and add your content.

[akeshma]

will try it and give you my feedback thanks.

[Dorival Pedroso]

Very nice. Thanks for sharing :-)