Handy CSS layout patterns, and fun ways to elevate them

Key Takeaways

Hello, my friend and friend. In this video, we're going to be looking at three layout patterns that I use quite a lot that I think are useful that I don't see used often enough and some cool tips and tricks along with using them. Actually, the second one is one that's common, but there's a problem that people run into with it that we're going to look at. But first, let's look at this one, which is an overflow scroller. I recently did a workshop where I was talking about this, and a few people are like, "Oh, I use so much JavaScript to do this." So, we're going to see how we can do it the CSS-only way with like a few lines of code. So, you can see here I have this overflow scroller with a bunch of cards in it, and I'm going to use grid. You could definitely use flexbox for this, but I prefer grid cuz if we do it with grid, the parent controls everything, which is always nice. So, we can do display grid, a gap of one, and then the very underused grid auto flow. And with that, I'm going to say that the auto flow is column, and I always forget. I think this is columns or was it column? Column singular. It's always fun knowing with grid if it's singular or plural. And that makes all of my cards turn into columns instead of creating rows. We've changed the the flow. This is a little bit like changing the flex direction with the exception that we can't have flex wrap involved in it, but yeah, our flow now creates columns. And then, what I can do is cuz, you know, they're all different sizes, which is kind of awkward. So, now what I can do is a grid auto column, and we can control the size of the column, and this is columns plural, and I know that one's plural because this one's singular, and that's how I remember it. And here, I can just bring in a size, and we could do a lot of different things for the size. Let's just say we could do something like 300 pixels. I think will be fine. I might make them a bit bigger. Maybe for this layout, actually, it's okay. We'll see. But you can see right now, that's creating my my going that way, and I put gap of one. Let's make that one rem. Yeah, now we're now overflowing, quite literally, which isn't what I want. I want like an overflow scroller that's not causing the entire page to scroll. So, then I can just come on here and say that my overflow overflow on the x-axis is going to be a scroll. And in doing that, now we can see here I'm I'm scrolling left and right. Uh which not ideal maybe, but this is very common pattern that we see these days and where the real part of this comes in cuz I guess this is enough. I'm just holding shift down by the way to scroll sideways, which is the awkward part if you are on a desktop computer. But on mobile, this is a very common thing with UI interfaces these days. Uh but the part that I want to look at really is once you've put this in place is coming with scroll snapping. And scroll snapping is definitely underused for these types of things where we can just say that we have a scroll snap type. And this is the part I always mix up. I think you want to do the direction first, so it'd be my inline axis in in in line or we could do x cuz we're on the x-axis. And then mandatory. When you first do this, it's a little bit of a letdown. I won't lie cuz you're going to try it and nothing is going to to snap into place. I actually thought I made a mistake at first here. Uh but what you want to do is combine the scroll snap type with selecting the children and saying how they're going to align when they're snapped. And this is the perfect use case for nesting because we can just do an ampersand and then get the children with the star selector here. Uh you don't actually need the ampersand. You could also do it like this. I I just have this habit of putting the ampersand. It's completely up to you. If you feel like this needs a comment, you can just put select the children. So, you know, everybody knows what's going on. And then here what we're going to do is a scroll snap align. And I'm going to say center for now. You can do start, you can do end, we can do center. And if I do center, you can see now it's going to grab the one in the middle and it's going to center it. So, when we or not the one in the middle, but when we get when we we over, it's going to snap the one that's being snapped into the middle. Uh for this one I am using a scroll snap type of mandatory. There's also proximity. For this, I don't really like proximity cuz it leaves like proximity leaves a little bit of leeway. So, uh well, let the page reload and then so now when I'm going over, actually it it's still going to act very similar, but there is this like chance where things might not snap into place. I think in the way we're setting things up here, uh it won't matter. Uh but if you're doing something that's more based on like scrolling horizontally with big sections, proximity might be your better bet uh because mandatory becomes a little bit aggressive. I'm not a huge fan of using scroll snap type for sections of content though. It's a bit like scroll jacking which can be a little bit annoying. Uh so, I'm going to change this one back to mandatory mandatory like that. And we're going to move on, but I do have a really cool trick that we're going to show you I'm going to show you at the very end with this one. Uh but it's not really related to layout patterns. This is a really fun thing that we can do with this uh that just makes it so much cooler. Uh but for now, what I'm actually going to do is comment out this overflow scroller, this entire section so we can move on to my second uh layout which is going to focus on similar cards uh that we have that we're going to be doing auto grid. And I realize most people are familiar with auto grid. So, let's just go look here quickly at the HTML. Same thing, auto grid, bunch of cards. Uh and the auto grid does have two choices. Uh so, let's just come here and say that that we have the auto grid. I'm going to do a display grid once again. We're going to do a gap. Uh and as I said at the beginning, I think a lot of people are familiar with auto grid, but there's a gotcha with it that people run into issues with which is why I want to look at it today. And so, this is going to be my grid template columns. And the reason I'm saying auto grid is because I want to use the repeat and I want to use the auto fit syntax. I'm going to drop this on another line just so we can see it all. And for now I'm going to say auto-fit and just say 300 pixel. Let's do 200 pixels so we get a few more columns. Uh which means that it's automatically going to I auto grid. I put it in the wrong place apparently. Let's go fix that. Uh I I named them both the same. Auto grid section will help uh alleviate that issue. Uh so you don't normally see an auto-fit with 200 pixels like this because it's kind of clunky. But it works. I mean it automatically adds or removes columns if they're based on if there's enough room to squeeze in an extra 200 pixel column there. But we don't do that because it's kind of clunky. So usually what this is is with a minmax. And this is where things get a little bit uh interesting or more useful I should say but harder to remember. So I will give you the trick that I use on remembering the syntax here along the way as well. Uh so for this minmax we're going to say this is we'll stick with the 200 pixels as our minimum. And then we're going to say 1fr for the maximum which just means it allows them to stretch. So it's exactly the same thing that we had before but now those columns are kind of squishy. So they'll shrink down a little bit then they fill up the space then they you know it makes it responsive and that's great. The problem with this layout is this if you have a larger size here. And this larger size can cause overflow if the total space is below 400 pixels. Right? Because we're saying the smallest these can get is 400. And the trick here is to put this all inside of a min and this becomes 100%. So this is weird that we have a min inside a minmax. Again I'll give you the trick on remembering this and an easier way to write it in a second. Um but this works really well and you can see it's exactly the same thing that we had before except now at small sizes it's using the 100% and that's because it's going use whichever of these is smaller. Is the 100% smaller? Which it is right now so use that. And then as soon as the parent is larger than 400 pixels, it switches over and it's now using that 400 pixels here instead of the 100%, which yeah, I think is a nice win, but it's a little bit hard to remember. So really fast whenever you're want to do this, you use the repeat when you don't know how many you want, so we just say auto figure it out for me. There's auto fit or auto fill. I I default to auto fit. Pick one if it's the wrong one, pick the other one. And in this case right here, there is no difference anyway. So I'm going to do an auto fit, comma, and then I know I need a minmax. In my minmax, I need a minimum value. So I'm going to use a min function, comma, 1fr so I don't forget it and then I don't have to worry about where the fr goes between all these closing braces cuz that I I mix that up if not. So we have the minmax. Again, min cuz I need a minimum value, comma, 1fr. And then I go in my minimum and I put a value that I want. Let's do 300 pixels this time and 100% and the only value that ever changes is this one. So the nice thing to do is say that we have a min call size of 300 pixels and use that custom property instead and then this becomes var min call size like that. Makes it for an even longer declaration, which is, you know, it's a lot of a lot of code, I guess, for a single CSS declaration, but now we have the layout that is working exactly like we want it to and it's very perfectly responsive nice intrinsic layout pattern right there. And you can just, you know, rinse and repeat this, use it anywhere you want and just change this min call size for the different values that you might need. So another one that I quite like. So let's get rid of this section now here and get into another one. Adaptive. What does adaptive mean? For this, I'm also going to move the the heading off. We'll we'll comment this out so this is closer to the top. And let's look at this. So here I have this layout once again similar to before I actually have the auto grid in this section as well I believe. Auto grid is here or that doesn't really matter too much. What matters right now is the this area here this active promotions. Which is this promo list that I have right here and it's inside of a section a sidebar section. And so for this one we're going to be using container queries and container queries don't get enough love usage of them is very low. Browser support for them is very good now you can safely use container queries unless you really need to support some legacy browsers. And what we're going to do is let's start with our promo list. And the reason actually okay let's talk about the reason why I want to use a container query for this in the first place. Is right now this is in a narrow sidebar section and then as the viewport gets smaller we get to a wide area and then eventually it will get narrow as well. And what I want to do with this one oh we have a bonus tip with this one too. But what I want to do with this one is when there's enough room I want this active promotions to actually be three columns instead of stacking like this cuz it looks kind of ugly. But when it's at a this area I want it to be stacked cuz that makes sense and when it's over here I want it to stay stacked cuz that would make sense. And using a media query for this is a nightmare because it as the viewport gets wider that area it has to live in gets smaller. So it doesn't really make sense to do this with a media query. So let's get that that's my promo list and I want to say an at container. And we can say our width or even inline size but I'll do width in this case is we're going to say if the width is larger than let's try 500 pixels we want it to be a grid template columns of repeat three one fr. I have some other styles floating around but we can let's just say display grid gap 1 rem. Cuz this would sort of be what the the pattern would be for this type of thing. And if we try this at first, it won't work. So, we get to here, this is clearly bigger than 500 pixels, uh but we don't have three columns. The reason that's not working is cuz there is the side effect of having to have a container. And for this, the white border around here is my sidebar section. We have this aside, the aside I called the sidebar content cuz we have first the sidebar, then the content. Um maybe there's a better name for that, but yeah, sidebar content I want to grab either the aside or the section itself. Either one of these would work perfectly fine, so it's up to you which one you want to use. Uh I like making the closest thing the container, but the aside makes complete sense. So, if you'd rather the aside be a container, that would work completely fine. But I'm going to say that the sidebar section is a container type of inline size. And in doing that, when I make this smaller, we get to here, and then we get those three columns cuz this is clearly bigger than 500 pixels. And as we get smaller, then it wraps here as well. And yeah, so I think that works really well. It's an adaptive layout, it's able to change to where it's being used. I really like this for anything that might end up in a sidebar. Uh and these types of patterns like this work really well, uh much easier than trying to figure it out along the way with a media query and then having to readapt, and then the breakpoint changes, and you have to have another breakpoint changing for the other thing, it's a little bit annoying. Uh the only side effect here is we do need to declare our container type, but whatever, not the end of the world. And now, just before we get to to the bonus tips, including how we can do these interesting little cutout corners, and a really fun effect for the first thing that I'd mentioned earlier, uh I do just want to quickly mention that this video is being brought to you by my course CSS Demystified, which I built from the ground up and includes an entire module based on patterns that we're seeing here. We're we're looking at fluid, intrinsic, and responsive design patterns that go into a little bit like what we looked at in the previous example, as well as a deep dive into container queries, some useful patterns with them, some gotchas along the way, how we can overcome some of the gotchas, and yeah, just a deep dive into helping you learn how you can start writing CSS with confidence. So, if you'd like to know more about that, there is a link just down below in the description, and with that, let's jump back into things and look at how we can do these little scoop out corners that are right here. Two bonus tips. I I I I mentioned a few things along the way, though now we're going to get into the fun stuff. So, on my active promos here, let's go That's my promo list, and then these are just LIs inside. So, I could say that the LIs that are direct children, which I had the ampersand before, so I'll use the ampersand again here. Where first I'm going to give these a border radius, so border radius, I'm going to say like, I don't know, I'm going to make it bigger than what I'd actually want. So, I probably whatever, 16 Yeah, it's probably a little bit big. Actually, I'll leave it big so you can actually see what it is. Let's also change the border color, cuz I think it is standard. Border color can be white, just so it highlights a bit more. And then what I'm going to do is a corner shape of scoop, which will now scoop out those corners. Nice, right? So, corner shape is new. This is a progressive enhancement. If it doesn't work, then people get the border radius, and if it does work, then they get the scoop. And again, I think that's a little bit big, so we can drop that down to like an eight. And scoop I'll put a link to more information on corner shape. You can do squirkles, you can do scoops, you can do bevels and insets and all sorts of interesting things there. But I'm going to leave it with my my little scoop there to make it look like a ticket or something that people are getting for their coupons. And the last one that I wanted to look at, which is one of my favorite new things, is with scroll-driven animations, which let's get this scroll And what we're going to do with this one is something very cool, at least in my opinion. I think this is the super amazing. So on my overflow scroller here, we have, you know, we scroll side to side. And we can make this just I don't know, so much more satisfying. Where I'm trying to remember how I'm going to do this. So we need to create some keyframes for this. I'm going to say in at keyframes let's call it scroller. And we're going to say at 0% and 100 100%. So when they're at like the extreme ends of the animation, we're going to give them an opacity. We're going to exaggerate this and then we'll make it look better. 0.5 and let's give it a scale of 0.5 as well. So it's pretty pretty substantial. And then what we're going to say is in the let's say like a 35% 65% does that make sense? We're going to say that the opacity is one and the scale is one and that means the animation basically goes from zero to 35 and then from 65 to 100 and we have that middle range where things will just always be at this in between these two values, it will always be at that opacity and scale of one. Then I'm going to go on here where we have the scroll snap align so I'm selecting the individual items that are snapping. And I'm going to say that they have an animation of scroller. Put the name. I'm also going to say that it's linear because if you don't use linear, maybe we don't need linear for this one. I'm not 100% sure, but I'm going to throw it on there anyway. And I'm also going to put the both keyword which just make sure there we go. We're we're currently now at the end of the animation. So by putting both here, if the animation's not currently running, it means go to either the first or last keyframe depending on where you were. So they're at the beginning of the animation right now which does not look fantastic, but we can see that at least it's working. But now we don't want to put a duration on here cuz that wouldn't make any sense. So, we can come in with an animation timeline. And with the animation timeline, we have two options. Uh one of them is scroll, which is not what we want in this case. And I think scroll won't work if we just do it like this. Uh so, you can see it's actually broken. Uh if you do scroll, it's defaulting to up and down. So, our horizontal vertical scrolling. So, if I want it to be based on horizontal scrolling, I just do X. And there we go. It's now uh animating it, but it's based on the entire way across that I have for this, which I know the scroll bar is going a bit behind my head. But, uh as we sort of come across and then we come this way, it's it's based on the entire scrolling distance that we have. Instead of scroll though, I can use view, and then it's going to be based on the item's position in the view. So, now, oh, that's kind of better, right? I love it. It's so nice. Uh and as I make that a bit wider, we can start getting some of those ones that are further out. We could even Let's do opacity like 0.25, maybe. We want to really fade those out. Uh and now, uh yeah. Looks a little bit I don't know. I find that I I I actually thought that the I was exaggerating with these values, but it ended up working out pretty well. Uh where or I think pretty well, uh in my opinion. And you can play with the keyframes a little bit, but yeah, I thought that would be a fun way to sort of finish this one off. Uh less practical, necessarily, but a way to elevate our our design a little bit uh with just like a couple of extra lines of CSS. And yeah, if you are interested in CSS Demystified, do make sure to check out the link for that is right down in the description below. And with that, I want to say a very big thank you to my neighbor of awesome, Johnny, as well as all my other patrons and channel members for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.