[KarimDaghari]

My rule of thumb:

2d -> grid

1d -> flex

For the resources, I recommend:

Flexbox: https://flexboxfroggy.com/

Grid: https://cssgridgarden.com/

[pedroma]

Agree.

Grid is great for 2D layouts especially if you're going to shift stuff around (e.g. responsive versions of the layout).

With Flexbox, you can sorta do it but it always feels way too hard, even if your layout is convenient enough to be able to use the order rule.

[KarimDaghari]

> Grid is great for 2D layouts especially if you're going to shift stuff around (e.g. responsive versions of the layout).

Exactly!

[nailer]

My rule: grid by default

  body,
  nav,
  header,
  article,
  section,
  figure,
  form,
  div,
  header,
  footer,
  button,
  .button {
    display: grid;
  }

.button is gross but included as older Chrome/Edgium have issues using grid/flex on proper buttons.

[KarimDaghari]

nav, figure and button: why wouldn't flex cut it?

[nailer]

because they nearly always might have two dimensions.

Good question. Think of a price button (to choose yearly payment, instead of monthly).

----

$299/year upfront *

Less than $25 a month

cancel anytime

----

* The symbol would be smaller, the number bigger, lined up in a horizontal row.

[KarimDaghari]

I would use: `flex-direction: row`. And use wrap the number and asterisk in a `span` and style them as needed.

[nkozyra]

That's a very common rule of thumb.

Where I struggle is that grid can do most of what flexbox does in 1d but ... generally simpler if you're relying on breakpoints to change your layout.

[KarimDaghari]

There are some things that grids aren't optimized for, one example that comes to mind is `justify/space-between` where you don't really need to think about the layout (by adjusting cols spans).

But yeah, for structural layouts grids are better.

[DiogenesKynikos]

The Flexbox tutorial is pretty good. You know you've reached a difficult level when it starts throwing Estonian instructions at you.

[floppiplopp]

Exactly this! It's not grid vs flexbox, it is grid AND flexbox.

[toastercat]

Can you elaborate what constitutes as 1D and 2D in web layouts?

[bradstewart]

Laying out a set of tabs would be 1D (either horizontal or vertical). Laying out an page with headers, footers, and sidebars would be 2D (vertical and horizontal).

[schwartzworld]

but headers, footers and sidebars are all trivial with flexbox. what's the advantage of grid in those cases?

[ehutch79]

Nope. You're probably abusing flexbox. This layout:

| HEADER | |Nav|Content|Sidebar| | Footer |

is more what we're talking about. You could do that, but it's not what flexbox was meant for. Try grid out. It will work easier for grid like layouts.

[schwartzworld]

I know what layout you're talking about and it's trivial with flexbox. Why would you need a grid for that?

[bradstewart]

You don't _need_ grid, but it does make it simpler. You technically don't need flexbox either.

In grid you can define this layout in a single construct. Whereas with flexbox, you're defining several nested flex elements to get there.

You can think about the entire layout as a unit, rather than the horizontal parts first (sidebar/main content) then the vertical (header/footer) or vise versa.