Talks to Watch

Flexbox vs. CSS Grid — Which is Better?

314K views · Jan 30, 2018 · 4:18 · 3 HN recommenders · 4 mentions · discussed 2018–2020

Jen Simmons explains the difference between CSS Flexbox and CSS Grid, and when to use each. She makes the case that Grid does not replace Flexbox and most sites use both.

Why Hacker News points people here: Recommended as a short, clear rundown of one-dimensional versus two-dimensional layout.

“Here's a great explanation from Jen Simmons that really helped me understand the differences”HN comment, 2018

What Hacker News said 4

Strongly recommendsljoshuaJul 2018

“Here's a great explanation from Jen Simmons that really helped me understand the differences”

Jen Simmons explaining differences and strengths of flexbox and grid.

Full comment

Here's a great explanation from Jen Simmons that really helped me understand the differences and respective strengths and weaknesses of each: this video

in “Show HN: Layoutit – An interactive CSS Grid generator” · view on HN
RecommendsDeimorzMay 2018

“all the Layout Land videos are great if you want to look more into CSS grid”

Shows the difference between one-dimensional flexbox and two-dimensional grid.

Full comment

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

in “Best Practices with CSS Grid Layout” · view on HN
RecommendsJamesSwiftApr 2020

“This[1] is a good rundown of what the two do/dont do.”

Good rundown of what flexbox and grid do and do not do.

Full comment

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

in “Ask HN: Resources to learn basic UI layout design for React apps?” · view on HN
RecommendsJamesSwiftApr 2020

“See this for a good rundown”

Rundown of overlap and unique strengths of flexbox and grid.

Full comment

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

in “Ask HN: Resources to learn basic UI layout design for React apps?” · view on HN