Jen Simmons here, Designer Advocate at Mozilla
to talk about CSS Grid.
CSS Grid is pretty great.
It lets us do some of the layouts
that we've been doing for a long time,
but much more easily and faster
than the tools we've been using,
and it lets us do a whole lot of things
that were not possible before.
So let me show you just a few examples
of what it can do.
Here I've got three different image galleries,
the kind of image galleries that we've been doing
for quite some time.
The first one is fixed, second is fluid,
the third one is responsive,
and you can see how those behave differently
when the website is changed,
the size of the browser is changed.
The responsive one changes the number of columns,
the fluid one just grows and shrinks,
and the fixed one stays the same.
Let's check out how this is being done.
And you can see here, this unordered list
is where I'm applying the grid-container code.
So here I've said display: grid
and grid-template-columns: repeat(4, 100 px).
display: grid is going to turn on the grid
and make it work on this particular unordered list.
grid-template-columns: repeat(4
is saying I would like four columns, please,
and I'd like each one to be 100 pixels wide.
I've also set a grid-gap of 4 pixels
to put a little bit of space between
each column and each row.
Here we can check out the one that's fluid,
and you can see on this unordered list,
I've said I would like there to be a display: grid, please.
grid-template-columns: repeat,
so that's going to give me a repeated pattern.
I want 5 columns of 1fr each,
which means just take the space that's available
and split it up among these five items.
I'm gonna give one portion to each of the five.
And then here, on the third one, I've got...
on this unordered list, a different grid being defined.
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
Which means I would like you, browser,
to figure out the math,
and to decide how many columns to make.
I'd like them to each be a minimum of 120 pixels
and a maximum of 1fr.
Which means without any media queries at all,
the browser is changing the number of columns
based on the amount of space that's available,
which is pretty great.
Now it can be tricky to really understand what's going on
with Grid once you do something more complex than this
if you can't see the lines.
So exclusive to Firefox, we have a tool for you
where you can click this mini icon of a grid
next to the word grid
in the place where it says display: grid
and it will make the lines visible for you.
It shows you, here in purple,
the lines around the different items,
and the gaps themselves are being shown.
We can sit here and make the gap bigger.
See, there you can see it, this hash line
means this is where the gap is.
You can't put any content inside a gap.
If you want a space that you can put content in,
then you should make some rows or some columns
that are different sizes and then put content
in those different-sized rows.
But the gap is really cool,
it makes it easy to quickly put space between items.
And you can see it here as I display this.
You can also do other things with Grid.
These kinds of layouts are very typical
for what we've been doing.
But one thing that you can do that hasn't really been easy
is you can explicitly place items
in specific places on the grid.
So here I've got a grid container much like the others.
This one I've said please give me four columns,
I want them to each be the same size as the other.
And then I've explicitly placed each item on the grid.
This is where the Grid Inspector tool comes in very handy.
So I click and I can see my lines,
and I can see that, in fact, this first item
starts on column line 2 and it starts on row line 1.
So column line 2,
and row line 1.
That's how that gets here.
Or this one, let's look at this one.
We can see that it is grid column 1, 2, 3,
extending to line 4,
and it starts on grid row 1, 2, 3
and extends to line 4.
This particular code says hey, take this item
and put it in this place.
And then I can get a design that has white space.
Vertical white space, making it possible to space things out
and make a much more beautiful graphic design
using the space of the page,
rather than having everything crammed up against the top,
which is what floats want to do.
Floats are like bars of soap, they just always float
to the top of the page.
Grid lets us actually make some space
and get some air in the place.
Breathe, make it possible to breathe by creating openness.
It's gonna be really handy.
You also don't have to make every column
be the same width as every other column.
We've been doing that for a decade
without really questioning why.
There really isn't any reason.
And with Grid it becomes incredibly easy
to do ratio-based arrays, like a Golden Ratio,
and other things that, in the past,
the math maybe got too complicated,
but here it's going to be really quite easy.
So let's check this out.
This is my example.
If we look at my Grid container
you can see here this ul { display: grid; }
Let's turn on the lines, you can see I've got five columns,
one two three four five,
0.8fr, 0.4fr, 0.4fr, 0.6fr, 1.2fr,
which is gonna really create more of a interesting layout
than if everything were equally spaced.
And the other thing I've done here,
which is pretty interesting,
is you don't have to have everything be
in separate cells, not touching each other.
When you explicitly place items,
you can overlap them intentionally.
So here I've got three items that are overlapped.
And you can look at this, check this out and inspect it,
to see exactly how it is that I did this.
But that middle one starts on column line 2
and spans across 3 columns,
and it starts on grid row 2
and spans across 4 columns.
Or this one, starts on line 4, line 4,
span 2, span 3,
It really opens up a world of possibilities
that you couldn't do before Grid.
Check it out.
You can also check out, I've got a bunch of examples,
you can check out any of them, inspect them in Firefox,
turn on the Grid, and unpack exactly how it is
that these examples were pulled off.
That's a brief look at CSS Grid.
I hope you're as excited as I am.
Use the Grid Inspector tool in Firefox
to check out other people's examples
and begin to really understand what it is that Grid can do.
Whether you're a designer or a developer or both,
you're going to want to get your head around
this new possibility in graphic design on the web.