New CSS Layout with CSS Grid & Flexbox
I haven't been working for such a long time in the Web and I would definitely call me a Junior Developer. Though I remember times where I built Websites with table Layout. It was for several university projects.
I looked back into the code and noticed that I was using a little position absolute & relative here and there but built the main layout of the page with tables. Yikes!
What you can learn from this blog post:
- Introduction – My Journey with CSS Layout
- Flexbox – what's that?
- Flexbox – don't use it for everything
- CSS Grid Layout
I guess I never heard of semantics these days. All I cared about was, that it worked. Somehow. After that I also learned about positioning with floats. But it never felt right for me. I managed to use kind of a combination of floats, display properties and absolute/relative positioning.
But CSS layout felt always strange for me, I never got behind the real concepts of it. It always felt like one big hack. This all changed when I first heard about Flexbox.
When I first learned about Flexbox, I was astonished.
I can position two elements next two each other, without the need of clearing floats?
I can position an element wherever I want it to be and even change the flowing directions or what happens, when the window shrinks?
I can center elements both, horizontally AND vertically?
Okay, wow. So much cool stuff that was possible now without any weird feeling fix or hack to make it work.
Flexbox stands for Flexible Box and the main concepts consists of different properties which allow it to arrange elements on a page such that they behave predictably when the page layout shrinks, grows or changes in another way due to different screen sizes or display devices.
You can read more about the concept behind Flexbox on the MDN Documentation ↗. Sure it took its time until Flexbox got wide browser support but now it's up to 94% of global browser support. For comparison browser-radius only got 90% global support.
To gain more attention for Flexbox, a lot of smart people made tools to help others learn the main concepts of Flexbox really fast. My favorite two are Flexbox Froggy ↗ and Flexbox Defense ↗. The first one lets you use the different Flexbox properties to guide Frogs to their lilypads. The second one uses Flexbox to position Towers all over a game court and destroy the incoming enemies with the help of these towsers.
If you haven't tried them out yet, don't hesitate to do it now! If you are not into Gamification there is also a great video ↗ by Joe Maddalone for egghead where he explains all Flexbox properties in ten minutes.
I also tried to contribute to the Flexbox learning movement. I made a small Flexbox playground where you can see all the Flexbox properties in action. You can switch between the different properties and immediately see their impacts and changes on the page layout.
I won't get into all the Flexbox properties in this blog post, there are other great resources which explain all about Flexbox very well, like the Complete Guide to Flexbox by Chris Coyier on CSS-Tricks ↗. This guide explains every Flexbox property in depth and covers every single thing you need to know to work with Flexbox.
For the first time working on a CSS Layout feels right for me, thanks a lot to Flexbox. It's great to make simple layouts for small, responsive websites. I also used it in most cases on my own website. But it also has its pitfalls and weaknesses. Therefore it's kinda hard to use Flexbox to built complex website layouts.
Of course it's possible and I've seen a lot of tutorials showing you how to build a mulitcolumn or a holy-grail layout with flexbox. But it's not meant for that. Jake Archibald ↗ explains why Flexbox shouldn't be used for page layout in this blog post ↗. The best use cases for Flexbox are laying out small interface components like form elements, the links in a menu, everything that's in a single dimension, in a row or a column.
"But you were so happy and confident about this new CSS layout method and now you say I should not use it for my overall page layout? I'm confused now!"
Sorry for that but there is another technology that will satisfy all of your needs, soon. It's called CSS Grid Layout.
While Flexbox has been designed to layout individual components and their chunks of content, CSS Grid Layout is perfectly for overall page layout.
"CSS Grid Layout (aka "Grid"), is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces." says Chris House in this amazing complete guide to grid ↗.
The big problem: global browser support is now at 8.1% ↗. It's currently a W3C Working Draft ↗ and it's only usable with the experimental flag enabled in google chrome. But it will be only a matter of time until CSS Grid will redefine the way we layout websites with CSS.
I won't get any deeper into all the properties of the CSS Grid Layout. There are some awesome guides out there, which will explain anything you need to know like the one from CSS-Tricks I mentioned before.
Another great person you will definitely come across when dealing with CSS Grid is Rachel Andrew ↗. She held some great talks about CSS Grid Layout and works hard to teach people more about this new technology everday and gain more support for it.
She is also the author and owner of gridbyexample.com ↗ where she explains everything that exists about CSS Grid Layout. It's one big collection of links to articles, videos and code examples so if you're willing to learn more about this topic, this is the right place to start.
I think CSS Grid Layout is great and in combination with Flexbox it seems to change the way how we create our layouts with CSS completely. After a long journey with techniques that weren't originally ment for page layout like tables and floats – which felt (for me personally) always like hacking and trying to fix it somehow so it works and breaks nothing – a new layout method has emerged and I'm really looking forward to it. I hope till the end of 2016 it will be ready to be used in production so we can establish finally a CSS layout method which is absolutely meant for this job.
Sources & Further Reading
- Complete Guide to CSS ↗ Grid via CSS-Tricks
- Collection of usage examples for the CSS Grid Layout ↗ via Rachel Andrew
- Making Sense of the New CSS Layout ↗ via Rachel Andrew – Talk at Fluent Conf
- The New CSS Layout ↗ via Rachel Andrew – Talk at dotCSS 2015
- Grid, Flexbox, Box Alignment: Our new System for Layout ↗ via Rachel Andrew
- An Introduction to the CSS Grid Layout Module ↗ via Ahmad Ajmi
- Deep Dive into Grid Layout Placement ↗ via Manuel Rego Casasnovas
- Should I use Grid or Flexbox? ↗ via Rachel Andrew
If you want to support me, you can buy me a coffee. I would be very happy about it!☕️ Buy me a coffee ☕️
I wish you a wonderful day! Marco