Simplifying Complex Layouts

[00:00:00]
>> Kevin Powell: Now, I'm one of the biggest proponents of grid you might find. I use grid a lot. I have lots of videos looking at really complex ways that you can use grid and push the limits of what you're doing with it. And I've had so many people commenting about saying grid's too complicated. It's just these big picture layouts that you're creating where you're doing all of these things with them. I don't use it because I just get overwhelmed with trying to control it.

[00:00:24]
Even with the what we just looked at now, there might be other ways where you could simplify that layout with a few extra layers, a few extra divs here and there to change how the content's organized, and maybe you could find a different way to do it, whether you're not using areas and redeclaring things, you're just changing a flex-direction or something. It's possible. The problem is, or not, yeah, I think it is, the problem is that people follow a lot of things on grid that I haven't talked about here.

[00:00:50]
I said there's line numbers, haven't talked about those. They're super powerful, but when you start using them and rearranging things, it does get more complicated. And you follow lots of tutorials where you're also declaring rows. We've only looked at declaring columns so far. You can declare rows, and when you start seeing layouts where they're declared, then it's this extra layer of complexity.

[00:01:09]
So I found this layout on Dribbble that I thought is interesting. We'll just give credit to the designer, Jabell here, so I wanted to take a look at it, so I'm going to save this image on my desktop. And I want to look at it quickly to show you the mistake that people sometimes make when they're using grid. We're going to open this with Paint of all things, but it actually works decently for what we want to look at today.

[00:01:36]
You know, Copilot is now in Paint. I don't even, I haven't clicked because I'm worried about what you can do with it. So on this layout here, let's zoom in a little bit. What people do is they look at this layout and they go, this is a really big grid. I could come in here and we'll zoom back out, sorry, zooming in to zoom out. They come in and they go, okay, this whole area is a big grid. Maybe down to here, and that next part breaks out.

[00:02:07]
And then in there, I'm just going to use a different color so we can see it a bit more clearly. Like this three column area, I'm going to have this master grid. It comes through and it's breaking all of this up. Then we have like this area here, this area here, this is obviously some columns, or yeah, rows and columns that we're making over here as well. So you have that top area where you're doing something.

[00:02:34]
This area, this area there, that second part is actually really similar to when we looked at doing spans before. I was inspired by that a little bit when I created it, because that's actually a cool use case. Three columns span across two of them for a big title. But then you're like, oh, I have this image. Now this image needs to span three. Then I have this other thing down here that's like sorting things out, so I have to figure out how I'm going to fit that into the grid.

[00:02:56]
This area is pretty straightforward, three column grid, six cards, no big deal. Okay, then how does this work into it? We can see here the layout starts getting a bit more complicated. But you're starting to like span things and move things and do all these things with it, and it does get complicated when you start doing this with these big master grids. And if you want, I think there's, I'm trying to remember what company it is.

[00:03:17]
There's a company whose web docs, I don't remember now, they have the whole thing with this massive 12 column grid, super impressed with their setup of it, but I can't imagine the work that went into setting it up. If I was doing this, I would look at this three column grid here. Just like we looked at setting up three columns, 1 FR each, span two. I'd use the exact same grid down here. Three columns, 1 FR each.

[00:03:47]
Not even spanning, you just get, you plug, you know, each one of those is an element, and it's going to create a second row of content on its own. This image doesn't have to be part of a grid, it's just taking up all the space. Okay, so I don't need a grid there. Over here, there's something going on layout related, whatever, that's fine. Over here, there's another one. Hey, it's the same three column grid again.

[00:04:11]
We can just reuse the same grid again without worrying about anything. Cool. Over here, that's maybe a two column grid, and it just happens not to have any padding on the sides. And these are all separate things. But because grid can control rows and columns, people feel like they have to make everything be on rows and columns. You really don't have to. You can use grid in really simple ways to create very structured content that is just three columns or that ends up becoming a six column section or three column, two row section just because the content flows into it.

[00:04:45]
You can use grid to create really cool, really awesome websites without getting into anything we've done. You don't even need the areas like we looked at. The first lesson, you could do a lot of the layout that we see here. We just looked at gap or display grid, gap of something, and a grid-template-columns, 1 FR for each one of them, and you're good to go. Side note, does anyone like making really complicated grids here?

[00:05:10]
It can be so much fun, but it gets complicated fast. But as much as I do like simplifying things, I do think you should focus on simplifying grids as much as possible. I'm definitely, as I said, we've only covered about 20% of what it can do, so I do want to mention there is another course here on Frontend Masters by Jen Simmons, Ultimate CSS Grid and Layout Techniques. So if you do want to get into it more, it also goes deeper into flexbox than what we're going to be covering here.

[00:05:32]
So once you're finished with this, you've got some practice in and everything else out of the way, that might be a nice next step to start exploring a little bit more of what it can do.