Overlap on the Web, Graphic Design Made Easy with CSS Grid


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

37 Comments

Add a Comment

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