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