The Stack Design Pattern
The Stack design pattern is used when you need to stack elements on top of each other and set space between them.
This lesson preview is part of the Mastering CSS Layout course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Mastering CSS Layout, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 01:33] Hey, everybody. Welcome back. Today, we're going to talk about the stack design pattern. Now, the stack design pattern is for when you have a set of elements that you want to stack on top of each other. Pretty simple, right? So here's a couple examples I found in the wild. You can see here we have a set of elements that are stacked on top of each other. And then we have this element stacked on top of just this stack of elements. So you can see that these things can be composed within each other. And this is going to be true for all of the design patterns. Here's another example. We have these two items are stacked on each other. Then we have this stack stacked on top of this stacked on top of this. We have these elements stacked on top of each other. Then this whole thing, we have this group of things stacked on top of this group of things. Okay, this is the thing that we're going to be building in the rest of this modules. Now, we're not going to get into how we're going to build it right now. First, I just want you to look at this application, this landing page, and identify stacks. I'm going to scroll through here, give you a chance to look at them. I'm also going to provide a PDF of this in the lesson.
[01:34 - 02:55] What I want you to do is pause the video, scroll back, look through all that, and then decide what elements you think are stacks. And I'll be right back. Okay, welcome back. So here are a few of the stacks that I identified. We have these things are stacked on top of each other. We have these things are stacked on top of this content. We have the this thing stacked on top of this, and then these are stacked on top of each other. And then we have a bunch of grid items here that are stacked on top of each other. Each one of these footer elements are stacked on top of each other. So you see what really defines a stack and what defines when you need to do stack is when the space in between the elements need to change. So you can see here, these things is one stack, but we have a stack within a stack because the space here is not the same as the space here. So what this needs to be is own stack. Well, this becomes a different stack. And the same here, this is a stack, this is a stack, but then these elements are stacked uniquely on top of each other, because they have a different spacing requirement than here. That's the stack pattern.
[02:56 - 02:58] We'll go on to the next pattern in the next lesson.