Introducing CSS Grid

[00:00:00]
>> Time to move on to CSS Grid so first of all, why CSS Grid? Why would we ever wanna use that Flexbox seem pretty good? Why would we wanna move on to a Grid based layout? First of all, it is built in the CSS specification, just like Flexboxes, so it is totally a legit way of laying out web pages unlike floats, unlike table based layouts and all of the other hacks that we've used in the history of CSS.

[00:00:27]
The other interesting thing about Grid is that there's no row markup required in the past we have written a lot of row markup well as it pertains to Flexbox. But now with Grid, we don't have to do that anymore because we can specify our layouts in two dimensions and as always, we're gonna have to remind our parents and children to make sure that we get the correct set of properties on the parents and the children appropriately.

[00:00:58]
Grid is designed to work in two dimensions that means we have to think about not only going across the page and just the next row on top of each other, we have to think about items that are going to span across various rows or various columns on the page.

[00:01:14]
So we have to think about that, the last point here I wanna make is in the first time I recorded this course and at that point in time really in 2017, we talked a lot about how we use Flex for UI elements and use Grid for major layout.

[00:01:31]
And that was pretty much the recommendation that came from the white wig people from MDN, and so forth, but I think after four years of people working with Flexbox and Grid. I think the better recommendation at this point in time is to use either methodology where they make the most sense, so rather than trying to dogmatically stick to Grid for major layout on web pages.

[00:01:56]
And then Flexbox for the UI inside of various cells, what I'm here to tell you is use what works, where it works best because there are strengths and weaknesses to each of these. And we're gonna dig into a lot of those today, this is a screenshot of Grid and Flexbox explained right from the CSSWG website and as you see here with Flexbox.

[00:02:20]
We have a series of rows just like we have seen all through this course one right after the other and you can have different numbers of boxes on each of those rows, but it is still row after row after row of boxes. This is what I mean when I say it's one dimension, all we think about are these various rows or potentially the columns but realistically we don't necessarily use columns in our layout processes that often.

[00:02:46]
With Grid we are truly thinking about going across rows, going across columns which makes for more interesting types of layouts if you're old enough to remember the table based layout days where we dealt with row spans and call spans. We're back to that again but with legit straight up CSS instead of a hack In HTML the way we used to do it, so this is the major difference between these two methodologies.

[00:03:12]
You need to think very carefully about how you are going to work in two dimensions when you're working with Grid, in terms of the browser support, it's all there now. Now and you don't need to worry about that anymore, so the level 1 specification which is CSS Grid pretty much as maybe you are somewhat familiar with it at this point is supported by all major browsers.

[00:03:38]
And it's been supported by all major browsers for some time now, there is a new type of grid layout called Subgrid, it's currently under development and it's only supported by Firefox at this moment in time. For that reason I'm not going to be talking about Subgrid today, you know there's a lot of excitement around Subgrid people are very interested in how Subgrid is going to change their lives.

[00:04:01]
We'll see, we'll see and, of course, the Partial support or no support is with our usual browser suspects so any version of Internet Explorer, older versions of edge, those are are going to have issues with support. So pretty much par for the course, alright, so let's talk a little bit about the kinds of markup that we're going to use with Grid and then the types of CSS, this is one of the things with Grid.

[00:04:31]
Whereas Flexbox had just a few types of properties that we needed to leverage to make a web page layout, Grid actually has several different types of syntax potentially to do the same thing. And you can pick one of those along the way and decide what works best for you, there are some advantages to using one kind of syntax sometimes and other syntaxes that other times.

[00:04:58]
But that is what I want you to be aware of that's where a lot of the confusion comes from because there's so many different ways to say the same thing with Grid, so this is what your HTML might look like. This is for the starting type of syntax I'm going to lead you through first which is the line based placement and I'll tell you what that means in just a moment so your HTML here looks similar to what we had with Flexbox before.

[00:05:23]
There is a parent or a Grid container there are children or the Grid items and each one of those grid items now has its own class, reason why is because we're going to have to spell out potentially where each one of those Grid cells is going to go with this first type of syntax.

