
CSS Grid is better than Bootstrap for creating layouts - mrborgen
https://hackernoon.com/how-css-grid-beats-bootstrap-85d5881cf163
======
CM30
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.

~~~
johnhenry
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.

------
always_good
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.

------
pcurve
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's not really an apple to apple comparison.

------
karmajunkie
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.

------
lxchase
Does anyone have experience with both CSS Grid and CSS Flexbox? Are they
comparable?

~~~
mtpn
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.

------
paperpunk
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.

What are we doing to address this?

~~~
nailer
Totally agreed that Bootstrap styling-in-HTML sucks, but it was only ever
pushed by Bootstrap, BEM and other things that are slowly going away.

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.

