CSS Grid is a new way of creating layouts on the web. For the first time ever we have a proper layout system available natively in the browser, w...
For further actions, you may consider blocking this person and/or reporting abuse
People don't use bootstrap just for the grid, there are N different CSS frameworks to implement grids. What bootstrap brings to the table is a predefined and standard set of CSS widget styles (buttons, text-boxes, drop-downs and most importantly, the navbar). There are very few other CSS libraries which provide such widget styles and bootstrap gives it away for free through the MIT license! This is the reason for bootstrap's rapidly increasing popularity.
As a back-end webdev who doesn't know a thing about front-end styling, I can take the bootstrap theme and get working on my app since day one! There are no other CSS frameworks that do this as perfectly as bootstrap does. There are others like zurb foundation and bulma but they are light years behind bootstrap in terms of stability and comprehensiveness.
Using Bootstrap UI components does not require you to use Bootstrap for layout.
The crazy thing to me is at some point you did learn how the Bootstrap grid works, and I assume you learn how new tools work as a part of your job all the time. But with html and css folks who describe themselves as backend seem to be like "nah".
When bootstrap first arrived there was only floats for grids & nobody was doing responsive design. The first bootstraps did not include responsive elements. Fontawesome wasn't included (gyph). Designers started using it mostly for the JS parts (carousel etc) & grid math.
Bootstrap is great to make an instantly nice site & is useful.
Now that grids/variables etc are here, it is not worth it but I can see why people like it (deep stuff like btn state is done).
I use Bootstrap just for grid ;)
CSS Grid is great, but hard to work with a team of junior devs
I remember how I was sitting at the computer and I was so bored with the layout, constantly something was going somewhere wrong, and so I sat and tried to make layouts where everything would be ready. And then I came across a post and saw the bootstrap. The effect was WOW. So this is the same thing that I sit and do. I immediately abandoned my project, as the grid in the bootstrap was more beautiful and more structured. My grid was based on 960Grid, but it was super-simple and small in size. I called it 100Grid, allocated 1% to each block, and the whole screen was broken not into 12 or 16 blocks but into 100.
Time passed and I see that the bootstrap is used so ineptly as jquery - they shove the entire library into a 250 KB project, and not Understand what is needed from it. And I once compressed jquery to 15 kb, and if I needed some kind of module, I added it separately and only to the page where it was needed.
Unfortunately, none of the programmers has yet come up with a great (easy) method in using only such code that is now on the page, so that unnecessary libraries / styles / markup / are not displayed if the document is not necessary.
Bootstrap was just the very first, like Google, which he suggested doing quickly, conveniently for the developer, a well-documented library.
But now this again makes him a monster, in which simply by connecting it you get at least 250 kb of load to your site and redundant output of DOM elements.
Being backend dev, I still prefer Bootstrap for quick start up. I am eagerly waiting for Bootstrap 5 which will be without jQuery... Awesome!!!
And lot of HTML widget on internet for bootstrap is real deal for me
Hmm maybe I'm missing something here but didn't you just describe the basic use case of a framework?
Use Bootstrap: add some classes and let the framework do the work.
vs
Use CSS Grid: write plain CSS with no support from framework.
Of course you are more flexible if you write everything yourself!
In your first Bootstrap example you used 11 classes and no CSS.
With CSS Grid that's 5 classes and 17 lines of CSS code. For me that's not simpler...
And you can stick all the Bootstrap columns in one .row container to reduce markup AND make it possible to do your "Much more flexibility" example with just TWO more classes and NO additional CSS. That is a clear win for bootstrap for me.
If you want to make your page responsive you could add 5 or 6 classes in bootstrap OR write between 50 - 150 lines of complex CSS code yourself.
Your 7 column example is valid of course. If you need a number of columns that are not multiples of 2 you have to write the CSS yourself and for that case CSS Grid is great!
But I do not see any reason to use it on a 6 column layout for example.
Hi Per! I always enjoy your articles and learn so much from them. Would you mind if I included this article in my June newsletter? I'll provide a link to this article as well as attributing you if you're alright with that?
There are many advantages to using frameworks such as BootStrap other than the grid. Personally I use UiKit and love the prebuilt styles as well as the built in functionality provided (menus, galleries, etc).
That said I clearly see benefits of CSS Grid and am adding it to my skill set as another tool in the arsenal.
Thanks for the article.
Is this article copied from somewhere else? It says June 6th, 2019 but the information is a bit out of date, like Bootstrap 4 being in Beta, it's not, it's well beyond that at v3.4.1, and the caniuse.com info of CSS Grid being 75% supported is wrong, it's 92% now.
CSS Grid is fantastic, love it. Bootstrap 4 is great if you have a large team of non-front end peeps since they can understand the markup/classes.
Oh, sorry, I forgot to update it. Yes, I've previously published this post on Medium.
Nice article, nice examples. I will check out your course.
Just wanted to point out a little typo, for one of your expert's names. It's "Morten Rand-Hendriksen", not "Eriksen". I have taken several of his courses, including the CSS Grid Layouts course on Lynda.
Great points. I especially agree that using classes like col-xs-4 and so forth, complicates the code both in HTML and CSS.
Question : Compared to just plain flex box in css, what are advantages and disadvantages over css grid?
I think CSS Grid is better for two-dimensional layouts while Flexbox is better for one dimension, as Grid is a bit of an overkill for one dimension. They're also great to use together actually.
I actually talk about Grid vs Flexbox in this tutorial: scrimba.com/p/pWqLHa/cZgMGt4
I'm not sure this advice is safe without mentioning some more tradeoffs.
-If you have a small site (static) then the "clutter" is less of a problem.
-If you have an "application" the graceful enhancement will probably brake some functionality.
-If you have to be pixel perfect there are a lot of quirks to beware github.com/rachelandrew/gridbugs/
-If you have to support ie10/11 (business apps) now you likely have to maintain 2 different websites.
It probably is OK tout-court only in electron or similar predictable environments.