Find the perfect coding resourcesLearn more

Learn CSS Grid

ScrimbaScrimba
Recommended
Meet Your Instructor
Per Borgen avatar

Per Borgen

Instructor

Developer, teacher, and co-founder of Scrimba. I love teaching people how to code and helping them break into the tech industry. Based in Oslo, Norway.

1h 3m

Completion

Certificate included

Format

Interactive coding

Free

What You'll Learn

CSS Grid fundamentals

How to create your first grid

Building responsive grids

Creating pages, image grids, and articles with CSS Grid

How to quickly prototype websites

Overview

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. 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. 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!

Table of Contents
1
Intro to the CSS Grid course4:44
2
Your first grid - CSS Grid tutorial3:10
3
Frontend Career Path1:58
4
Fraction units and repeat - CSS Grid tutorial3:38
5
Positioning items - CSS Grid tutorial6:36
6
Template areas - CSS Grid tutorial4:48
7
Auto-fit and minmax - CSS Grid tutorial3:44
8
Implicit rows - CSS Grid tutorial1:55
9
An awesome image grid - CSS Grid tutorial6:45
10
Named Lines - CSS Grid tutorial5:25
11
justify-content and align-content - CSS Grid tutorial2:49
12
justify-items and align-items - CSS Grid tutorial3:13
13
Auto-fit vs. auto-fill - CSS Grid tutorial2:00
14
Grid vs. Flexbox - CSS Grid tutorial5:02
15
Why are Solo Projects important?2:31
16
Solo Project (PRO) - BBC News Clone3:10
17
Congrats on completing the CSS Grid course!2:12
18
How to Utilize Your Certificate0:56

Share Your Experience

Sign in to leave a review and help others

No reviews yet. Be the first to review!