Grid lays things out in rows AND columns at once — perfect for galleries, dashboards, and card decks.
What you'll learn
Create columns with grid-template-columns
Use fr units and gap
Make a responsive gallery
Week 1 step intro
A peek inside
Rows and columns together
Set `display: grid` and define columns with `grid-template-columns`. The `fr` unit means 'a share of the free space' so 1fr 1fr 1fr is three equal columns.
Grid: A layout system with rows and columns.
The rest of Day 6 is a Pro lesson
You're on the free Explorer plan — you get the intro and the video. Go Pro to open the full guided lesson (and all 30 days).
