Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Flexbox & CSS Grid | Professional
Getting started
Environment setup
Context: W3C & browsers
▽ Download full section: 10 MB
Flexbox
Container and items
Direction: row and column
Direction: row and column - CHALLENGE
Wrap items
Flow: direction + wrap shorthand
Flow: direction + wrap shorthand - CHALLENGE
Order
Order - CHALLENGE
Basis, grow and shrink
Basis, grow and shrink - CHALLENGE
Justify
Justify - CHALLENGE
Align: Content
Align: Items
Place-content: justify + align shorthand
Justify & align - CHALLENGE
Flexbox - QUIZ
▽ Download full section: 52 MB
CSS Grid
Container and items
Building: Explicit and implicit grid
Building: Explicit and implicit grid - CHALLENGE
Building: Nested grids (basic)
Building: Nested grids (basic) - CHALLENGE
Sizing: Fraction
Sizing: Minmax
Sizing: Repeat
Sizing: Auto-fit and auto-fill
Placing: Lines
Placing: Lines - CHALLENGE
Placing: Areas
Placing: Areas - CHALLENGE
Placing: Areas via implicit names
Placing: Areas via implicit names - CHALLENGE
Alignment & spacing: Gaps
Ordering: The order property
Ordering: Overlap items with z-index
Ordering: Overlap items with z-index - CHALLENGE
Support and fallbacks
▽ Download full section: 58 MB
Extra - Useful references & resources
References
CSS Grid generators
Teach online with
Placing: Areas - CHALLENGE
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock