Basis, grow and shrink | In a Rocket

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

Basis, grow and shrink

FlexGrid-Flex-Basis_Grow_Shrink.pdf

Download

FlexGrid-Flex-Basis_Grow_Shrink.pdf

Complete and Continue