DEV Community

Cover image for Hexagons and Beyond: Responsive Grid Patterns, Sans Media Queries

Hexagons and Beyond: Responsive Grid Patterns, Sans Media Queries

Temani Afif on June 09, 2021

Since the rise of Flexbox and CSS Grid, everyone is claming the same: "float is dead!", "stop using float!" but I'm here to resurrect our old frien...
Collapse
 
rolandixor profile image
Roland Taylor

This is amazing! A lot keep in mind, but still amazing that it's possible!
A great demonstration of the true power of CSS when you put your mind to it.

Collapse
 
jordanbusby profile image
Jordan

This was an amazing article. I learned a lot. I worked through it completely, and I would say it took me about 6-7 days to complete fully. I worked through the math with a pen and paper, did my own codepen and figured out the math from what you give us in the article. I made my own version of every example given, to attempt to get the most benefit possible from this article. Now, onto the next article of yours.. so many choices!

Collapse
 
afif profile image
Temani Afif

Glad you like it :)
It's good to redo the math alone, It allow you to better understand and probably discover more cases alone and if you are a Math fan then you will not get border with my articles ;) There is always a math touch in many of them.

Collapse
 
afif profile image
Temani Afif

for anyone waiting for the next loader collection, it will be released next week with a lot of epic loaders! Don't miss it 😉

Collapse
 
grahamthedev profile image
GrahamTheDev

Commenting for the algo (I will look at it properly and comment properly later!)

Collapse
 
guscarpim profile image
Gustavo Scarpim

Nice!

Collapse
 
redrogue12 profile image
Edgar X. González Cortés

Awesome! Was surprised how little css went into this. I had seen a hex grid layout before with much more logic involved. Really liked how in-depth you went into explaining how it all works.

Collapse
 
armplinker_38 profile image
Allen R. Marshall

I love this. Fun.

A couple minor typos:
missalignment -- misalignment

centred -- centered (en-US)
controling -- controlling
precesily -- precisely

Cheers.

Collapse
 
afif profile image
Temani Afif

Thanks for this 👍

Collapse
 
spo0q profile image
spO0q 🐒🎃

Amazing work @afif I think you need some coffees for other legendary series.

Collapse
 
afif profile image
Temani Afif

thanks, I appreciate 👍