- 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.