Flex-Box/CSS Grid Layouts

I have used floats in my styling for many years now. I do not even notice the problems and the amount of work coupled to doing things this way. It is time that I move on to better technologies and say good-bye to floats forever.

I have played around with CSS Grid and Flex-box for some time now but I am by no means an expert in either. Most of my clients that I do development for are using Internet Explorer and therefore CSS Grid is not the way to go for me at this stage. Flex-box is another story, everything runs very smoothly without any hacks in Internet Explorer.

As soon as I have all the kinks sorted out for a WordPress layout using flex-box throughout I will add such a layout to all my WordPress themes. I have added a bit of my experimentation as a Codepen which I embedded below. I would love comments and/or suggestions on how to improve the layout.

See the Pen
WordPress Flexbox Layout
by Arnold Goodway (@arnoldgoodway)
on CodePen.

I am also playing around with CSS Grid but in all honesty I am struggling with this stuff. I cannot test in Internet Explorer but the divs should simply collapse below one another `(like on a mobile) on browsers that do not support CSS Grid.

See the Pen WordPress CSS Grid Layout by Arnold Goodway (@arnoldgoodway) on CodePen.

Thanks for visiting.

Arnold.

Start the Conversation

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


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.