Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

DevTools, the CSS Advocate in Your Browse

JSConf via YouTube

Start learning Write review
Destination Certification Ad

CISSP MasterClass with a true CAT exam simulator

Learn More → Coursera Ad

Learn AI, Data Science & Business — Earn Certificates That Get You Hired

Learn More →

Overview

Google, IBM & Meta Certificates – 40% Off
One Coursera Plus subscription covers most Professional Certificates on Coursera.
Unlock All Certificates
This talk uses browser DevTools to explain how CSS sizing works in existing layouts and make new CSS easier to try. It covers Flexbox free space and flexible CSS Grid sizing, including fr and minmax behavior.

Syllabus

Intro
Contentbased sizing
Flexbox
Freespace distribution
Flexbased sizing
Grid Inspector
Flexible Sizing
CSS Grid
CSS Fr
MinMax
MinMax vs Auto
MinMax shrinks
MinMax shrinks together
MaxMax shrinks together
MaxMax continues to grow
MaxMax stops growing
Blue stops growing
Real world examples

Taught by

JSConf

Reviews

Start your review of DevTools, the CSS Advocate in Your Browse

Start learning

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.