The Stack Design Pattern in CSS Grid

[00:00 - 00:10] Okay, everybody, we're going to start talking about how to implement the stack design pattern using CSS grid. So to get started, let's go ahead and grab our stack.

[00:11 - 00:26] And the first thing we're going to do is to display grid. And it will look like nothing really happened because what happens when we can say display grid is it creates one column of content by by default.

[00:27 - 00:36] And every new item added into that column will continue to be added into new rows of that column. Now in a future, us, we're going to talk about how to define our columns.

[00:37 - 00:49] But unless we define a new column, each new item is going to be added into a new row automatically into that column. So the next thing we want to do is we want to be able to define the space in between.

[00:50 - 00:55] So let's go ahead and set a gap of one ramp. And you can see we've got some gaps put in here.

[00:56 - 01:07] But we want to have more control over that. So what we can do here instead is go for counter zero on pixel.

[01:08 - 01:21] Now what this is going to do is say, Hey, we want the gap in between the grid items to be whatever the value is of this custom property that's passed in. Or if there isn't one default to zero pixels.

[01:22 - 01:46] Now, because we have the ability to stack stacks within each other, we want to reset this gutter property back to its initial value by default. That way, if we are defining a stack inside of another stack, we don't have the value of the gutter property from the outer stack influencing the gutter property of the inner stack.

[01:47 - 01:55] So this is a way that we can reset that value to make sure that we're not inheriting values from the parent components. This looks like we're done.

[01:56 - 01:59] We have everything that we need, right? And there's one last thing we need to do.

[02:00 - 02:09] And that is we need to make sure that the rows will not grow and stretch as the stack grows. For example, let's take this footer.

[02:10 - 02:29] What if we were to come in here and set the minimum block size to be a hundred pixels, then you see here, that's what looks like. We've got bigger space in here, but no, what's happening is the rows are actually growing.

[02:30 - 02:41] So to prevent that, we just need to come in here and say, align content start. And now everything's working just as we wanted.

[02:42 - 02:50] See, the height is still taking up that height, but the rows themselves are not taking up more height than they need to. So there we go.

[02:51 - 02:56] We have our first implementation of a design pattern. So now we're going to practice what we just learned.

[02:57 - 03:05] We're going to take this HTML that I've already put in place with a little bit of CSS for decoration. I want you to lay it out.

[03:06 - 03:12] We're trying to create this subscribe to my newsletter. And what I want it to look like in the end is something like this.

[03:13 - 03:29] Now, to help you out, I've also added an import here from OpenPrompt.style. If you're not aware of what OpenPrompt is, it's a bunch of CSS variables that have been created that have been curated.

[03:30 - 03:46] And there's different things, but specifically, like the sizing is where I think it'd be very helpful when doing your spacings and things like that. Again, we have just an empty app.css file and a very basic app.jsx file.

[03:47 - 03:55] And I want you to go ahead and pause the video, implement this yourself, and then unpause and we'll see how I implemented it. Okay.

[03:56 - 04:05] So what I end up doing here is we put a stack on the outer main. And then we also put an inner stack around this content here.

[04:06 - 04:14] And then we have the form itself also is a stack. Now, inside the form, once again, each label is a stack.

[04:15 - 04:25] So this shows that all of these layout patterns can be composed within each other and build some complex layouts if we need to. So I'll see you on the next lesson.