9 Biggest Mistakes with CSS Grid





The interactive transcript could not be loaded.


Rating is available when the video has been rented.
This feature is not available right now. Please try again later.
Published on Jul 16, 2018

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?”: https://youtu.be/hs3piaN4b5I
“Using Flexbox & Grid Together”: https://youtu.be/dQHtT47eH0M
“Obliterate Boxiness with CSS Shapes”: https://youtu.be/pOB75oTNhw0

Mistake 2: Using Only Percents for Sizing
“Min & Max Content Sizing in CSS Grid”: https://youtu.be/lZ2JX_6SGNI
“FR Units in CSS Grid“: https://youtu.be/ZPtpzuRajzM
“MinMax in CSS Grid”: https://youtu.be/mVQiNpqXov8

Mistake 3 : Assuming You Need Breakpoints
“Incredibly Easy Layouts with CSS Grid”: https://youtu.be/tFKrK4eAiUQ

Mistake 4: Getting Confused by Numbering
“Innovative & Practical Graphic Design with CSS Grid”: https://youtu.be/-hmOZU7Zk10
“Basics of CSS Grid: The Big Picture”: https://youtu.be/FEnRpy9Xfes

Mistake 5: Always Using 12-columns
Jen talks about this towards the end of “FR Units in CSS Grid“: https://youtu.be/ZPtpzuRajzM?t=5m52s

Mistake 6: Ignoring the Power of Rows
“Flexibility & The Fold”: https://youtu.be/EEOJZy_Gge4
“Whitespace on The Web”: https://youtu.be/YfIjFeBLhyA

Mistake 7: Reaching for a Framework

Mistake 8: Waiting for IE11 to Die
“Internet Explorer + CSS Grid?”: https://youtu.be/7msERxu7ivg
7-part Series on Writing Resilient CSS that works in all browsers: https://www.youtube.com/playlist?list...

Mistake 9: Hesitating, Instead of Playing
“Responsive Mondrian”: https://youtu.be/qNtJ5p3h2A4
“CSS Grid like you are Jan Tschichold”: https://youtu.be/OxrsO4aIjyc


When autoplay is enabled, a suggested video will automatically play next.

Up next

to add this to Watch Later

Add to

Loading playlists...