DEV Community

Cover image for Responsive hexagon grid without media query

Responsive hexagon grid without media query

Temani Afif on February 15, 2021

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...
Collapse
 
au_10e6118f16f profile image
Andrew Ulrich

Oh man, having the offset be a transparent ::before shape with the right height spacing between lines is a great idea! I was puzzling over that one. Thanks, this works great and is so much simpler than all the js/media-query ones!

Collapse
 
kzqai profile image
Coco Ronalds • Edited

I’ve actually been wanting to set up a hexagon grid for a browser-based-game. One thing to consider is making the hexagons clickable or having content inside. I think either of those are the next big step to moving the approach from visually beautiful onwards to “functional” interactable content that people need.

Collapse
 
afif profile image
Temani Afif

That step is pretty easy using my code (like I detailed at the end). I am using empty divs so simply put any content you want inside and style it like you want ;) you can also catch hover and click events easily.

Collapse
 
kzqai profile image
Coco Ronalds

Usually with non-rectangular shapes on the web the problem becomes the clickability of the area. Circles, hexagons, diamonds, I’ve seen a lot of “click frustration” to them all where the visible shape does not map to the clickable link after using things like css ::before.

Far as a clickable demo, I’m on a phone, so it’s difficult to create a codepen example to see if the approach yields clickable links.

Visually arresting, regardless.

Thread Thread
 
afif profile image
Temani Afif • Edited

I am using clip-path, there is no pseudo element or complex trick and you will find no clickability issue. Try and see ;)
A trivial example is to add .container div:hover {background:blue} and you will see that the hover area fit the shape perfectly

Thread Thread
 
kzqai profile image
Coco Ronalds

Yeah, made an attempt before on a fork, but not really able to do much via mobile codepen.io/tchalvak/pen/ZEByQad

Collapse
 
heymich profile image
Michael Hungbo

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

Collapse
 
afif profile image
Temani Afif • Edited

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

Collapse
 
heymich profile image
Michael Hungbo

Thank you!

Collapse
 
heymich profile image
Michael Hungbo

Wow, just wow!

Collapse
 
xnoisebeta profile image
Lenny Dee

Hi. Any ways to use this with percentual values for width/height? If pixels are used (or any other unit), then in some cases there is space left on the right side of the viewport.

Quite brilliant btw, really nice work (i am amazed everytime what can be achieved with css these days).

Thanks in advance.

Collapse
 
afif profile image
Temani Afif

So you want a fixed number of hexagon per row that fit all the width, right?

Collapse
 
xnoisebeta profile image
Lenny Dee

Yeah, that would be ideal as that would prevent the case i mentioned above. Unfortunately my css skills are not so good so i couldnt figure it out :)

Thread Thread
 
afif profile image
Temani Afif

In this case, the easiest solution is to replaced px with vw which is the viewport unit that behave as percentage based on the screen size. To use % we need to change the logic, I will probably write another post about it ;)

Thread Thread
 
viereggjfc profile image
VIEREGG Design - JFC

That would be awesome

Collapse
 
akeshma profile image
akeshma • Edited

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

Collapse
 
afif profile image
Temani Afif

I don't see my code in that codepen

Collapse
 
akeshma profile image
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.

Thread Thread
 
afif profile image
Temani Afif

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

Thread Thread
 
akeshma profile image
akeshma

will try it and give you my feedback thanks.

Collapse
 
jdnichollsc profile image
J.D Nicholls

Hey Temani, this article is awesome, thanks for sharing!
Do you know if we can do that with circles too? As a workaround, I'm thinking to put circles into these hexagons for now. Also, I tried using your example to fix the horizontal alignment but it's not working from Safari, do you have any example?

Thanks for your help! <3

Collapse
 
afif profile image
Temani Afif

I made this example for circles: codepen.io/t_afif/pen/xxXVBMB

For Safari, I cannot help because I don't have any apple device to test but I know there are a lot of bugs with Safari

Collapse
 
jdnichollsc profile image
J.D Nicholls

Wow Temani, this is really awesome, thanks for all your help, so impressive!! <3

Happy Friday!
Juan

Collapse
 
atomiclynx profile image
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 :)

Collapse
 
afif profile image
Temani Afif

Thanks, more content is coming. Stay tunned ;)

Collapse
 
thaimon profile image
Thaimon

Hi, I encountered a problem with content below the hexagons.
In some cases, the hexagons leak out of the main div and the content below will overlap with the hexagons.
For a few rows of hexagons everything is fine, but when the number of rows increases the problem becomes more severe. You can check it with your codepen example by adding a div below with some dummy content and then resizing the browser window to get more rows of hexagons

Is there a fix for this, so the main div will always have the same height as it's contents (the hexagons)?

Collapse
 
matthijsewoud profile image
⚡️

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

Collapse
 
silentdev profile image
Ezekiel Lawson

i love this!

Collapse
 
lexmarie790 profile image
leximarie27

Great post!

Collapse
 
divcenterer profile image
John Doe

What if I wanted the hexagons to be horizontal? Is it possible with this code or it would completely change? I am trying to make a game but I am very new to frontend and this is the best tutorial I have seen so far.

Collapse
 
viereggjfc profile image
VIEREGG Design - JFC • Edited

@afif Thank's for this post! I've noticed an small error when it comes to responsive Design - see dev-to-uploads.s3.amazonaws.com/up.... If only one hexagon will be shown in a row there's a large gap between the hexagons. Any idea/hint how to fix that?

Collapse
 
afif profile image
Temani Afif

it's not really an error, it's meant to work that way. In that case, you can simply remove the float element (using media query when the screen size is very small)

Collapse
 
terd47 profile image
codebydoh

Wow cool

Collapse
 
cpmech profile image
Dorival Pedroso

Very nice. Thanks for sharing :-)

Collapse
 
eugenedakin profile image
Eugene Dakin
Collapse
 
afif profile image
Temani Afif

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

Collapse
 
thaimon profile image
Thaimon

Hi Temani Afif,

In the safari browser the hexagons don't show in the same structure. Is there a fix?

Collapse
 
sufyan331 profile image
sufyan yaan

cool, can use for web page background?

Collapse
 
afif profile image
Temani Afif

what kind of background? only colored and repeated hexagon?

Collapse
 
smitham50 profile image
smitham50@gmail.com

Really cool. Any idea how to implement this in React Native?

Collapse
 
afif profile image
Temani Afif

I am not familiar with react native so I don't really know the limitation you be facing and if shape-outside is supported there or not. You can try using a basic example to test the shape-outside. It should be the only property that would potentially give you troubles.

Collapse
 
thaimon profile image
Thaimon

Hi, very nice script.
I'd like to have the indentation beginning on the first row. Can you help me?

Collapse
 
afif profile image
Temani Afif

in the shape-outside use this repeating-linear-gradient(
#000 0 3px,
#0000 0 var(--f))

and in the --f you will find - 1px, replace it with + 1px

Collapse
 
thaimon profile image
Thaimon

Thanks for your help :)

I encountered a problem.
You can also test it with your example on codepen.

When you put the size to 200px (--s: 200px;) and look at it from a mobile device or resize your browser to mobile dimensions, then the last hexagon misbehaves.
This also occurs with the original code/indentation.

Can you help me again?

Thread Thread
 
thaimon profile image
Thaimon

I found a solution, but maybe you have a better one.
I just added a couple of extra hexagons and made them invisible.
visibility: hidden;
This way all the visible hexagons have the correct indentation, the last (visible) ones aswel.
The invisible hexagons will still be out of place, but it doesn't matter because nobody sees them.