A Quick Introduction to CSS Grid Layout

Adi PurdilaSep 18, 2018Lessons: 7Length: 53 minutes

Next lesson playing in 5 seconds

Cancel

A Quick Introduction to CSS Grid Layout

Welcome to the Course

01:13

For a long time, web designers have been used to creating layouts with CSS by using floats. Floats, however, were never meant to be used to create grid layouts. The introduction of Flexbox was a big improvement, but it didn’t address all the layout challenges. A layout displays elements along both axes, and Flexbox is mainly a one-directional system.

Thankfully, CSS Grid Layout is gaining traction and has been adopted by all major browsers, which means you can use it in your projects today. CSS Grid Layout is the most powerful layout system currently available. It’s a two-dimensional system, and in this short course, you’ll learn the basics of working with it.

Learn CSS: The Complete Guide

We've built a complete guide to help you learn CSS, whether you're just getting started with the basics or you want to explore more advanced CSS.

1.Introduction
3 lessons, 13:12

1.1
Welcome to the Course
01:13

1.2
What Is CSS Grid Layout (a.k.a. Grid)?
08:19

1.3
A Quick Look at the Terminology
03:40

2.The Basics of Working With Grid
4 lessons, 39:48

2.1
Creating a Grid Container
03:05

2.2
Defining Rows and Columns
13:31

2.3
Placing Elements on the Grid
17:23

2.4
Browser Support
05:49

Adi Purdila

Adi Purdila is a web design instructor for Tuts+. With over 100 courses and 200 tutorials published to date, Adi's goal is to help students become better web designers and developers by creating content that’s easy to follow and offers great value. Being self-taught himself, Adi strongly believes that constant learning (academic or otherwise) is the only way to move forward and achieve your goals. When not typing away at his keyboard, he loves woodworking and caring for his ever-growing family of rescue pets. You can stay up to date with what he's doing by following him on social media or visiting his website at adipurdila.com.

adipurdila

A Quick Introduction to CSS Grid Layout

Next lesson playing in 5 seconds

A Quick Introduction to CSS Grid Layout

Welcome to the Course

1.Introduction3 lessons, 13:12

1.1Welcome to the Course01:13

1.2What Is CSS Grid Layout (a.k.a. Grid)?08:19

1.3A Quick Look at the Terminology03:40

2.The Basics of Working With Grid4 lessons, 39:48

2.1Creating a Grid Container03:05

2.2Defining Rows and Columns13:31

2.3Placing Elements on the Grid17:23

2.4Browser Support05:49

1.Introduction
3 lessons, 13:12

1.1
Welcome to the Course
01:13

1.2
What Is CSS Grid Layout (a.k.a. Grid)?
08:19

1.3
A Quick Look at the Terminology
03:40

2.The Basics of Working With Grid
4 lessons, 39:48

2.1
Creating a Grid Container
03:05

2.2
Defining Rows and Columns
13:31

2.3
Placing Elements on the Grid
17:23

2.4
Browser Support
05:49