Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Grid Critters
Chapter One: Grideros (display: grid, grid-template-columns, & grid-template-rows)
Chapter 1
Central Command
First Encounter (display: grid)
Terrain Manipulation (grid-template-rows)
Smug Duck (grid-template-columns)
How it Fills (fr unit)
Fixed First (mixing units)
On Repeat (repeat shorthand)
Repeating fractions (repeat fr)
Anything You Can Do (repeat a pattern)
Tracks
Challenge 1.1
Challenge 1.2
Challenge 1.3
Challenge 1.4
Challenge 1.5
Challenge 1.6
Challenge 1.7
Challenge 1.8
Challenge 1.9
Challenge 1.10
Unit 42
Cryosleep
Chapter Two: Mind the Gap (grid gaps)
Chapter 2
Top of the Morning
Interceptor Upgrade (grid-row-gap)
Power Hungry (grid-column-gap)
Two for One (grid-gap shorthand same size)
A Nice API (grid-gap shorthand different sizes)
Gaps First (gaps before fr)
All Kinds of Gaps (other unit gaps)
Still My Favorite Unit (fr vs percent tracks)
Cutting it Close
Challenge 2.1
Challenge 2.2
Challenge 2.3
Challenge 2.4
Challenge 2.5
Challenge 2.6
Challenge 2.7
Challenge 2.8
Challenge 2.9
Potential for Good
Cryosleep
Chapter Three: Life on the Line (item placement by grid line)
Chapter 3
Back on Task
X-ray (grid-row-start)
Bragging Bots (grid-column-start)
All Good Things Must End (grid-row-end & grid-column-end)
Mold like Clay (covering multiple lines)
Don't be so Negative (negative line numbers)
Spanning Terrains (spanning endwards)
Docking Terrains (spanning startwards)
Two for One (grid-row & grid-column shorthands)
Naming all the Things (naming grid lines)
Hard to Choose (multiple line names)
A Subset Sequence (same named lines)
So Many New Tools
Challenge 3.1
Challenge 3.2
Challenge 3.3
Challenge 3.4
Challenge 3.5
Challenge 3.6
Challenge 3.7
Challenge 3.8
Challenge 3.9
Challenge 3.10
Make Me a Promise
Cryosleep
Chapter Four: Grid Devils (item placement by grid area & grid-template-areas)
Chapter 4
Red Flag
Efficiency in Naming (grid-area shorthand)
Counter Clockwise (grid-area shorthand by number)
Skipping Slots (grid-area auto)
Group Up (grouping lines)
Shorthands upon Shorthands (grouping lines & grid-area)
Just One (grid-area single value)
Weary Fingers (grid-template-areas)
The Nameless Cell (empty areas)
All About the Lines (grid-template-areas generates line names)
Compliments all Around
Challenge 4.1
Challenge 4.2
Challenge 4.3
Challenge 4.4
Challenge 4.5
Challenge 4.6
Challenge 4.7
Challenge 4.8
Challenge 4.9
Challenge 4.10
Challenge 4.11
Challenge 4.12
Good News, Bad News
Cryosleep
Chapter Five: Ancient Runes (content in a grid, auto sizing, minmax(), auto-fill & auto-fit)
Chapter 5
Clues
First Glimpse (auto sized columns)
Piece of the Puzzle (auto sized rows)
Flexible Range (minmax)
Hunters (minmax with auto minimum)
The Ark (minmax with wrapping)
Kochoyu (min-content & max-content)
We Got Space (auto-fill)
Collapsed (auto-fit)
Immeasurable Treasure
Challenge 5.1
Challenge 5.2
Challenge 5.3
Challenge 5.4
Challenge 5.5
Challenge 5.6
Challenge 5.7
Challenge 5.8
Keep it Secret
Cryosleep
Chapter Six: Fill the Pockets (grid-template, grid-auto-flow, order, sparse vs dense packing)
Chapter 6
Assumed Hostile
Fast Tracks (grid-template)
Three in One (grid-template with areas)
With the Flow (how grid items flow)
Empty Spaces (next available slot)
Span in the Place Where you Live (flow with spanning)
First Class (flow with row positioning)
Can it be My Turn (order)
Column Flow (grid-auto-flow direction)
You Can Never Go Back (sparse vs dense packing)
Custom Flow
Challenge 6.1
Challenge 6.2
Challenge 6.3
Challenge 6.4
Challenge 6.5
Challenge 6.6
Challenge 6.7
Challenge 6.8
Counterfeit
Cryosleep
Chapter Seven: Out the Airlock (implicit tracks, grid-auto-columns, grid-auto-rows)
Chapter 7
Fight or Flight
Beyond the Grid (implicit tracks from positioning)
Extra Content (implicit tracks from content)
Auto-matic (implicit auto sized)
Vertical Control (grid-auto-columns)
Horizontal Control (grid-auto-rows)
Payback
Challenge 7.1
Challenge 7.2
Challenge 7.3
Challenge 7.4
Challenge 7.5
Challenge 7.6
Challenge 7.7
Inhibitor
Cryosleep
Chapter Eight: Sentient (justify-items, justify-self, align-items, align-self)
Chapter 8
Fight
Extra Space (justify-items)
Override (justify-self)
L is for Align (align-items)
AI's Sixth Sense (align-self)
Cell Size (stretch)
Cadet Basic Training
Challenge 8.1
Challenge 8.2
Challenge 8.3
Challenge 8.4
Challenge 8.5
Challenge 8.6
Challenge 8.7
Challenge 8.8
Challenge 8.9
Challenge 8.10
Path of the Decent
Cryosleep
Chapter 9: Deception (justify-content, align-content)
Chapter 9
Deceleration
Column Control (justify-content)
Space Between (justify-content-space-between)
Space Evenly (justify-content-space-evenly)
Space Around (justify-content-space-around)
Stretchy Stretch (justify-content-stretch)
Space and Gaps (justify-content-and-gaps)
Row Control (align-content)
Dreadnought
Challenge 9.1
Challenge 9.2
Challenge 9.3
Challenge 9.4
Challenge 9.5
Challenge 9.6
Challenge 9.7
Challenge 9.8
PM's
Cryosleep
Chapter 10: Central Command (review, grid shorthand)
Chapter 10
Arrival
Challenge 10.1
Challenge 10.2
Challenge 10.3
Challenge 10.4
Challenge 10.5
Challenge 10.6
Challenge 10.7
Challenge 10.8
Challenge 10.9
Challenge 10.10
Companion
End
Row Control (align-content)
Lesson contents locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock