Skip to content
Hallway
0:00 / 0:00

#cssgrid#flexbox#csslayout

Flexbox vs. CSS Grid — Which is Better?

Layout Land

75K subscribers • 2 videos on Hallway

YouTube
  • Recommended by 3 people: 3 on Hacker News.
  • Presented by Jen Simmons, Mozilla
  • May be out of date. Uploaded 8 years ago, in an area where tools change fast.

Beginner. No background in the topic needed.

314K views8 years ago3 recommendations

Web developmentCSS and layoutVue, Svelte, Angular and others

Jen Simmons explains the differences between CSS Flexbox and CSS Grid, showing how they complement each other on modern websites.

One of the most commonly asked questions about CSS Grid is “Does CSS Grid replace Flexbox? Is it better than Flexbox? Should I use it instead of Flexbox?” The answer is no — we will use both Grid and Flexbox on most sites, along with flow content, floats, and other CSS for layout. This video explains the differences between Flexbox and Grid, and when to use which one.

Why it's here

3 people recommend this

What people say. Recommended as a clear explanation of when to use Flexbox versus CSS Grid and how they work together.

ljoshuaon Hacker News • Recommends

On “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: link to this video
View on Hacker News

Deimorzon Hacker News • Recommends

On “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): link to this video
View on Hacker News

JamesSwifton Hacker News • Recommends

On “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. This1 is a good rundown of what the two do/dont do. 1 - link to this video
View on Hacker News

JamesSwifton Hacker News • Recommends

On “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: link to this video
View on Hacker News