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

YouTube

Using DevTools to Understand Modern CSS Layouts

JSConf via YouTube

Overview

Explore modern CSS layout techniques through live demonstrations using DevTools in this conference talk from CSSconf EU 2019. Gain a deeper understanding of Flexbox, Grid, and Box Alignment, the cornerstones of contemporary web design. Learn how to interpret browser behavior when assigning CSS values, particularly in sizing with Flexbox and Grid track sizing. Discover real-world applications that enable designs to adapt across various viewports. Topics covered include content-based sizing, fit-content, Flexbox properties like flex-shrink, available free space, box alignment properties, flexible sizing, and the differences between fr, auto, fit, and min units. Enhance your web development skills with practical insights into variable sizing and common use cases for modern CSS layouts.

Syllabus

Introduction
Who am I
What are modern CSS layouts
Contentbased sizing
Fit content
Flexbox
Flex shrink
Available free space
Box alignment properties
Common use cases
Flexible sizing
Fr vs Otto
Fit vs Min
Auto vs Fit
Variable Sizing

Taught by

JSConf

Reviews

Start your review of Using DevTools to Understand Modern CSS Layouts

Never Stop Learning.

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

Someone learning on their laptop while sitting on the floor.