9 Biggest Mistakes with CSS Grid

Layout Land
2 HN recommenders · recommended in 3 months, 2019–2022
YouTube
166K views · 8 years ago · tutorial · intermediate · dated

A Layout Land video by Jen Simmons that walks through nine common mistakes people make when learning CSS Grid. It covers things like treating Grid as the answer to everything, sizing only with percentages, and assuming you still need breakpoints.

HN points people to it as the quick, practical corrective for outdated CSS habits, especially the claim that Grid can replace many breakpoints and media queries.

“I recommend watching this excerpt from an excellent video by Jen Simmonds”
CSS & front-end design craftWeb design
#cssgrid#responsivedesign#breakpoints#layout#front-end

4 comments from Hacker News

a
@andrei_says_2022 · in “User Interface Design: Rules of Thumb”
An example of thoughtful approach to ui link A collection of ui patterns link A great resource for css reference link link Covers the basics with zero pretense Kevin Powell on YouTube has great css rutorials link Jen Simmons on YouTube and link ▶ this video
RecommendsView on HN
o
@open-source-ux2021 · in “The anti-pattern of responsive design”
The mobile-first approach that web developers have adopted reflects the desire to maintain one codebase regardless of device. What the author of the article proposes is what we used to have before responsive websites: separate mobile and desktop websites. You can design responsive websites today using CSS Grid without needing media queries, and the resulting sites can offer a better experience than using media queries. Unfortunately, not many developers are taking such an approach. Why not? It may be they are: - using a CSS framework (that does not use CSS Grid) - using a CSS-in-JavaScript-style framework - need to support older browsers - simply aren't aware of modern CSS features available CSS is still horrible and will never be anything less than that, but...modern CSS (for modern browsers) lets you leave behind all the horrible CSS hacks from the past. I recommend watching this excerpt from an excellent video by Jen Simmonds (Developer Advocate at Mozilla) on CSS Grid from 2018: CSS Grid: Assuming You Need Breakpoints: ▶ this video
RecommendsView on HN
o
@open-source-ux2019 · in “Mistakes with CSS Grid [video]”
Submitted the video to Hacker News.
RecommendsView on HN
o
@open-source-ux2019 · in “Mistakes with CSS Grid [video]”
The list of mistakes with links to the segments in the video: 1. Thinking CSS Grid is everything: ▶ this video 2. Using only percents for sizing: ▶ this video 3. Assuming you need breakpoints: ▶ this video 4. Getting confused by numbering: ▶ this video 5. Always using 12-columns: ▶ this video 6. Ignoring the power of rows: ▶ this video 7. Reaching for a framework: ▶ this video 8. Waiting for IE11 to die: ▶ this video 9. Hesitating, instead of playing: ▶ this video
CitesView on HN