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

Learn CSS Grid

Enroll for freeGet started!

Join 64268 other students

Log in to get

Access to all our free courses
Interactive hands-on content
100s of code challenges
Join a friendly community
Enroll for free
Subscribe to access!Subscribe to access!

Subscribe to access to this course and ALL other courses. You get a 30-day money-back guarantee, no questions asked.

Subscription includes

All courses and career paths
100s of coding challenges
Certificates of completion
Exclusive Pro members chat
The course creator Per Harald Borgen

with Per Harald Borgen

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.

Meet your teacher

The course creator

Per Harald Borgen

Front-end developer and co-founder of Scrimba. Per loves helping other people learn new skills so that they can improve their lives. He makes his tutorials as simple as humanly possible, and focus on getting the students to the point where they can start building projects on their own.

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!

F to the A oracle to the Q
Is CSS grid better than bootstrap?

Not only can you create layouts that previously wasn’t possible without introducing JavaScript, but your code will be easier to maintain and understand. Swapping out Bootstrap with CSS Grid will make your HTML cleaner. While this isn’t the most important benefit, it’s likely the first one you’ll notice.

Is CSS grid better than Flexbox?

Flexbox is made for one-dimensional layout and Grid is made for two-dimensional layouts. This means that if you’re laying out items in one direction (for example three buttons inside a header), then you should use Flexbox. It’ll give you more flexibility than CSS Grid. It’ll also be easier to maintain and require less code. However, if you’re going to create an entire layout in two dimensions — with both rows and columns — then you should use CSS Grid. Depending on your use-case, one might be more preferable than the other.