Container and items | In a Rocket

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Flexbox & CSS Grid | Master

Getting started

Auto-evaluation (Spanish)
Environment setup
Context: W3C & browsers
Download full section: 7.5 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 - GAME
Justify & align - CHALLENGE
Flexbox - QUIZ
Games: learn by playing
Download full section: 19 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 - GAME
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
CSS Grid - QUIZ
Games: learn by playing
Download full section: 30 MB

CSS Grid - Advanced (work in progress)

Grid animation
Grid patterns - Ready to use

Extra - Useful references & resources

References
CSS Grid generators [updated: Feb-2022]

Teach online with

Container and items

Flexbox_Grid-Flexbox-Container_Items.pdf

Download

Flexbox_Grid-Flexbox-Container_Items.pdf

Complete and Continue