HackerTube

THE VIDEO SHELF · css layout

Flexbox vs. CSS Grid — Which is Better?

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 HN readers recommended it

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

This is a summary from the source dataset, not an endorsement by Hacker News or the video creator.

Video & recommendation details

Creator / channel
Layout Land
Topic
css layout
Format
explainer
Level
intro
HN recommenders in dataset
3
HN mentions in dataset
4
Recommendation years in dataset
2018–2020

These counts and years describe the included Hacker News records; they are not YouTube views or the video’s publication date.

From the original HN conversations

Excerpts from the recorded comments. Follow each source for the full comment and surrounding discussion.

  • Here's a great explanation from Jen Simmons that really helped me understand the differences and respective strengths and weaknesses of each: [VIDEO]

    ljoshua on Hacker News · 2018-07
    In Show HN: Layoutit – An interactive CSS Grid generator
  • 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 …

    Deimorz on Hacker News · 2018-05
    In Best Practices with CSS Grid Layout
  • 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 …

    JamesSwift on Hacker News · 2020-04
    In Ask HN: Resources to learn basic UI layout design for React apps?

Summaries, classifications and recommendation records are from the HackerTube source dataset. Read about this library and its limitations.