On October 10, 1994, . But then the Internet exploded with web apps and devices, and CSS fell behind. It was not designed to layout complex user interfaces on multiple screen sizes. Cascading Style Sheets (CSS) was proposed to style online documents So, CSS frameworks came alive. And with a huge success, they did. A quick gives more than 500 repositories as a result. search on Github for CSS grid frameworks Bootstrap was . Something was missing from CSS that made people reach out for frameworks as if their life depended on it. the most starred project on Github for a long time But a lot has changed since CSS was first implemented and . CSS has been catching up with the new requirements of the web, and it has done it very well. the layout of webpages was done with HTML tables Now we have , a bunch of , and not only one, but two CSS modules for layout: Flexible Box Layout Module, and The Grid Layout Module. custom properties (CSS Variables) CSS Functions 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 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. This is the first line of the : Flexbox spec 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: It is so powerful that even Bootstrap 4 is using Flexbox behind the scenes. This is from January 2017: their announcement 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. If you want to deep dive into Flexbox, I couldn’t recommend enough the course by Wes Bos available for free on YouTube. What The Flexbox?! The Net Ninja also has a free and very worth watching. in-depth Flexbox course You should also keep at hand the visual guide on CSS Tricks as a reference when working with Flexbox: . A complete guide to Flexbox CSS Grid Layout Module While Flexbox is largely a one-dimensional system, with CSS Grid we have a two-dimensional native CSS layout system for the web, which allows us to easily recreate framework-based grids using just a few lines of CSS. This is the first line of the spec: CSS Grid This CSS module defines a two-dimensional grid-based layout system, . optimized for user interface design Although CSS Grid is gaining popularity it is still not widely used, less than 5% of the sites are using it according to the . Chrome Platform Status Flexbox is more popular at this time and is . CSS Grid is . fully supported by all browsers almost there And of course, . So yeah, build it and they will come. Bootstrap 5 is already planning to use CSS Grid A better solution for Bootstrap might be to drop the twelve column grid system as proposed by : Muhammad Rehan Saeed 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? Probably the best place to start and get a good understanding of CSS Grid is the website by Rachel Andrew, a member of the . You could also and related topics, you probably won’t regret it. Grid by Example CSS Working Group search YouTube for the many talks she has given on CSS Grid Again, both Wes Bos and the Net Ninja have very thorough and professional free courses on CSS Grid worth the time: . Wes Box CSS Grid . The Net Ninja CSS Grid Tutorial And if you are short of time and only want to visit one resource, this should be it: , by Jen Simmons. She is also a member of the CSS Working Group and one of the brilliant minds behind the coming revolution in graphic design on the web, so if this topic matters to you, you should listen to what she has to say. Jen Simmons Lab Just scroll down her page to take a look at the amazing power of CSS Grid, and also be sure to check her YouTube channel . Layout Land Conclusion 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. Dan Brown demonstrated how simple and efficient it is to replace a Bootstrap layout with CSS Grid in , but warns us about using CSS Grid to recreate the Bootstrap Grid Framework, as we are restricting it of many of its real capabilities by doing so: this insightful article 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: As you can see, regarding file size, the Bootstrap version is one. Even after running the Bootstrap version over the Bootstrap version is 3.4 times larger! 58 times larger than the native CSS PurgeCSS 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. Morten Rand-Hendriksen couldn’t say it better on his : great introductory talk to CSS Grid 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 Rachel Andrew predicted all of this when in February 2017: presenting the CSS Grid framework 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 a grid framework. is Additional resources . The state of CSS . CSS Standardization . A brief history of CSS until 2016 : This is not about CSS frameworks in general, they are still , including Bootstrap. This is about CSS frameworks, like the twelve column grid system included with Bootstrap, and that’s just a part of what Bootstrap offers. PS very useful in many circumstances grid

BUNCH

YouTube

Mauricio Robayo

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

CSS Grid is a Grid Framework

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Mauricio Robayo

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

CSS Grid is a Grid Framework

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Mauricio Robayo

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES