# Handy CSS layout patterns, and fun ways to elevate them ## Метаданные - **Канал:** Kevin Powell - **YouTube:** https://www.youtube.com/watch?v=R1kiLX-Z-Io - **Дата:** 29.04.2026 - **Длительность:** 19:04 - **Просмотры:** 19,202 ## Описание 👉 Start writing CSS with confidence with my course CSS Demystified: https://thecascade.dev/courses/css-demystified/?utm_source=youtube&utm_medium=social&utm_campaign=regular-video 🔗 Links ✅ Code from this video: https://codepen.io/editor/kevinpowell/pen/019dab2d-dfd3-7988-86c5-69986ea33e4c ✅ More info on corner shape: https://frontendmasters.com/blog/understanding-css-corner-shape-and-the-power-of-the-superellipse/ ✅ The difference between auto-fit and auto-fill: https://youtu.be/OZ6qKoq7RJU ✅ More on scroll-driven animations: https://www.youtube.com/watch?v=UmzFk68Bwdk ✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter 💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK ⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co 🎓 Start writing CSS with confidence with CSS Demystified: [https://cssdemystified.com](https://cssdemystified.com/) 🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/ ⌚ Timestamps 00:00 - Introduction 00:20 - overscroll scroller 05:05 - auto-grid and preventing overflow with it 09:30 - adaptive layouts with container queries 13:09 - CSS Demystified 13:53 - bonus: scooped corners 15:08 - bonus: overscroll animation with scroll-driven animation #css --- Help support my channel 👨‍🎓 Get a course: https://www.kevinpowell.co/courses 👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell 💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join --- 🧑‍💻 My editor: VS Code - https://code.visualstudio.com/ 🌈 My theme: One Dark Pro Var Night 🔤 My font: Cascadia Code --- I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel: Bluesky: https://bsky.app/profile/kevinpowell.co Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell --- And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome! ## Содержание ### [0:00](https://www.youtube.com/watch?v=R1kiLX-Z-Io) Introduction 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. Uh, 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 ### [0:20](https://www.youtube.com/watch?v=R1kiLX-Z-Io&t=20s) overscroll scroller talking about this, and a few people were like, "Oh, I use so much JavaScript to do this. " So, we're going to see how we can do it uh the CSS only way with like a few lines of code. So, uh, 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 because if we do it with grid, the parent controls everything, which is always nice. Uh, 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 autoflow 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. Uh, and that makes all of my cards turn into columns instead of creating rows. Change 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. Uh, 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. Uh, and here I can just bring in a size. And we could do a lot of different things for this size. Uh, let's just say we could do something like 300 pixels. I think we'll be fine. I might make them a bit bigger maybe for this layout actually. It's okay. We'll see. Uh, but you can see right now that's creating my going that way. And I put gap one. Let's make that one rim. Uh, yeah. Now we're now overflowing quite literally, which isn't what I want. I want like an overflow scroller uh that's not causing the entire page to scroll. So then I can just come on here and say that my overflow uh on the x-axis is going to be a scroll. And in doing that now we can see here I'm scrolling left and right. Uh which not ideal maybe but this is a very common pattern that we see these days. And where the real part of this comes in because I guess this is enough. I'm just holding shift down, by the way, to scroll sideways. Uh, which is the awkward part if you are on a desktop computer. Um, 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' be my inline axis 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 let down. I won't lie, cuz you're going to try it and nothing is going 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 amperand and then get the children with the star selector here. Uh you don't actually need the amperand. You could also do it like this. I just have this habit of putting the amperand. Uh 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 scroll 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 we'll 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 scrolljacking 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 layo 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 ### [5:05](https://www.youtube.com/watch?v=R1kiLX-Z-Io&t=305s) auto-grid and preventing overflow with it similar cards uh that we have, but 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 we have the auto grid. And I'm going to do a display grid. Once again, we're 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 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 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 there 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 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 1 fr 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 minax. Again, I'll give you the trick on remembering this and an easier way to write it in a second. Um, but yeah, this works really well. And you can see it's exactly the same thing we had before, except now it's 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 uh yeah I think is a nice win but it's a little bit hard to remember. So really fast whenever you want to do this you use the repeat and you don't know how many you want. So we just say auto figure it out for me. Uh there's auto fit or autofill. I'm I default to auto fit. Pick one. If it's the wrong one, pick the other one. Uh and in this case right here, there is no difference anyway. So I'm going to do an auto fit, 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, 1 fr, so I don't forget it. And then I don't have to worry about where the fr goes between all these closing braces because that I mix that up if not. So, uh, we have the minmax again, min cuz I need a minimum value, 1f fr. 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. Uh which is you know it's 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. Uh 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 ### [9:30](https://www.youtube.com/watch?v=R1kiLX-Z-Io&t=570s) adaptive layouts with container queries one. Adaptive. What does adaptive mean? For this I'm also going to move the heading off. 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 uh 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 uh this area here, this active promotions. Uh 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, but also support for them is very good. Now you can safely use container queries unless you really need to uh support some legacy browsers. And what we're going to do is let's start with our promo list. Uh, 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. Uh, 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 because that makes sense. And when it's over here, I want it to stay stacked because 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 uh 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 3 1 fr. I have some other styles floating around, but we can let's just say display grid gap 1 ram cuz this would sort of be what 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 because 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 this sidebar content cuz we have first the sidebar, then the content. Uh 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 uh 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 the bonus tips, including how we can do ### [13:09](https://www.youtube.com/watch?v=R1kiLX-Z-Io&t=789s) CSS Demystified 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 Domestified, which I've built from the ground up and includes an entire module based on patterns that we're seeing here where 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 how we can overcome some of the gotchas. Uh, 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. ### [13:53](https://www.youtube.com/watch?v=R1kiLX-Z-Io&t=833s) bonus: scooped corners Two bonus tips. I I mentioned a few things along the way, though. Now, we're going to get into the fun stuff. Uh, so on my active promos here, let's go. Uh, that's my promo list, and then these are just li inside. So I could say that the li that are direct children which I had the amperand before. So we use the amperand 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. Uh so I probably whatever 16. Yeah it's probably a little bit big. Uh actually well I'll leave it big so you can actually see what it is. Let's also change the uh border color cuz I think it'll stand out more. Border color can be white. Uh just so it highlights a bit more. And then what I'm going to do is a corner shape of scoop, which uh will now scoop out those corners. Nice. Right. Uh so corner shape is new. This is a progressive enhancement. If it doesn't work, then people get the border radius. Uh 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. Uh and scoop. I'll put a link to more information on corner shape. You can do uh squirles, 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 little uh scoop there to make it look like a ticket or something uh that people are getting for their coupons. Uh and the ### [15:08](https://www.youtube.com/watch?v=R1kiLX-Z-Io&t=908s) bonus: overscroll animation with scroll-driven animation last one that I wanted to look at, which is one of my favorite new things is uh with scroll driven animations, which let's get this scroller turned back on all the way at the top here. 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. Uh 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. Uh where I'm trying to remember how I'm going to do this. So we need to create some key frames for this. I'm going to say an add key frames of let's call it a scroller and we're going to say at 0% and 100 comma 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. 5 and let's give it a scale of 0. 5 as well. So it's pretty substantial. And then what we're going to say is in the let's say like a 35% comma 65%. Does that make sense? Uh we're going to say that the opacity is 1 and the scale is one. And that means it the animation basically goes from 0 to 35 and then from 65 to 100. And we have that middle range where things will uh just always be at this in between these two values. it will always be at the opacity and scale of one. Then I'm going to go on here where we have this 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. Uh I'm also going to say that it's linear cuz 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 makes sure. There we go. We're currently now at the end of the animation. So by putting both here, if the animation's not currently running, it means, you know, go to either the first or last key frame depending on where you were. So they're at the beginning of the animation right now. Uh, which does not look fantastic. But we can see 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, or horizont 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 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 at 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 I actually thought that 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 key frames 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 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 enabler 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. --- *Источник: https://ekstraktznaniy.ru/video/49251*