This is all very true. CSS Grid does simplify the markup needed for a column based site, and means that people willing to design everything themselves do have a better alternative to frameworks like Bootstrap and Foundation.
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.
Agreed, but one can provide a "decent 'default' design" by leveraging CSS Grid and avoiding those pitfalls that come along with techniques used in Bootstrap.
Bootstrap has a leg up on CSS because all you need to know is centralized in Bootstrap's docs. Anyone who touches the project mainly just needs to credentialize in those docs.
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.
If you're using Bootstrap just for its great, yes I agree.
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 took a little practice to really grok CSS grid for me, but now that I'm somewhat used to it, I really have to agree with the author's position. I don't think you could talk me into going back to a bootstrap-style grid system.
Rachel Andrew has a great presentation on this that you can find on YouTube. But the summary of comparing them is this: flexbox is designed to help with 1-dimensional layout. It gets a bunch of elements to behave well when laid out in a row (and you can orient that row in all kinds of ways). Grid is designed for 2 dimensions, so rows and columns together. You can implement grids with Flexbox but it’s hacky. Whereas implementing grids with Grid, you will be working with the grain.
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.
Forgive me for what may be a cliché but aren't we just going back to 10 years ago when we moved from layout in HTML tables to CSS? Only now it's `<div class="row"><div class="col-xs-12">` instead of `<tr><td>`.
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.
The situation you describe is more of a middle-point -- moving layout from being based on tables to being based on styles was and still is a good idea, but there are still cases in which CSS has failed to fully separate layout from the HTML.
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.
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.