Grid Overview

[00:00:00]
>> Very good. So we are actually starting chapter 2, now I'm gonna give you a little bit of background about Grid here so that you get that 30,000 foot view of what Grid looks like, and then we're gonna start coding. So, introducing Grid. What is it good for?

[00:00:14]
Grid is best for a series of boxes that are the same width, perfect. Layouts that pan across rows and or columns. So, remember Flexbox is one-dimensional, it can either do a row, it can do a column, Grid does both at the same time. If you have siblings, so HTML elements that are at the same level, and you want things to overlap or cover each other, Grid is something that will do that, you don't have to use absolute positioning.

[00:00:44]
Grid will actually allow you to overlap Grid cells, and grid should be your default layout method. So the big key to understanding grid, and for that matter, Flexbox, is this. There is an HTML relationship between parents and children, okay? We're going to talk a lot about parents and children today.

[00:01:03]
We'll start looking at code for this. We're gonna leverage this relationship between parents and children with CSS selectors. And the properties that are available to you for working with your layout depend on whether you're working with a parent in the HTML or with a child in the HTML that.

[00:01:20]
That will determine what properties are available to you. By the way, if you are grandchildren, great-grandchildren, you don't get anything at all, it's just parents and children that are going to have these properties. So the important part to a successful CSS layout, whether it's Grid or whether it's Flexbox is this, making sure your HTML structure is correct before you start applying Grid or Flexbox, okay?

[00:01:48]
Couple of interesting things about Grid, If you're not familiar, there are several kinds of syntax with Grid that accomplish the same thing. We're gonna go through all three of those. So, one of the confusing things about working with Grid is that you go well, sometimes it's numbers, sometimes it's spans, sometimes it's area, I have no idea when to use any of those things.

[00:02:09]
Well, a lot of times they're just interchangeable, so pick the syntax that you like, we'll go through all of those. Grid is also gonna do its best to guess at what you want. And it doesn't always guess correctly, but it does a really good job of trying to guess.

[00:02:22]
So even if you say, I would like to have three columns, but your children suggest that there should be four columns, Grid is going to try to work with that to make the layout on your page work. It's gonna try to guess where to put the next box in the right location.

[00:02:39]
In your slides here, I'm gonna give you a little reference list here of your Grid properties, you can go through that at your leisure. There is a link here to CSS Tricks, which has I think, one of the best guides still for looking at Grid properties. I asked Chris Coyer about this and he said, CSS Tricks doesn't seem to be updated that much anymore, is this guide still pretty good?

[00:03:02]
It is, in fact, pretty good, you won't find a lot of information on sub-grid there, but for grid, which is the kind of grid you're gonna use in most of the time and most of your work, this is a great reference to use. If you are one of those people who like to use games, and you're very sad about Flexbox Froggy or Flexbox Defender, you'll be happy to know that there are Grid games for you too.

[00:03:24]
Remember that these games teach you only properties and values, they don't really teach you the thinking behind how to use Grid. The ones that I was able to find are Grid Garden, Grid Attack, and Grid Critters, enjoy and have a blast, and let's start coding.