A Quick Introduction to CSS Grid Layout

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.

► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_camp...

1. Introduction
0:00 1.1 Welcome to the Course
1:13 1.2 What Is CSS Grid Layout (a.k.a. Grid)?
9:32 1.3 A Quick Look at the Terminology

2. The Basics of Working With Grid
13:13 2.1 Creating a Grid Container
16:17 2.2 Defining Rows and Columns
29:48 2.3 Placing Elements on the Grid
47:11 2.4 Browser Support

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt...

► Subscribe to Envato Tuts+ on YouTube:    / tutsplus  
► Follow Envato Tuts+ on Twitter:   / tutsplus  
► Follow Envato Tuts+ on Facebook:   / tutsplus  

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes: https://elements.envato.com/?utm_camp...

► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_camp...