Inspiration

Learn CSS Grid Layout in a Single Video

Learn how to use CSS Grid Layout, a powerful tool for web designers who want to create flexible, creative layouts.

Learning how to use CSS Grid Layout doesn’t have to be hard. In fact, you can do it just by watching a single YouTube video.

Don’t believe me?

Try watching A Quick Introduction to CSS Grid Layout by Adi Purdila, and see how much solid information he manages to pack into 53 minutes of video instruction. By the end, you’ll be confident in using CSS Grid Layout for your next web design project.

What You’ll Learn

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 video, you’ll learn the basics of working with it.

See the Pen Bootstrap vs. Foundation vs. Floats vs. CSS Grid Layout by Envato Tuts+ (@tutsplus) on CodePen.

The course may be called “A Quick Introduction to CSS Grid Layout”, but it’s actually very long and detailed compared with most of what you’ll find on this topic on YouTube.

CSS Grid Layout example on CodePen

You’ll get a full introduction to what CSS Grid Layout is, how it works, and some of the terminology you’ll need to know. Then you’ll see how to create a grid container and define rows and columns.

CSS Grid Layout example on CodePen

You’ll also see how to place elements on the grid and build useful layouts for your websites. The video also covers the all-important topic of browser support, so you can see how well CSS Grid Layout is supported by major browsers.

Start Using CSS Grid Layout Today!

CSS Grid Layout is a powerful tool for web designers who want to create flexible, creative layouts. This single video will take you through everything you need to know to get started using it.

CSS Grid Layout explained

So set aside an hour or so to get up to speed, either by watching the video above or by clicking through to watch A Quick Introduction to CSS Grid Layout over on YouTube.

And if you want to take things to the next level, try the more advanced courses, Beyond the Basics: CSS Grid Layout and Breaking the Grid With CSS Grid Layout.


Andrew Blackman

About the Author Andrew Blackman

Andrew Blackman is a copy editor for Envato Tuts+ and writes for the Business section. He's a former Wall Street Journal staff reporter, now travelling full-time while working as a freelance writer and editor.