Build real grids instead of memorizing syntax
Quick answer: Scrimba’s CSS Grid track (plus supporting UI/CSS drills) has you place areas, gaps, and breakpoints in the browser player—so fr, minmax, and grid-template-areas stick because you used them, not because you highlighted a blog post.
Last reviewed: March 2026.
Who this is for
Devs who default to Flexbox hacks for 2D layouts and want portfolio-grade marketing sections or dashboards.
Why Practice CSS Grid on Scrimba?
Reading documentation is passive. To truly master CSS Grid, you need to write code. Scrimba's interactive format lets you:
- Pause the video at any moment
- Edit the code directly in the player
- Run it to see your changes instantly
Top Courses to Practice CSS Grid
Free CSS Grid Tutorial: Learn CSS Grid in this fun and interactive course lead by Per Borgen
Level: Intermediate | Duration: 63 min
This tutorial teaches you CSS Grid through 14 interactive screencasts. You'll learn all the key concepts while building three awesome layouts: a
UI design fundamentals tutorial: Learn to create beautiful and functional user interfaces in this free course
Level: Intermediate | Duration: 70 min
This tutorial course will teach you to design user interfaces that both look good and work well. All is done with HTML and CSS, so no clunky desi
How to Practice Effectively
- Don't just watch. Whenever the instructor writes code, pause and type it yourself.
- Break things. Change values, delete lines, and see what happens.
- Do the challenges. Scrimba courses have built-in challenges. Do not skip them.
Use this guide when…
You are ready to own two-dimensional layouts—Grid for structure, Flexbox for micro-alignment—inside guided scrims.
Practice Grid inside scrims
Free modules cover the basics; Pro unlocks the full design + path library.