HackerTube
HomeLongsLikedHistoryWatch laterCategoriesPlaylistsSettings

Flexbox vs. CSS Grid — Which is Better?

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

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.

Recommended as a short, clear rundown of one-dimensional versus two-dimensional layout.

Web development#cssgrid#flexbox#css#weblayout#jensimmons

4 comments from Hacker News

@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
@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
@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

Strongly recommendsView on HN
@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
CSS Grid Changes EVERYTHING - Amazing Presentation32:06

CSS Grid Changes EVERYTHING - Amazing Presentation

Coding Tech
1.1M views • 9 years ago
Morten Rand-Hendriksen: CSS Grid Changes Everything (About Web Layouts)44:11

Morten Rand-Hendriksen: CSS Grid Changes Everything (About Web Layouts)

WordPress
51K views • 9 years ago
React.js Conf 2015 - The complementarity of React and Web Components25:47

React.js Conf 2015 - The complementarity of React and Web Components

Meta Developers
22K views • 11 years ago
Andy Bell – Be the browser’s mentor, not its micromanager43:33

Andy Bell – Be the browser’s mentor, not its micromanager

Hey! Presents
23K views • 4 years ago
React.js Conf 2016 - Ben Alpert - What Lies Ahead27:45

React.js Conf 2016 - Ben Alpert - What Lies Ahead

Meta Developers
50K views • 10 years ago
Keynote: What is a Component (and Why)? - Luke Wagner, Distinguished Engineer, Fastly29:51

Keynote: What is a Component (and Why)? - Luke Wagner, Distinguished Engineer, Fastly

The Linux Foundation
7K views • 3 years ago
Cheng Lou - On the Spectrum of Abstraction at react-europe 201635:32

Cheng Lou - On the Spectrum of Abstraction at react-europe 2016

ReactEurope
63K views • 10 years ago
Chrome vs Firefox vs Safari vs Servo WebRender0:14

Chrome vs Firefox vs Safari vs Servo WebRender

Jake Archibald
121K views • 10 years ago
Hacker Way: Rethinking Web App Development at Facebook44:36

Hacker Way: Rethinking Web App Development at Facebook

Meta Developers
900K views • 12 years ago
React.js Conf 2015 - Beyond the DOM: How Netflix plans to enhance your television experience25:55

React.js Conf 2015 - Beyond the DOM: How Netflix plans to enhance your television experience

Meta Developers
26K views • 11 years ago
"Building a Toolkit for Design" by Matthew Griffith32:25

"Building a Toolkit for Design" by Matthew Griffith

elm-conf
25K views • 8 years ago
Meteor Screecast9:43

Meteor Screecast

meteorscreencasts
50K views • 14 years ago
Your web app but good: Aaron Boodman (Local-First Conf)19:36

Your web app but good: Aaron Boodman (Local-First Conf)

Local-First Conf
8K views • 2 years ago
Sebastian Markbage: Minimal API Surface Area | JSConf EU 201424:28

Sebastian Markbage: Minimal API Surface Area | JSConf EU 2014

JSConf
71K views • 12 years ago
React Today and Tomorrow and  90% Cleaner React With Hooks1:35:30

React Today and Tomorrow and 90% Cleaner React With Hooks

React Conf
1.2M views • 8 years ago
Progressive Performance (Chrome Dev Summit 2016)35:42

Progressive Performance (Chrome Dev Summit 2016)

Chrome for Developers
34K views • 10 years ago
High Performance Web Sites and YSlow1:00:34

High Performance Web Sites and YSlow

Google TechTalks
90K views • 18 years ago
Lin Clark - A Cartoon Intro to Fiber - React Conf 201731:48

Lin Clark - A Cartoon Intro to Fiber - React Conf 2017

Meta Developers
216K views • 9 years ago
React Helsinki February 20201:16:07

React Helsinki February 2020

Fraktio
42K views • 6 years ago
Nicholas Zakas: Scalable JavaScript Application Architecture52:23

Nicholas Zakas: Scalable JavaScript Application Architecture

YUI Library
68K views • 15 years ago