Flexbox vs. CSS Grid — Which is Better?

Layout Land
3 HN recommenders · recommended in 3 months, 2018–2020
YouTube
314K views · 8 years ago · explainer · intermediate · evergreen

Jen Simmons of Layout Land compares CSS Flexbox and CSS Grid. She explains what each is built for, where they overlap and how to choose between them.

HN people point to it whenever someone asks about flexbox versus grid, as the clearest rundown of what each does and does not do.

“Here's a great explanation from Jen Simmons that really helped me understand the differences”
CSS & front-end design craftWeb design
#cssgrid#flexbox#csslayout#jensimmons#weblayout

4 comments from Hacker News

J
@JamesSwift2020 · in “Ask HN: Resources to learn basic UI layout design for React apps?”
The two occupy a venn diagram of functionality. They do some stuff the same, but they also both do unique things the other doesnt. See this for a good rundown: ▶ this video
RecommendsView on HN
J
@JamesSwift2020 · in “Ask HN: Resources to learn basic UI layout design for React apps?”
Grid is awesome, and I highly recommend learning what it can do for you. That said, they serve different purposes. However, between the two of them they address 97% of my needs on the frontend. This[1] is a good rundown of what the two do/dont do. [1] - ▶ this video
RecommendsView on HN
l
@ljoshua2018 · in “Show HN: Layoutit – An interactive CSS Grid generator”
Here's a great explanation from Jen Simmons that really helped me understand the differences and respective strengths and weaknesses of each: ▶ this video
RecommendsView on HN
D
@Deimorz2018 · in “Best Practices with CSS Grid Layout”
They serve different purposes, and you'll often want to use both for different pieces of the layout. Flexbox is for laying things out in one dimension, Grid is more for two-dimensional ones. This video might help show the difference (and all the Layout Land videos are great if you want to look more into CSS grid): ▶ this video
RecommendsView on HN