CSS Grid on Scrimba
Quick answer: Free ~63-minute Grid course—you build three real layouts and see when to pair Grid with Flexbox. If full-page structure is your weak spot before interviews or freelance work, this is one of the fastest wins on the platform.
Last reviewed: March 2026.
We may earn a commission if you join Scrimba through our links.
CSS Grid Tutorial
FreeThis tutorial teaches you CSS Grid through 14 interactive screencasts. You'll learn all the key concepts while building three awesome layouts: a website, an image grid, and an article. Plus, you'll le
View on Scrimba (opens in a new tab)About This Course
This tutorial teaches you CSS Grid through 14 interactive screencasts. You'll learn all the key concepts while building three awesome layouts: a website, an image grid, and an article. Plus, you'll learn how to combine CSS Grid with Flexbox.
This Intermediate-level course covers 63 min of content. It is available for free — no subscription required.
- Duration: 63 min
- Level: Intermediate
- Access: Free (no subscription required)
What Makes This Course Distinctive
Fourteen short screencasts keep the scope tight: you see grid-template, tracks, gaps, and alignment in context while building a website layout, an image grid, and an article layout. The course explicitly connects Grid with Flexbox so you know when to use which, which mirrors how teams ship dashboards and marketing pages. You edit CSS inside Scrimba's player, so properties stick better than skimming MDN once. A Pro BBC News-style solo project appears in Scrimba's materials for extra practice after the core tutorial. Strong fit for intermediate learners who can style a box but freeze on full-page structure. Weak fit if you only use Tailwind utilities and refuse to read raw Grid syntax.
Instructor
This course is taught by Per Borgen, an experienced educator on the Scrimba platform.
What You'll Build
- Solo Project (PRO) - BBC News Clone
These hands-on projects reinforce what you learn and give you portfolio-ready work to show employers.
Prerequisites
Basic knowledge of HTML and CSS is recommended before starting this course.
Who Is This Course For?
- Best for: Developers who know HTML and CSS basics and need confident two-dimensional layout for portfolios and product UIs.
- Not ideal if: You have never written a stylesheet. Start with HTML and CSS or the HTML and CSS crash course first.
Part of These Learning Paths
Choose This If
- You want explicit Grid practice (tracks, areas, alignment) with three concrete layouts, not random snippets.
- You read Grid docs but cannot ship a full page. This course forces you to type layout code inside each lesson.
- You need Grid for frontend interviews, freelance sites, or path modules where responsive layouts are required.
Related Courses
Practice & Learn More
- Practice CSS Grid
- Practice Flexbox
- Practice Tailwind CSS
- How Long Does It Take to Learn Coding?
- Scrimba vs Codecademy | All Comparisons
Related Pages
Yes! This course is completely free. No credit card or Scrimba Pro subscription is needed to start learning.
The course contains 63 min of interactive screencasts. Since you can pause and code along at your own pace, most learners finish in 2-4 weeks of regular practice.
You will build real projects including: Solo Project (PRO) - BBC News Clone. These projects teach you practical skills you can apply immediately.
Ready to Upgrade Your Learning?
Use our partner link to claim 20% off Scrimba Pro and unlock all courses and career paths.