With Flexbox and especially with CSS Grid, a powerful way for designing user interfaces using just native CSS is available to us, filling the gap that made all the CSS grid frameworks came alive.
There are a lot of tutorials and information on both and still, a lot of developers are investing more time in learning a Grid framework than in mastering the native layout tools now available with CSS.
So, let’s see what they have to offer against a Grid Framework and why they should be your first choice on your path to becoming a master designing layouts.
The Flexible Box Layout Module provides an efficient way to layout, align and distribute items inside a container.
A main characteristic of Flexbox is that it can work either horizontally or vertically, a huge advantage against regular layouts using blocks that are vertically based or inline that are horizontally based.
The specification describes a CSS box model optimized for user interface design.
Since it was developed for designing user interfaces, building a grid system using Flexbox is straightforward, it might take you about 14 minutes to understand how to do it, and less than five to do it yourself:
Bootstrap 4 is now flexbox by default! Flexbox is an immensely powerful layout tool, providing unparalleled flexibility and control to our grid system and core components.
This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design.
I’m trying to understand if the twelve column grid makes sense anymore to layout a page. The twelve column grid can only use a subset of the features of CSS grid, without some utility classes added on to help and even then I’m not sure. If using React/Vue or some other framework, perhaps it’s time to dump the twelve column grid and use raw CSS grid instead. If you did that, you no longer have to use HTML div’s to layout your page. What are your thoughts?
Again, both Wes Bos and the Net Ninja have very thorough and professional free courses on CSS Grid worth the time:
Now that CSS Grid is gaining traction, everyone is asking if we should replace grid framework layouts with CSS Grid. And almost every answer is that doing so is a huge win.
We don’t want to limit CSS Grid by shoehorning it into a syntax that will limit its potential. We were able to easily recreate the Bootstrap grid, but CSS Grid is so much more powerful than any grid system that came before it. That’s because it is a web-native solution built from the ground up.
Also, you can watch this video showing the benefits of rewriting a Bootstrap grid layout with CSS Grid:
And that’s just regarding file sizes without taking into account that you are being restrained by the Bootstrap twelve columns grid system, and you should also consider the huge semantic gain by not having to rely on additional HTML markup just for layout purposes, like a div inside another div inside another div, etc. That’s not what markup is for, that’s what CSS is for.
So the question might be if grid frameworks are still relevant when we have CSS Grid. Probably, the answer is no.
But there might be still some time before developers drop the use of grid frameworks as they are too used to them.
It’s interesting to think about where these frameworks will go next because the frameworks are very much rooted in this idea of using divs and containers to create these advanced layouts and with CSS grid a lot of that goes away. So if the frameworks were to migrate to CSS Grid they would have to break their standard practice and retrain all the people who use it. That might mean that these frameworks will date themselves out of the game.
And the thing is what is going to happen? And I guarantee you what is going to happen is that just like Flexbox we are goint to see everybody posting their grid layout based grid frameworks to GitHub. But please, if you think of doing that, think about whether that abstraction actually adds anything or wether it just adds a sort of weird layer of complexity on top of something because a lot the time we’re not gonna need a grid layout based grid framework because grid is a grid framework built right into CSS.
So, the next time you are thinking about using a grid framework like the one provided by Bootstrap to layout your website, think twice. You might be adding extra complexity and losing flexibility. You might be better just learning Flexbox and CSS Grid inside-out.
And if you are thinking about writing the next grid framework, remember that CSS Grid is a grid framework.