- Let me explain to you some
of the basics of CSS Grid to give you an overall mental model for how this creature works. CSS Grid of course is a
brand new set of technologies that let us have a powerful way to do page layout on the web. It comes from this CSS specification where all CSS comes from, a technical document that
many different browser makers collaborated on together in
order to make this thing exist. This is the official document that the folks who make browsers refer to in order to figure out what it is that they're supposed to build. And if a browser maker ever has a question or there's some sort of confusion, they go back to the people who are in charge of the specification to change the spec, clarify the spec, make sure the spec is
what it's supposed to be. That's why all these different browsers have implementations of CSS Grid that are so well-aligned with each other. They're very compatible because everyone's
working off this document. And specifications and the way specs work, it's just working, that process is working
so well now in 2017, better than it ever has before. That's why Grid is coming out
of the gate just ready to go. This is the Level 1 specification. There's some ideas, and I'll
talk about a few of them, about what Grid might do in the future. That will be written up in
a Level 2 specification. So Grid Level 1 is done,
it's baked, it's locked down. That's already what's in browsers. Eventually there'll be
more features added to it, but this is what we've got for now. So let's look at this. Here we can imagine content that we've got or pieces of an interface
that we wanna lay out in some sort of fashion. Maybe we have this idea in our mind's eye of how these yellow boxes
are gonna get laid out. We're going to create a grid in CSS in order to do that layout. So there's the grid. You design the grid. You design the columns and the rows. You figure out how they're gonna work and then that gives you places in which to put different parts, different elements basically,
any element in the DOM. That overall box, the
box that is the grid, that holds the grid itself
is called a grid container and then any particular element that's been placed on the grid
is considered a grid item. It's called a grid item. Now grid items have to be direct children of the grid container. So in this example, there's a main element and inside the main element,
we've got a div, div, div, some text, another div, some more text, a section and a footer. It doesn't matter what those items are, but they all have to be
direct children of the main. So basically anything
that is a direct child of that main element
automatically becomes a grid item. It has no choice. And in fact, those bits of text, this is an anonymous grid
item and hello world, those are actually wrapped in "elements". The browser's gonna wrap them in what's called an anonymous [item], like a fake, like a pretend element. For us people who make the
websites, it doesn't exist. For the people who make
browsers, it very much exists. But kind of what it means is that if you just have
extra stuff floating around, the browser's gonna put
[anonymous boxes] around them in order to get everything nice and neat. It's gonna wanna take
each one of those [boxes] and place them on the grid. Another way to do it, a probably really super
common way to do this is we're gonna have an unordered list with a bunch of list items. The unordered list is the grid container and the list items are the grid items. Or here you could see body and
inside the body is a header, a main and inside the
main there's an article, inside the article there's
an h1, a p, a figure. Also, underneath body we've
got an aside and a footer. Basically what that means is the header, the main,
the aside, and the footer are all direct children
of this body element and those are available
to be placed on the grid that we defined on body. Everything else, like the article, the h1, the p, the figure, those things are grandchildren or great grandchildren
of the grid container and so they cannot be placed
on this particular grid. If we put a grid on body, only the header, the main,
the aside, and the footer can be placed on that grid. This is very different than
the mental models we've had, with the tools we've been using. All the way from 960.gs through Foundation up through Bootstrap, those systems were like
you just had one grid. You had one grid and you just applied it to the
entire website all at once. This is not like that at all. We're gonna be defining multiple grids, using them at different
places on the page. And in this case if I
put a grid on the body, I can only place these major elements, these things that are
direct children of the body onto that grid. So what that might mean is we wanna define a
second grid on the article. So on article we say display grid and then we define another grid. And on that article grid, we can place the h1, the p, the figure, and have a way to lay that out. Now we might want the
things inside the article to be lined up with the things
on the main page layout. Maybe we want the aside,
the child of the body, the aside that is the child of the body, we might wanna line that up with something like the
figure in the article. We can't quite do that right now. In the future with grid level two, we'll probably have a tool called subgrid that will let us create a grid and pull it down through
the layers of generations, from the children to the grandchildren and to the great grandchildren, and then communicate information back up through the family tree, but we don't have subgrid yet. There are several blog
posts written about it. There's some work being done to try to ask questions of people, what they need, what they want, to make sure that subgrid covers all the use cases that we have, but it doesn't exist yet. It's not in any browser yet. So for all practical purposes, it's not a tool that we can use. What we'll do instead is have nested grids where we have a grid inside
of a grid inside of a grid. So the other thing that we'll be doing because of the nature of grid and the way that it applies to a container and only affects its direct children, we're going to be using
grid alongside flexbox. So in this example, I've got an unordered list
with a bunch of list items. And on the unordered list,
I'm gonna say display grid and then each of the li's are grid items. But then inside each li, I've got an h1, an image, a paragraph, and I wanna lay those out. Now I could make another grid there, but maybe I decide that actually the layout of the
content inside the list item could be done perfectly well with flexbox. So I could put a `display: flex;` on that li so the li is both a child of
the grid, it's a grid item, and is a parent for the flex container, the flexbox, the flex formatting context, so it's a flex container at the same time. So overall the concept,
you have to really know what is a container, what does it do, what are the items, what does it do, how is it that we nest them together. So here's an example, a
diagram of an example, a very common layout that we've
been doing for many years. We've been trying to do this
kind of layout with flexbox and we've been struggling. This layout, the overall layout, the layout of the cards themselves is much better served by grid. So let's go ahead and make the overall group
of cards a grid container and we'll make each one of
those cards be a grid item and lay them out with grid. And then each card is in
fact a container itself and we're gonna have
content in that container where that content is a bunch of items. And in this case with this layout, we could easily use flexbox. So here's a running example
that I've put together, you can check this out online,
of that exact kind of layout where the content inside the
cards is laid out with flexbox. The cards themselves
are laid out with grid. There's some other terminology
I wanna breeze past you so that you can see it. We've got a grid container, grid items, grid cells and grid areas. So any one by one unit on the
grid is called a grid cell. You can also define areas, so an area might be multiple cells. Here you can see an area might be wide. It might be tall. An area can be one cell. It doesn't have to be
bigger than one cell. It could be square. But no matter what, every single area is
some sort of a rectangle. There are no L-shaped areas. It's not possible. You could define a rectangle up here or you could define
another rectangle over here and then you could work
out your code that way, but there's no way to define, at least not in Grid Level 1, there's no such thing as an L-shaped area. All the areas are some
sort of a rectangular shape made up of one or more cells. We also have rows and columns. This is for a horizontal writing mode which you get by default if you
don't define a writing mode. For those of us who are laying
out English text for example, this is the most common writing
mode that we're used to, but you can lay out text
in a vertical writing mode. For example Japanese or Chinese or Korean, if you want to you can lay that out in a vertical writing mode. And if you use grid in
a vertical writing mode, then it switches the rows and the columns and the columns are horizontal
and the rows are vertical. You can also call rows and columns tracks. It's a nice generic word. It gets used in a lot of tutorials especially to just talk
about defining your tracks. It doesn't really matter
whether it's a row or a column. All the track definitions, all
the code that has to do with how tracks get defined is the same, no matter which way it is. There's also lines, right,
so a bunch of row lines, a bunch of column lines. There are grid gaps. If you don't define a grid gap, then your gap is basically set to zero. Your line is just zero pixels tall. But if you define a gap, you can make your gap be
a certain amount of space and you can create space
between items in your layout very, very easily. You cannot put content in a grid gap. If you wanna put content in a grid gap, then really you shouldn't have a grid gap. What you should do is make a track and then make a skinny track
and make a bigger track and make a skinny track
and make a bigger track and then you could put content
in those skinny tracks. Grid gaps are by definition
void of all content. Every line is also numbered
and as you write code, you're gonna frequently
target those numbers and you're gonna say I want you to go from
line three to line five and that's gonna tell it
to run from three to five. One of the big differences though if you are a person who has used a tool like Bootstrap or Foundation
or any other of the many, many layout frameworks that are out there, the float-based layout frameworks, most of those frameworks use numbers, but the numbers are the
numbers for the tracks. So you might say I want this
to run from three to five and that's gonna make it run like column three,
column four, column five, which is three columns wide. That's not how CSS Grid works. So you wanna let go of those ideas, purge that from your mind, and instead if you say I want this to run from three to five, it's gonna run from
line three to line five which bridges two columns. A bit tricky to switch,
but once we switch, we'll never remember that it
used to be a different way. This actually feels very natural
and makes a lot of sense. There are also negative numbers
in the universe of grid. They do not work like a
Cartesian geometry graph so it's not like you have line zero and then the positive
numbers go this direction and the negative numbers
go that direction. It's not like that at all. Basically there's an explicit grid. When you define an explicit grid, it's gonna take the very last number and label that negative one and then work its way backwards. So for example in this diagram, if we imagine, if we just
assume that this entire grid that's been defined here
is an explicit grid, then you can see the
numbers across the top, one, two, three, four, five, six, and across the bottom
negative one, two, three, negative two, negative three, negative four, negative
five, negative six, to give you two different
ways to target lines, whichever one is more convenient, whichever one gets the job done. There is this concept of
explicit and implicit. It's used a lot in grid. Basically anytime you're talking
about something explicit, it means that you have defined it. You define the rows. You define the columns and
that creates an explicit grid. There are times when you don't define rows or you don't define columns or maybe you define the columns but you don't say anything about the rows and the browser creates
the rows automatically. Whenever the browser's creating something automatically for you,
it's an implicit context so that you end up with implicit grid or implicit rows or implicit columns where the grid starts making them because it thinks you need them, but you didn't define them explicitly. It's also important to understand the difference between the grid in CSS and the content or the interface elements, the things that are in the HTML that get placed onto the grid. Sometimes this confuses people. Those content elements or
those interface elements, the things whether it's
a form or a paragraph or a headline or a button or divs that have things inside of them, maybe things that JavaScript handles, those things exist in HTML, of course. You can style them with any other CSS. If you wanna have a headline with a big thick line across
the bottom of it, great. It's a headline, you put a
big thick line on it with CSS just like we've always done. And then you can take that
content, that h1, that element, and place it on the grid some place. The grid itself exists in CSS only. It can't be styled, at least not using the grid
level one specification. There isn't a way to say, "Oh okay so I put my headline here "and I put my paragraphs here, "but I would really like
to have a big long line "all the way down the side of the page. "I'd like to have a big
line all the way across." There's no way to have
a line all by itself or a background colour. You might say, "Oh well,
I've got my headline here "and my content here, my text here, "but I'd actually like to
have a big orange stripe "down the side of the page." There's no way to make a background colour on the empty cells, on the grid cells. I'd like to see that in Grid Level 2. I think that could be very, very useful. I'm working with the CSS Working Group to see if we can get something like that. It doesn't exist yet so what you need to do
instead is have an element and place that element and then put the styling on that element. So I like to use B elements because they're not really
being used for anything else. It's obvious that the B
isn't really anything. I prefer that to using
an empty div for example, but you could take an empty B element and place it into a track
and fill up a whole area and then make that orange or place it across your entire grid and put a black thick line on it. That's what we're gonna
need to do for now. So I hope those basics
help you with CSS Grid. There's a lot to learn, but those are some of
the overall concepts, a lot of the vocabulary
words that you need to know in order to make it easier
to read documentation, easier to read the blog posts that I'm seeing pop up these days.
