1.2 What Is CSS Grid Layout (a.k.a. Grid)?
Grid Layout is a new and powerful CSS layout system. It divides areas on a web page into rows and columns and then lets you position elements anywhere you want within that grid.
What’s really nice about it is the fact that the positioning is done via CSS, not HTML. So if at some point you decide to change an element’s position, you can keep the existing markup and make your changes in CSS.
This also lends itself very well to creating responsive webpages. Because you’re doing all the positioning in CSS, you can use media queries to move elements around at different screen sizes—something that was very difficult to do (if not impossible) using old layout methods.
Let’s begin by looking at a layout built with Grid.
- Grid Demo on CodePen
- Understanding the CSS Grid Layout Module
- Breaking the Grid With CSS Grid Layout
- Bringing CSS Grid Layout and Flexbox Together
- 3 CSS Grid Projects for Web Designers
- Grid by Example
- A Complete Guide to Grid
- Morten Rand-Hendriksen Presenting CSS Grid at WordCamp Europe 2017
- Basics of CSS Grid: The Big Picture
- Learn CSS Grid
- CSS Grid Layout
- CSS Grid Garden
1.Introduction3 lessons, 13:12
2.The Basics of Working With Grid4 lessons, 39:48
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.Back to the top