Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:7Length:53 minutes

Next lesson playing in 5 seconds

Cancel

Free Preview: A Quick Introduction to CSS Grid Layout

Welcome to the Course

01:13
  • Overview
  • Transcript

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

1.1 Welcome to the Course

For a long time we created layouts with CSS by using floats. The problem is floats are not fully meant to be used like this, to create a grid layouts. Then FlexBox came around and it was a big improvement but not perfect since FlexBox is mainly a one directional system. Thankfully CSS Grid layout is now available and adopted by all major browsers. So in this short course you'll learn the basics of working with it. Here's a breakdown of the course structure. First we'll take a moment to discuss what exactly is Grid and how it compares with older layout methods. Then we'll look closely at the terminology behind the system. In lesson three we'll dive straight in and learn how to create a grid container. Then we'll define our layout by creating rows and columns so that in lesson five we can start placing elements on the grid. Finally in lesson six, we'll talk about browser support. I'm Andy let's get started with lesson number one. See you there.

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

Group layout is the newest and probably the most powerful layout system we currently have in CSS. It basically divides your web page into rows and columns, and gives you the ability and flexibility to position your elements in those rows and columns, basically anywhere you want within that grid. Now, what's nice about it is the fact that the positioning is done via CSS and not HTML. So if at some point you decide you want to change the position of certain elements, you can do that very easily from CSS without having to modify your HTML source code or your markup which is just fantastic. This also lends itself very well when creating responsive web pages because you can use media queries to affect the position of certain elements within your page at different screen widths. Something that was very hard if not impossible to deal with older more traditional layout methods. So coming up we're going to take a look at virtually the same layout that I've created using four different methods. So it's a very simple layout, one that you would probably find in every web page. It consists of a header, a sidebar, main content and the footer. So I created this layout using Bootstrap foundation. Using floats just like the old traditional methods and finally using CSS grid. So you're gonna see the difference in the markup code that we had to write. So jumping into CodePen, this is the layout I was talking about. It's very simple, I simplified this for the sake of the demo here, but we basically have a header, sidebar, main content, and footer. And of course this is a responsive layout, so it adjusts according to the screen width. The first example that you see right here, is built with Bootstrap. So if Bootstrap I is the class of container and then for each row of content I added a div with a class of row. And then for the actual element, I had a class of col or col-md-4 depending on the situation. So here the sidebar is a col-md-4 which basically means on the normal 12 grid system. This occupies four columns, or I should say the 12 column grid system. This occupies four columns, and the main, which you see here in orange, sorry, just has an auto width. All right, so this is the code necessary to build this layout with Bootstrap. Now, scrolling further down, we're gonna find the foundation alternative. So here I also made a grid container and then for each of these rows I created a grid, that goes on the x axis so horizontally. And each element then has a class of cell, and depending on the element, I added an additional sizing class like you can see here on the side bar, we have the medium-4. Which means on medium screens and up, this occupies four columns. The demo class that you see here and also throughout this entire layout is just for styling these elements and giving them colors and and stuff. It has really nothing to do with CSS grid. Scrolling further down, we can find, the floats demo. Right? This is the entire mark up right here. This is actually simpler than the two we had before. We just have a container to center this entire grid on the page and give it a width. And then we added the header and gave it a class of clear fix because the side and the main are floated to the left. So I needed a way to clear those floats, so I added a clear fix to the parent. And then the footer has a simple class of demo, no additional styling is required here. Now here's where it gets interesting. This is the layout that I've built with grid. And taking a look at the markup, that's it, I have a div class demo-grid, this is necessary. This is the grid container as we'll learn in a future lesson. And then I just layout my elements like this, I have the header, the aside, the main and the footer. And just by using CSS, we jump into the CSS here, to the CSS grid layout. So just by using CSS, I'm able to get the layout that I want, which is also responsive, right? But by using grid, I actually did something that was not possible with the other methods. So notice on the other methods, we are keeping the same structure that we have in the markup, so it's header, sidebar, content, footer. This is the same for the first three layouts. But when we get to the CSS grid layout, we have the header, the main content, then the sidebar and then the footer. So we basically swapped the positions of the sidebar and the main content. And we did that without changing the HTML. So in the markup, we see we have the header, sidebar, content and footer. This is one of the great things about CSS grid. You can basically position your elements in any way you want, just from CSS. And as I was saying in the beginning of the video, this is something that was really hard if not impossible to do with other layout methods like you saw here. I believe the frameworks Bootstrap and Foundation, their grid system has an ordering system, right? Or they have an ordering feature that allow you to basically change the order of certain elements. That's because it's using or they're using FlexBox. So I guess that's achievable at some degree, but you still need to add different classes and stuff, and It does not make for a clean markup. I mean let's look up the difference between like for example the Bootstrap code. Which goes from here to here, with all the rows and columns and sizing classes and all that stuff. So compare this with this. This is much more semantic. We eliminate the need of extra markup which just makes our job a lot easier and being able to control the positioning, the sizing, everything from CSS is just fantastic. So that was just a quick introduction to CSS grid, don't worry if you don't understand how this works just yet. We're gonna cover that in more detail in the following lessons. But for now let's take a look at the terminology associated with this new system. See you in the next lesson.