Overlap content in a responsive grid

Lesson info

Lesson info

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets

Transcript

First thing’s first. This is what we want to make.

But here’s where we’re going to start. Just a simple layout. Right now, we have our body element, and inside that, we have three things: a heading, the image (which is a div block with a background image), and another div block which houses the rest of the stuff.

And we’re going to create this (yes, it’s the same shot from a moment ago). It’s a grid-based layout with overlapping children.

We’ll do this in five steps. We’ll add and configure a grid element, we’ll add all our elements to that grid, we’ll set up the overlap, we’ll edit our grid to tweak spacing, and then we’ll make everything responsive for all sorts of devices.

Let’s add our grid element to the body. We’ll just drag in a grid and drop it in the body. And by default, it’s a 2x2. But we’ll add another column for this layout. Here’s why:

Let’s look at the original layout. Based on this design, we can infer three columns like this, and two rows like this.

Okay. All we have to do? Is hit done, and start moving in our content. (We want to move in each major element into the grid.)

By default, these items are automatically placed. And that’s okay.

Because of the next step. We’re going span one of them (the div block that has the image). We’re going to span it across two columns and across two rows.

And we’re almost there. But what happens if we try and drag the heading here to span across other content? It doesn’t work. (It doesn’t work because everything’s set to auto by default.)

So let’s undo that for a second and try it a different way. What if we set each of them to manual? Set our heading to manual, and set our image div block to manual. Now, if we grab our heading and span it, it kind of works.

Let’s look at the Navigator. By default, sibling elements that appear farther down in terms of order show up on top of other elements. (This is expected behavior.) We can re-sort this in the Navigator, and that’ll put the content on top, or we can undo that. And just set the heading to relative (we can change its position from static to relative). That keeps the same order in the document, which can be really important. That’s because if we put thought into our document order here? We’re creating a more accessible design for those who might be navigating using a screen reader. So document order matters.

Now, let’s tweak our grid a bit. We can edit and then adjust our column width by clicking and dragging each of our first two columns to get the spacing just right.

And what happens when we grab the edge of the canvas to check responsiveness? Everything reflows following the layout we specified.

What about tablet? It’s a little bit tighter in tablet, so we might want to edit our grid, which we can do (with the grid selected) by hitting enter. Let’s decrease the rightmost column and see how that looks. Hit escape and check the responsiveness and fluidity? Looks pretty good.

What about mobile landscape? The grid aside, we can make some other important changes here. Let’s drop our heading size. And we’ll do the same for the article title, and the author, and the button. But we won’t make you sit through font changes. And with the magic of visual effects, and the help of Industrial Light and Magic, we’ll transition to the point where we’ve already made these changes.

Same thing with the other heading down here for the title of the article, and same with the author. Each time we see something that looks a little tight on that breakpoint, we’re making adjustments. We’re just going in and adjusting the font size for each of these.

Okay, finally, mobile portrait. The overlap might not be realistic here. And that’s okay. Let’s try something different. Let’s try making our heading full width by having it span across the whole grid.

And we can make an adjustment to the image, too. We can drag that so it sits underneath the heading. And finally, we can change the content. (Just doing the same thing by dragging to adjust the span.)

But here’s the thing. Our image? Doesn’t really have height. Take a look at the size properties in the Style panel. No height set. The height was determined automatically on the other views (on mobile landscape, tablet, desktop) — the height on our image div block? Was determined by its relationship to the other content in the grid. So let’s give it a manual height here of about 100 pixels. Exactly 100 pixels.

And that’s it. When we test this site, the overlap looks great as we adjust the width of the browser. And then it stacks just like we told it to on mobile portrait.

That’s creating overlapping content in a grid.