It’s easy to make lots of mistakes with a new technology, especially something that’s as big of a change from the past as CSS Grid. In this video, I explain the 9 Biggest Mistakes people are making, with advice and tips for avoiding these pitfalls and breaking old habits.

For more information:

Mistake 1: Thinking CSS Grid is Everything
Flexbox vs. CSS Grid — Which is Better?
Using Flexbox & Grid Together
Obliterate Boxiness with CSS Shapes

Mistake 2: Using Only Percents for Sizing
Min & Max Content Sizing in CSS Grid
FR Units in CSS Grid
MinMax in CSS Grid

Mistake 3 : Assuming You Need Breakpoints
Incredibly Easy Layouts with CSS Grid

Mistake 4: Getting Confused by Numbering
Innovative & Practical Graphic Design with CSS Grid
Basics of CSS Grid: The Big Picture

Mistake 5: Always Using 12-columns
I talk about this towards the end of “FR Units in CSS Grid”

Mistake 6: Ignoring the Power of Rows
Flexibility & The Fold
Whitespace on The Web

Mistake 7: Reaching for a Framework

Mistake 8: Waiting for IE11 to Die
Internet Explorer + CSS Grid?
7-part Series on Writing Resilient CSS that works in all browsers

Mistake 9: Hesitating, Instead of Playing
Responsive Mondrian
CSS Grid like you are Jan Tschichold

https://hacks.mozilla.org/2018/07/9-biggest-mistakes-with-css-grid/