My rule of thumb:
2d -> grid
1d -> flex
For the resources, I recommend:
Flexbox: https://flexboxfroggy.com/
2d -> grid
1d -> flex
For the resources, I recommend:
Flexbox: https://flexboxfroggy.com/
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.
Exactly!
body,
nav,
header,
article,
section,
figure,
form,
div,
header,
footer,
button,
.button {
display: grid;
}
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.
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.
But yeah, for structural layouts grids are better.
| 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.
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.