Flexbox & Grid How to Style with style
summary
Explains exact CSS controls: Flexbox for one‑dimensional components (navbars, card lists) using display:flex, justify/align, order: -1 to move an image before text at a breakpoint, and flex‑grow/shrink/basis for resizing. Shows Grid for page layout with display: grid, grid‑lines/areas, grid‑template-columns, gaps, 1fr and minmax/auto‑fill for responsive tracks. Demonstrates markup‑order independence, combines Grid+Flex for nested layouts, recommends @supports fallbacks to display:flex, and notes Grid is stable in modern browsers.
AI-written summary · about
chapters (18)
- 0:00Introduction and background
- 1:10Evolution of CSS layout
- 2:36What is Flexbox
- 4:46Flexbox axes and alignment
- 7:13Flex item properties
- 10:45When to use Flexbox
- 11:49Introduction to CSS Grid
- 13:20Flexbox vs Grid differences
- 14:32Grid container basics
- 15:35Grid item placement
- 17:49Grid area and template areas
- 20:00Grid markup and CSS example
- 21:53Responsive design with Grid
- 23:22Media queries in Grid
- 26:00Browser support and fallbacks
- 27:27Combining Flexbox and Grid
- 28:10Useful resources and tools
- 29:51Q&A session
related talks
17mThe New CSS Layout
29mLaying Out The Future With Grid And Flexbox
31m"CSS3 Layouts: Flexbox vs CSS Grid"
26mWhy CSS Grid is a game changer for web design
15mFlexbox
47mCSS Layout Techniques: Replacing Floats with Flexbox
44mCSS Layout Techniques: Replacing Floats With Flexbox
58mCSS Grid - What is this Magic?!