Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:15Length:1.3 hours

Next lesson playing in 5 seconds


Free Preview: 3 CSS Grid Projects for Web Designers


  • Overview
  • Transcript

The CSS Grid Layout is a W3C working draft that defines a powerful grid system to ultimately make it easier to lay out your web pages using CSS.

In this course, you will build three projects to help you understand what’s going to be possible with “Grid”. The first is beginner level and will introduce you to Grid concepts. The second takes things up a level, examining things like alignment and nesting. The final project is more advanced still, using Flexbox in combination with Grid. Following these three projects through to completion will steadily take you from Grid novice to confident Grid user.

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

1.1 Introduction

Hello and welcome to three CSS Grid projects for web designers. My name is Craig Campbell and I will be your instructor for this course. In the following lessons, we're going to dive into three practical projects to explore the current state of the CSS Grid Layout specification. Hopefully, this course will give you a good idea of what to expect from the Grid Layout so that when it's released you'll be prepared for it. Now this course requires a basic knowledge of HTML and CSS. And if you want to know more about the fundamentals of Grid Layout, check out the links in the course notes. So I wanna thank you so much for checking out this course, and in the next lesson, we'll get started.

1.2 Using Firefox Nightly

Hello and welcome back. In this lesson, I wanna talk a little bit about the current state of the CSS Grid Layout and what we can expect when we start experimenting with it. So since the Grid Layout is still a W3C working draft, we can't expect a whole lot of browser support for it just yet. For example, if you go to caniuse.com and then do a search here for CSS grid, we can see that when we scroll down to the browser support, that it's not very well supported. We see a lot of red here. Now some of these red items have flags which means that they're not supported by default but you can turn them on. For example, in Chrome, if you navigate to Chrome ://flags and then scroll down, you'll find a flag called experimental web platform features. If you turn that on, then you can use the Grid Layout in Chrome. But even then, the functionality doesn't always turn out to be what you might expect. In Chrome, for example, nested grids don't really work all that well even though they should be supported by the spec. So, you're not always going to get the functionality that you desire. Now there is a browser made by Mozilla, the Firefox Nightly browser, which is the browser we're gonna be using in this course, which does seem to work really well with all of the features that I have tested so far. So it works really well with nested grids, it works really well when you're trying to combine the use of the CSS Grid Layout and CSS Flex box. So the Nightly browser is what we're gonna be using. Now the Nightly browser, in case you haven't heard about it, it's made by Mozilla. It's basically another copy of the Firefox browser, but it's updated nightly. And it's intended for experimental purposes or for testing new features that haven't quite come out yet. So it's called Nightly because every night they release new updates for it. So it's constantly trying to stay up to date with all of the current working draft in the W3C and things like that. So most of the things that are currently undergoing experiments or that are currently in draft status. Most of those features work really well in the Nightly browser. And so you can find the Nightly browser by going to nightly.mozilla.org. And you can download it for Windows or Mac or even Linux if you want to. Now, I'm using a Mac. So if you're using a Mac as well you'll just click on the download link here and install it, just like you would any other browser. Now we're going to be using codepen.io for all of our sample projects in this course. And as long as you're using the Firefox Nightly browser, you should be able to see everything just fine. Now keep in mind that all of this discussion is at the time of this recording. So I would highly advise you to go to caniuse.com and do a search for CSS Grid just to see where the current support is at the time that you start watching this video course. But again, my main goal in this course is not necessarily to walk you through the basics of the CSS Grid Layout, but to show you a few practical projects. And to show you what we have to look forward to once this becomes more widely supported. So thank you for watching and I'll see you in the next lesson.