CSS Grid is better than Bootstrap for creating layouts
hackernoon.com
hackernoon.com
However, I think what a lot of people miss about these frameworks is that they're not just easy to use systems for coding a grid layout. They also provide decent 'default' designs for people with zero artistic talent.
And that's crucial for people who struggle with things like colour schemes, button/menu/pagination designs, etc. For someone whose favoured design ascetic is that of a 90s Geocities page, the standard Bootstrap styles will at least help it remain looking like something from the 21st century.
Bootstrap isn't just a frameworking tool, it's a quick way for people with no visual design skills or without a proper designer to make something that looks at least passable by using the default components and their included styles.
That is in style again
Meanwhile, I'm not sure I've even worked on a project where the CSS files didn't devolve into an unmaintainable append-only log.
For example, the blog post's hello world CSS seems pretty nice at a glance. But I know that in the real world, you'll have to do quite a bit of reading to find all those grid annotations in the CSS and then composite them together in your head to get an idea of why the website looks the way that it does.
Because of this, I consider the extra HTML of a solution like Bootstrap to be a pretty small price to pay in the scheme of trade-offs. I've seen quite the monstrosities committed (even by myself on hobby projects) in the effort to minimize markup.
Of course, there's never a best way to do something, only trade-offs.
But Bootstrap has a lot of battle tested UI components that does a lot of heavy lifting. Also, you can customize a lot of via editing variable.less or if you're included, edit individual less files.
It's not really an apple to apple comparison.
My favorite thing about grid is that using grid overrides floats, so you can have a kind-of-ok floated layout as a fallback on browsers that don’t support grid, and it’s very little work to do so.
I worry that the reason people started to swing back towards that style isn't really being addressed by things like CSS Grid. That being that it's very hard to maintain CSS because it's very hard to reason about what rules are being applied where unless you follow some strict personal naming conventions.
What are we doing to address this?
The article discusses how bootstrap uses patterns like `<div class="row"><div class="col-xs-12">` -- specifically why they fail and how using the CSS Grid specification manages to better achieve this full separation.
I build using CSS grid. Since there's no requirement for stylistic class names, I don't use them: instead I use the class names for what that item is.
Eg, to make a login box I use:
<div class="login">
.login {
@include center-in-parent;
background: $dark-background;
}
Rather than: <div class="bootstrap-centered-dark-background-silly-styling-in-html">
As a result, when I change what login box looks like I change only my SCSS, rather than both the HTML and the SCSS.