9 Biggest Mistakes with CSS Grid
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. Jen lists the 9 Biggest Mistakes she sees people making when using CSS Grid, with advice and tips for avoiding these pitfalls and old habits.
Mistake 1: Thinking CSS Grid is Everything
“Flexbox vs. CSS Grid — Which is Better?”: • Flexbox vs. CSS Grid — Which is Better?
“Using Flexbox & Grid Together”: • Using Flexbox + CSS Grid Together: Ea...
“Obliterate Boxiness with CSS Shapes”: • Obliterate Boxiness with CSS Shapes
Mistake 2: Using Only Percents for Sizing
“Min & Max Content Sizing in CSS Grid”: • Min & Max Content Sizing in CSS Grid ...
“FR Units in CSS Grid“: • FR Units in CSS Grid — 2/3 Flexibility
“MinMax in CSS Grid”: • MinMax in CSS Grid — 3/3 Flexibility
Mistake 3 : Assuming You Need Breakpoints
“Incredibly Easy Layouts with CSS Grid”: • Incredibly Easy Layouts with CSS Grid
Mistake 4: Getting Confused by Numbering
“Innovative & Practical Graphic Design with CSS Grid”: • Innovative & Practical Graphic Design...
“Basics of CSS Grid: The Big Picture”: • Basics of CSS Grid: The Big Picture
Mistake 5: Always Using 12-columns
Jen talks about this towards the end of “FR Units in CSS Grid“: • FR Units in CSS Grid — 2/3 Flexibility
Mistake 6: Ignoring the Power of Rows
“Flexibility & The Fold”: • Flexibility & The Fold – new possibil...
“Whitespace on The Web”: • Whitespace on The Web! — with CSS Grid
Mistake 7: Reaching for a Framework
Mistake 8: Waiting for IE11 to Die
“Internet Explorer + CSS Grid?”: • Internet Explorer + CSS Grid????
7-part Series on Writing Resilient CSS that works in all browsers: • Resilient CSS: 7-part Series
Mistake 9: Hesitating, Instead of Playing
“Responsive Mondrian”: • Responsive Mondrian – a demo of CSS Grid
“CSS Grid like you are Jan Tschichold”: • CSS Grid like you are Jan Tschichold