scrimba
The Frontend Developer Career Path
Build a Responsive Layout with CSS Grid
Courses
All coursesAI PathFrontend Path

Not sure where to start?

Let us help you find your perfect course.
PricingCoursesLog in
For TeamsWhy Scrimba?
Courses
All coursesAI PathFrontend Path

Not sure where to start?

Let us help you find your perfect course.
Pricing
PricingCreate Account
Log in
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Courses
All coursesAI PathFrontend Path

Not sure where to start?

Let us help you find your perfect course.

Karma

DashboardConnect to DiscordFind a courseSettingsNew scrim
Log out

Build a Responsive Layout with CSS Grid

This playlist is part of The Frontend Developer Career Path

Build a Responsive Layout with CSS Grid

18 lessons1 hour 19 min

1. Intro
2:15
2. Starter Code
1:33
3. Aside: Grid Columns and Gap
4:31
4. Aside: fr units
3:46
5. The Mobile Layout
2:58
6. Aside: Grid rows and implicit grid
3:59
7. Aside: Span
6:54
8. Tablet view with span
3:14
9. Aside: Repeat function
2:45
10. Aside: grid lines
6:00
11. Laptop view with grid lines
6:25
12. Aside: grid template areas and Dev Tools
7:58
13. Convert to grid template areas
5:54
14. Aside: A responsive image grid
5:00
15. Aside: grid-auto-flow: dense and MinMax
5:18
16. Use minmax
2:33
17. The header and footer
6:56
18. Outro
1:44

HomePlans & PricingTeacher talent program

Community

Explore the communityPodcastYouTubeGet Scrimba emails

Courses

All courses Self-paced BootcampFree coursesPro courses

Company

About usSupport centerTermsPrivacy

Built with Imba