Hexagons with HTML and CSS, part 2

Ok, so in the last post (here) we looked into creating fuly coded hexagons with HTML and  CSS. And we got a decent looking row of 3 hex’s.

But in the intro image we had a lot more than what we finished with in the last post … Ready to go down the hex shaped rabbit hole ?

Ok, we had this  :

3 hexagons with html and css

with our html looking somthing like this :

Adding the second line of hexagons with html and css

We can easly add a second line like so :

Notice, I only added two hex’s to the second line where as we had three on the first :

2 lines of hexagons with html and css

Thanks to the flexbox, all is alligned perfectly.

Also notice that the second line doesn’t have an ID. We will be using this to push all our other lines up thanks to the :not selector in CSS :

Even more lines of hexagons

We can now copy / paste our lines and make sure the number of elements varies between odd and even :

Multi lines of hexagons

Infinate hexagons with html and css ? How about adding some Jquery

Ok, this is looking cool, but we still haven’t got our infinate honeycomb look. And we are not going to copy /paste hundreds of hex elements in our html code. Time for some jquery magic.

So first, grab jquery and link our script.js file

now, we want to extend our hexagons to the edge of the screen, so we need the width of the shortest row and the width of the screen.

Now the screen is simple, just get the width of the container element which is 100% width and has all the elements in it.

And what about the rows. They also have 100% width and it is used to center the elements. But we were smart and used the “fullWidth” class to get that 100%.

So we can just use some jquery magic to remove that class, read the length of the row and then readd the class after.

But, we need the narrowest row …. so we make a function that will check each row and return the lowest width :

And we can now use the width to add all our extra hex’s to each row :

Be warned, this could get a bit heavy on the client navigator if you have too many rows.

And now all we need to do is fire our addHex() on document load and on window resize :

Et Voila …. we’ve made hexagons with html and css and a splash of Jquery that fill the screen.

Near infinate honycomb layout of hexagons with html and css


I have also made a fiddle of the final version (well at this date. i’ll probably do some more refining)


Leave a Reply

Your email address will not be published. Required fields are marked *