Tetris Grid Layouts

Demonstration;
https://tetris-layout-test.webflow.io/

Cloneable;
https://webflow.com/made-in-webflow/website/tetris-layout-test

Video Transcript

I love the Webflow forums. They're always fascinating and interesting problems to solve. Today in the Reddit forum, there was an excellent question about whether it's possible in Webflow to create a design that looks something like this where we've got a hero image that can wrap with other elements in a sort of bento-like way, with different sections breaking the boundaries and rules of layout in-house. How it will actually react and interact with those elements.

Now, we're not going to ask any questions at all about responsiveness, but obviously in a real-world design, that is a central consideration and something you will need to consider if you were to design something like this for your site. But it was an interesting problem. The question was how would you do this in Webflow in a way that is at least partially responsive within the constraints of this particular layout. Where if I change the browser window size, then everything will stay in place. We'll have our nice neat corners, our nice neat image, and our nice neat columns.

And it is in fact possible. But as I said, it is not a bento. It has slightly different rules. Instead, the end result will look something like this. Where we have a flexible, semi-flexible layout with constraints. And you can see that we're able to achieve these overlapping columns and so on pretty effectively using a CSS grid. Now, there are other ways to do this. There are many ways to do this. But I chose to use a grid partly because I wanted to see if in general the principle of using a grid is possible.

So what I thought I would do is talk through very briefly this particular approach to the implementation. I've decided to call this a Tetris grid because, to my mind, the layout is more like Tetris pieces that might fit together in a variety of different ways but that will create a cohesive end result where there are no gaps. Hopefully, no gaps. That's the point of the game of Tetris, right?

So here's what this looks like in the Webflow Designer. And you can see it's not too terribly complex. We've got a grid. I'm going to expand this so we can see everything here. We've got a CSS grid here which contains a series of different elements. It's got our main hero image here. It's got column 1, column 2, and column 3. And that is really it.

The trick to getting this overlap here. Let's focus on this key aspect of it: breaking the rules of design. It involves two parts. One is using the fixed positions for all of the items in the grid. This allows us to break the grid's inherent desire to flow elements so that they do not overlap. Here we want them to overlap. It's very important that they overlap. So there is an image behind this element. We're not using SVG masks. We're not doing anything like that. This is simply an image filling the background.

And the approach that I've used is to do a little bit of trickery for the rounded corners, for the continuous rounded corners, and then for the overlap. You can see here. Here's a hash symbol. Every one of these elements has a fixed position in the grid. Now this particular grid is all of two rows and three columns. You can see the three columns clearly. One, two, and three. And the three rows are this top part of the image up to the top of this column. Then it is this overlapping piece here. That is the second row. And then the third row goes as far as we want.

Now it's important to understand how this works. So let's have a look at the grid itself. You can see here all of the columns are 1fr. The rows are very specifically sized because we want a particular look so I've got 400 pixels for the large area at the top. I've got 100 pixels specified for the overlap area. And then the rest is just auto. It will extend however far the content goes.

The trick here is I've picked 400 and 100 because I wanted that top, I'll call it the hero area, the hero tile, this image element, to have a fixed height of 500. So it is the sum of those two. I want this to fit all the is a background image set to center and cover and it will just fill that space no matter how much, how we reshape it. So the edges might trim a bit depending on the size and shape of your image. If it were portrait it would be trimming a lot of it. But the main point is to keep the center of the image in view and to make sure that it fills the entire space.

This top right area here is simply positioned within the image element. So this is actually absolutely positioned inside of a relative container. Image is set to relative. You can see here. And this top right piece is set to absolute. Now you'll notice I've had to fudge a little bit with the positions. I'll talk about that a little bit later. The columns here, the position of this column, for example, runs. Let's find our CSS grid positions, which are hiding well. There we go. Column start 1 and stop 1 and then row start 2 and end is 3. Whereas these are going to be column 2 and it's only going to take row 3. This is going to be column 3 and only row 3. So each of these items has a very specific purpose.

This is 2 and below. This is 3 only. This is 3 only. This is columns 1 through 3 and rows 1 and 2. So everything has its place. We know exactly the size just like a Tetris piece has a certain width and a certain height. We need to make that determination when we build this out.

Now let's talk about the corners. The corners are actually one of the trickier pieces. Some of the corners are quite easy, such as this top left corner and this bottom right corner. That is simply achieved by putting a border radius, or by putting a corner radius, I used 30 pixels, on the image. And it's on all corners, even the ones we cannot see here, which are behind these elements.

These corners are much trickier. Here I've got, this corner is just from a column 1 corner. And this corner here is just a corner on the top right. It's also, you can see it's 30 pixels and only on the bottom left corner there. But these little pretend corners, these little inner pieces, are separate little SVGs that are positioned in such a way that they will kind of float along with the layout as it changes.

This was a little bit of creativity to overcome this issue. What I've done is created an SVG, and it's an inline SVG, so it looks like this. Small, simple SVG whipped up in Figma. Very simple. It's simply a square with a circle masked out of it. White background. I made it 30 by 30, and I dropped it into this element. The element also needs to be clearly set to 30 pixels wide, 30 pixels tall, so that it will maintain its full integrity.

Then I position the element, you can see here, here's our top right element, the book of call with a second. It is inside of that element, but it's positioned absolute relative to the top right container. So top right is also, you can see it's positioned absolute here. So it has positioning. It's positioned absolute in relation to our hero area. Within that, this first corner, this top right corner here, is minus 30 and minus 1 from the top. That eliminates a tiny bit little gap that I'm seeing appear visually. There may be other ways to fix that. This was a hack. This was meant to be a quick demo. Perhaps we need borders. Perhaps there's something missing in the SVG. Perhaps it doesn't go exactly to the edge clearly enough. I don't know the answer to that. I didn't have time to research it. This is an offset. But the minus 30 here is very important. This brings it from the top left corner here inside the image outside of the image so that that will float with that area.

I've done the same thing or a similar thing with this second corner here except it's attached to the right and it is pushed down from the bottom minus 30. This is part of the reason that having a fixed width and height of 30 pixels on this becomes important. This one here is actually attached to the column. So you can see column 1, which is relative, contains in it this fixed position corner which is then adjusted upwards by 30 pixels. For some reason, we don't need the minus 1 to fix a gap. So great, that's the way we want it. And for the second column, we've done the same thing. The column itself takes responsibility for the positioning of this item and that works particularly well.

One final note I'll make is that to get this layout to work, particularly with these critical corner alignments. It was important to avoid any type of gap between the columns or the rows. Any gap that you want actually in the content needs to be built in the form of padding within your columns. So I can do padding here to create some spacing. It cannot be between the columns or you will end up with funky gaps between your little SVG corners and everything else.

Now let's talk about the important question. Would I ever actually use this? Well, if you held a gun to my head and said, "Hey, we, your client, are demanding this particular kind of layout. It must be this way. We will pay for the extra time and effort needed to build and test it across multiple devices and to figure out how in the world to make this thing work responsibly." Sure, I would do it. And this approach is the cleanest that I've found, but I have to say it is not the friendliest design to.