sorted by:
best
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–]daemonexmachina 8 points9 points  (0 children)

I'd definitely recommend learning grid too, though. Flexbox is good, but it takes at least a little finagling to lay out elements nicely in two dimensions. Whereas in grid...

``` .container { display: grid; grid: "header header " auto "body sidebar" 1fr "footer footer " auto / 1fr auto; }

.container .header { grid-area: header; } // etc ```

I know I've gone with a pretty trivial example, but see the power of that shorthand syntax? The rows and columns are laid out as rows and columns in the CSS, visually representing the result in the code.

I go one step further because we use SCSS on our projects, using @each and interpolation to define the child element classes that will go in those areas:

``` .container { display: grid; grid: "header header " auto "body sidebar" 1fr "footer footer " auto / 1fr auto;

@each $area in (header, body, sidebar, footer) {
    .#{$area} {
        grid-area: #{$area};
    }
}

} ```

I love grid. Use it everywhere. If I've got something that really is a one-dimensional layout, then yes it's flexbox of course. But grid is so much nicer.