[00:05:43]
So we set up our CSS very simply, we tell the wrapper to display Grid and we can use the gap property here, now again, if some of you have some background in grid, we used to say grid hyphen gap that is no longer a thing. That has now been displaced by the gap and the gap property works in both Fexbox and in Grid, so if we say just a gap of 10 pixels that's gonna put a gap horizontally and vertically all the way around with these boxes and 10 pixels in this case.

[00:06:19]
With line base placement, we have a series of lines, in this case, we're working with columns, those line, also, apply to rows, they count like humans, we start with one and you start to the outside of your first Grid cell. That becomes line number one, after that first Grid cell before the second one, that's line number two, and so on across the screen, so in that first cell there we've said our grid column goes from one to two.

[00:06:51]
Our second cell goes from two to three, our third cell goes from three to four and our last cell will go from four to five, so this is a shorthand here this is a start and an end. You could spell these out with grid hyphen column hyphen, start, grid hyphen, column hyphen, end, or you can just use the shorthand that I've used here, where we're indicating the start and finish of both of those lines.

[00:07:20]
Then you can start thinking about the two-dimensional aspect of it what I showed you there before was just a very simple row, if you are laying this out in a more complicated grid fashion. Then we're going to think about what happens if we have a cell that goes over several rows or over several columns then for example here with the column one that dot call hyphen one.

[00:07:45]
It starts at row line number one, it skips over a line number two, because that's part of that cell, and it ends at line number three, so we're going to say our grid hyphen row has a value of one slash three. That is how we go about specifying this, so as you see with this type of syntax, we're very, very specific about where each cell is placed in space using these types of numbers it's kind of absoluteish, where it's saying exactly where we want each cell here inside of the grid.

[00:08:21]
There's nothing wrong with that if you are very particular about when where things are going to go and this code is not necessarily going to be reused somewhere else and you don't have necessarily a bunch of. Maybe you have a bunch of press releases, or a bunch of images, or a bunch of some other type of content, little chunks that you wanna display nicely on a page.

[00:08:43]
This type of syntax is going to be more difficult to work with under those kinds of conditions where you don't necessarily know how many items you need inside of a grid based layout. Under those kinds of conditions, you might work with Flexbox, much more easily that's kind of what Flexbox was designed to do or there are some other grid syntaxes that are a little bit more flexible, in terms of where you start and where you end in this line base syntax.

[00:09:12]
We'll take a look at that as well, so as I mentioned, this is the hard part of Grid, all these kinds of syntax so the numbers we just talked about the lines actually have these numbers there's a span notation we're gonna talk about momentarily. You also have the option of naming your lines so rather than just going by the numbers, which to me is very simple and straightforward you can in fact, name your lines if that is an easier approach for you.

[00:09:42]
And then use those names inside of your syntax I'm not going to cover that today but there's lots of places you can look up what that syntaxies, you can also create named grid template areas, which we will cover a little bit later on. And then of course, there's tons of shorthand and longhand properties so this to me, again is one of the most confusing parts of Grid and the best way to mitigate this is to take a look at the CSS tricks page which is called The Complete Guide to Grid.

[00:10:12]
And I've given that to you on today's notes in the website, and it will give you a link to that particular page on CSS tricks where you can look up all of that syntax that's probably the best way to go with us. There is another game for practicing your Grid syntax if you're interested in that, from the same people who made Flexbox Froggy we had the CSS Grid garden.

[00:10:37]
It's a great game, I thoroughly encourage you to go play it if you wanna explore all of the different ways of saying the same thing inside of Grid, the other interesting part of this is tracking your parents and children, the containers and the items. And so this moves through space so we can have a single element that starts as a grid item okay, so somewhere out here we have a grid container we have this grid item, it's also a grid container for the next element inside of it.

[00:11:10]
That element could be a grid item and a flex item and a flex container, and so forth so managing these parents and children can get very complicated we're gonna look at an example like this a little bit later on. So as I said here so Grid container 1 goes to Grid item 1 It also becomes Grid container number 2 that might become a Grid item number 2 and a Flex can container with a flex item associated with it.

[00:11:38]
You can in fact stack these up in all kinds of crazy ways so just sort of know that at this point in time, that this is possible and by the end of today, you'll know how to do this.