"CSS3 Layouts: Flexbox vs CSS Grid"

on YouTube ↗31m

" summary

Company revamp uses Flexbox for rows, alignment and reordering so layouts are equal height and responsive, with browser support around 90% of modern browsers and older IE needing old syntax. Live demo shows display:flex, align-items, justify-content, flex-basis/grow/shrink, flex-wrap, flex-direction and order working as claimed. CSS Grid is shown as grid-template-columns, repeat, grid-column/grid-row start end and template areas but not production ready in all browsers so it is used for experiments and side projects while Flexbox handles alignment in production.

AI-written summary · about

" chapters (15)

1. 0:00Introduction
2. 1:43Tables
3. 2:41Floats
4. 4:42Flexbox
5. 5:22Browser support
6. 8:12Flexbox vs Grid
7. 9:35Basic CSS
8. 10:47Alignment
9. 13:13Wrap
10. 16:08reverse
11. 17:55Flexbox recap
12. 18:54RTL compatibility
13. 19:39CSS Grid
14. 21:01CSS Grid Example
15. 25:50CSS Grid Recap

" related talks

• 17mThe New CSS LayoutRachel Andrew · dotCSS 2015
• 29mStart Using CSS Grid Layout TodayRachel Andrew · Render Conference 2017
• 50mPresent and Future of CSS LayoutTab Atkins · CSS Day 2014
• 15mFlexboxRyan Seddon · Web Directions South 2013
• 31mHow to use CSS grid today in the real worldBrenda Storer · CSSConf AU 2018
• 29mLaying Out The Future With Grid And FlexboxRachel Andrew · CSSConf.Asia 2016
• 01h 02mStart Using CSS Grid Layout TodayRachel Andrew · Frontend United 2017
• 47mCSS Layout Techniques: Replacing Floats with FlexboxBermon Painter · FITC Spotlight: Responsive Design 2016