Announcing CSS Grid & the Firefox Grid Inspector Tool

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

Tags: , , , , , , , , , ,

There are no comments yet

Why not be the first

Leave a Reply

Your email address will not be published. Required fields are marked *