Is Learning CSS Grid A Waste of time? (Can it Replace Flexbox?)
Is learning CSS Grid a waste of your time? How does it compare to Flexbox?
This tutorial begins with a face-off… A comparison of CSS Grid vs CSS Flexbox.
We then explore new territory by analysing Grid in quite some depth. A few things that both Grid and Flexbox can do in a similar manner are:
1) Free and controlled flexing.
2) Wrapping items onto new rows.
3) Centring text within the container’s items.
We use the browser development tools to more closely examine how CSS Grid is operating and discover the nature of grid-area allocation independent of the HTML structure.
00:00 - CSS Grid vs Flexbox
02:01 - CSS Grid diverges from Flexbox
03:03 - Discovering the true power of CSS Grid
03:39 - DevTools example (auto-fill vs auto-fit)
04:49 - Playing: grid-auto-flow - row & column
07:55 - Experimenting with grid-template-areas