The Cover Design Pattern in CSS Grid

[00:00 - 00:07] Okay, everybody. So now we're going to talk about the cover design pattern. So let's start off with our defaults with a gutter display in a gap.

[00:08 - 00:23] And right now that's basically being a stack, but we want to be able to set the minimum block size. And for now, let's just say 100 Uines, but we'll come back and we'll make this a little bit more configurable in a moment.

[00:24 - 00:41] And what we want is we want this content centered here inside of that. Now, if we look at how this is implemented, we have the data cover and then we have inside of it, the data covered center. So what we want is we want the data cover.

[00:42 - 01:03] Anytime we have a drunk child that is also the data cover centered, we want to have this center itself. And it's just that simple. Now, right now we have this default to the 100 view highs, but we actually would rather have this be 100% by default.

[01:04 - 01:26] And then we can have a custom property that allows to configure that to be whatever height we want. And once again, just the same way that we want this gutter to be initialized, just the same that we want the gutter property initialized. We also want this min height initialized to its initial value, which is nothing .

[01:27 - 01:34] So that way we come back into the hero. Right now we have this min height set to 40 view heights.

[01:35 - 01:53] If we wanted to go ahead and get rid of that. Now we'll go back to 100%, which is the default, or we can set 40 view heights, or we can go 80 view heights and we can, we're achieving exactly what we want. We want that vertically centered content.

[01:54 - 02:28] But the down sides to the grid is that we don't necessarily get exactly centered content. Once we add other things, if we were to have this upper content and we come in here, we set 80 view heights, this isn't exactly centered within that. If we were to inspect this, we can see this is centered within here, but this content is taking up more space. It's not a perfect centering with CSS grid once we start adding content above and below.

[02:29 - 02:37] But for the most part, it works. Okay. So let's go ahead and practice what we learned.

[02:38 - 02:45] We're going to take this content that we have. And we're trying to create a hero that looks, we're going to create a hero that looks like this.

[02:46 - 02:55] We're probably going to need to use a couple of different design patterns. So I want you to pause the video and pull them into yourself and then unpause it and see what I did to create this.

[02:56 - 03:14] So we have our header and we're using the data cover on the outside and we're setting a minimum height of 80 view heights. And then the content wrapper around this call to action section, we have, we're using both the data cover centered to indicate that it needs to be vertically centered, but we also have the stack.

[03:15 - 03:23] So that way the inside contents will also be stacked. And then the buttons here, we're using an in line cluster design pattern.

[03:24 - 03:25] I'll see you on the next lesson.