How to overlap content in CSS grid — Webflow Grid 2.0 tutorial


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 2×2. 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. Wow. 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 one last thing here. What if we set a minimum height for this whole
thing? What would that look like? Well, on our grid, let’s set the minimum height
to 100vh — that’s 100% of the viewport height. 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.

9 Comments

Add a Comment

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