Learn CSS Grid for free

Unlock Course

Join 37375 other students

Sign in to get
Access to 30+ free courses
New courses added monthly
Weekly coding challenges
Huge discord community
Exclusive chat access
Unlock Course
Subscribe now$39 $19 per month
51% limited-time offer
Get access to this course and ALL other Scrimba courses at a record-low price. Keep your discount for as long as you subscribe.
Career Path includes
75+ hours of content
100s of coding challenges
Exclusive Study Group access
HTML, CSS, JS & React
Getting Hired section
30-day money-back guarantee
This course is for pro members onlyUnlock CourseUnlock Course
The course creator Per Harald Borgen

with Per Harald Borgen

37375 students enrolled

Course level: Intermediate

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.

You'll learn

CSS Grid fundamentals
Starting with grid
Responsive grids
Fraction units
Repeat
Positioning items
Template areas
Auto-fit
minmax
Implicit rows
Named lines
justify-items
align-items
auto-fit vs auto-fill
Create an article layout
An awesome image grid
man

Prerequisites

Before taking this course, you should have a basic understanding of HTML and CSS. Here’s our suggested resource to get you up to speed.

The course creator

Meet your teacher

Per Harald Borgen

Co-founder of Scrimba - the next-generation platform for learning to code.

Follow me on twitter

Why this course rocks

The CSS Grid module makes it easier than ever to create website layouts. It simplifies both your HTML and CSS, while simultaneously giving you more control over your layout. You can use it without any framework, as the CSS Grid module is native to the browser.

So if you want to stay up-to-date as a front end developer, you'll need to learn how to use CSS Grid! Luckily though, it's not hard. And this course teaches you all you need to know. For free, of course.

Course content

This course contains three sections. The first two will teach you the core concepts you need to know to get started. Together, we’ll build both a website layout and a super cool image grid.

In the bonus section, you’ll learn how to create article layouts with CSS Grid plus some more advanced concepts.

What you’ll learn

  • CSS Grid fundamentals
  • Your first grid
  • Responsive grids
  • How to create pages, image grids, and articles
  • How to quickly prototype websites
  • How to use Grid with Flexbox
  • Advanced concepts

You'll be proficient with the following parts of CSS Grid when you complete the course:

  • display: grid, grid-gap
  • grid-template, grid-template-colums, grid-template-rows
  • fr, repeat, minmax, auto-fit, auto-fill
  • grid-auto-rows
  • grid-colum, grid-row
  • grid-template-areas and grid-area
  • justify-items, align-items
  • justify-self, align-self

And remember, this isn't a regular video course, it's a Scrimba course! Which means you can interact with the code inside the tutorials whenever you want. This makes learning a lot more fun!

Feel free to reach out to the instructor Per Harald Borgen on Twitter if you have feedback or questions.

Join the Scrimba community chat

Learning alone can be lonely. Click here to join our Discord server and connect with other Scrimba learners!

Upgrade now - 50% offer
Built with Imba