- CCS Grid is super exciting because it let's us do
the kind of layouts that we've been doing
in the past much more quickly,
but I'm way more excited about the fact
that it let's us do layouts that were either
incredibly tricky to do in the past,
so they kind of weren't work it, or they were impossible,
and now they're possible for the first time.
One of the things that's possible that was not possible
before is to easily overlap items on the page.
You probably don't even really think about the fact that
on the web, everything is separate on a web page.
We don't overlap elements.
Maybe you make an element that has things embedded
in it overlapped, like an image
that's actually two or three images, it's like a collage,
but for the most part, when you have an image,
the title's below it or next to it or above it.
You don't put the title over top of the image.
In magazine layouts, however, you see those kinds
of layouts all the time.
You see layouts with little bits
and little pieces are overlapping
other pieces and other bits.
The only tool that we've had in CSS
for the last 10, 15 years to do overlap
like that has been absolute positioning.
But absolute positioning is really tricky to use.
It's great, it's a great choice
when you're positioning something small,
like a little flag that says, "New,"
and you're trying to put it over something, that's fine.
But when you're trying to do a bigger layout
with absolute positioning, the problem is
that absolute positioning doesn't take up space in the flow,
so you have items that are, maybe you don't know
how tall it is, and you want to put it with something else,
if you use absolute positioning,
there's no way to have something follow after
that original thing that's been positioned
because there's no way to know how big that thing is.
And in the context of a content management system,
maybe sometimes that thing is really short,
and you want your next thing to be here,
and another type of thing is really tall,
and you want the thing to be down here.
Well, absolute positioning doesn't have any way
to acknowledge or carve out space
for one item followed by another item.
So it's kind of going on the back burner
as a tool we don't use very much.
It was one of the original ideas for layout for CSS.
I think the folks who invented it thought
that it would be the main way for doing tonnes of layouts,
but it really didn't live up to expectations.
So CSS Grid is filling in the gap
that's been here for a decade and a half,
and it's allowing us to do the kinds of layouts
that maybe we should've been doing all along,
but here we are.
So overlap is one of the things that we can do.
The problem is that we have these habits,
we have decades of habits of assuming that we can't overlap.
We got to break that habit, we got to start re-imagining
what good graphic design could be with overlapping things,
and I don't mean going crazy or going nuts.
I just mean small places in which we might use overlap
to create interest or to help us do some sort
of an asymmetrical layout, or help us have something
that's super robust in a content management system context
where we don't have any idea how long the layout is,
but we have a way in which to create interesting layouts
despite the complexity.
So here on labs.jensimmons.com,
I have an example of how you might overlap items.
I can go in here to inspect the elements,
and check out the layout tab, I can turn on the grid,
I can click on the target is going to jump us
to the unordered list that is in fact our grid container.
And you can see here, I've got these row lines,
one, two, four, which actually there's line three
and line four that are both here,
they're stacked on top of each other.
Line five, line six, line seven, and in the other direction,
the column direction, row line one,
two, three, four, five, and six.
We can look at the rules and we can see
how we've defined our grid on our grid container.
We've said, "display grid,"
which makes this become a grid formatting context,
and then we've got grid template columns.
And I've just written out what I want:
4fr, 2fr, 2fr, 3fr, 6fr.
Basically that's making a set of columns
where this gets four units of space,
this gets two units of space, two units of space,
three units of space, and six units of space,
which is a way to create a ratio-based array
instead of having every column being the same,
we make them all variations of a ratio.
It's makes it a much more interesting layout.
We didn't even define anything about rows,
it's getting created automatically, which is
why these two row lines are ending up on top of each other,
which by the way, is fine.
There's nothing wrong with this at all.
It's just how it's working out
in the automatic placement algorithm.
And then we can look at these list items, so I can see
that I've said that I want this particular item to start
on grid column line one, which is here, line one.
And I want it to span two columns, so it goes boop, boop,
and it ends up on line three.
Or here, grid row line one, and I want it to span
two columns, and it ends up here on row line three as well.
You can look at this list item, and you can see
that it is starting on grid row line two,
and it's spanning four rows, so this is the first row.
The second row is actually right here
because these are collapsed.
This is the third row, this is the fourth row.
So it's sort of ending here,
except the image isn't tall enough,
so it doesn't go all the way down,
but that's the area in which this particular piece
of content is being placed.
And then it starts on column line two,
and it spans three, so span, span, span,
and it ends over here on column line five.
Or you can look at this one.
It starts on grid row four, and it spans three,
starts on column line four, and it spans two.
You can get in here with a grid inspector,
and you can mess around, change these numbers,
see what that does, dig into why
exactly these two lines have collapsed on top of each other.
But the basic principle here is simply
that we are telling a particular content items,
or particular grid items, to be in the same area as others.
We've said this area, and then we've said this area,
and those two areas overlap each other.
So we have overlap on the page.
Let's look at a couple other examples, pretty simple ones
where again we just have a basic grid happening,
and we've explicitly placed things on this grid.
Here I've got an image that's being placed
in one particular area, and a headline
that's being placed in another particular area.
And because this image is told to go from column line one
to three, and the headline is being told to go
from column line two to four, there's overlap
between column line two and column line three.
And so therefore we've got a kind of teaser card
that has a much more interesting layout
by creating just a very simple adjustment.
It's not so crazy that users are going to be confused.
You're just going to have a little bit different,
a little visual variety compared
to what we're used to seeing.
You can see here that I've made another example
where all of these circles are in fact
translucent circles, and they're overlapping each other.
So some of these circles are pink,
and some of these circles are blue,
and these circles are intentionally being overlapped.
And when they're overlapped, you can see the purple,
the intersection between those two circles.
Again, dig into this on your own and check out
how the code is done, but it's just another example
of how overlap can be used.
Or this is a poster that I saw and
that I wanted to try to do with the grid.
See how it is that we can, lift ideas
from graphic design of the past to help shake us out
of our habits and get the juices flowing,
get us being more creative, but doing so in ways
that are easy for you just to comprehend
because we're borrowing principles from magazine design
or print design or poster design
that people are very, very familiar with.
So try out CSS Grid, inspect these examples,
and seriously consider using overlap
in the designs that you make in the future.