The Column Drop Design Pattern in Flexbox

[00:00 - 00:04] Okay, welcome back. And we're going to talk about the final design pattern that we can use.

[00:05 - 00:11] CSS flex box form, which is the column drop design pattern. Now let's go ahead and put in kind of some boilerplate.

[00:12 - 00:16] We got display flex. We have a gutter property and the gap property being set.

[00:17 - 00:29] Now with the column, we want each item to wrap to a new row when that there isn't enough available space in line. So let's set the flex wrap property to wrap.

[00:30 - 00:48] So the next thing we need to do is we need to set how each of the children are going to act inside of our column drop container. So let's go ahead and select each one of the children and just to make it easier to see what's going on, we're going to add a dodger blue background.

[00:49 - 00:55] We need each of the children to grow and take up as much room as possible. So we do that with the flex grow property.

[00:56 - 01:01] We're going to set that to one. And you can see here, they're all growing to take up as much room as possible.

[01:02 - 01:10] And this one will grow and take up the entire width because it's available. The other thing we need to do is we need to set the flex basis.

[01:11 - 01:19] Now once again, the flex basis says, this is the optimal width that I want you to try to take out. Well, let's do an exaggerated amount of 500 pixels.

[01:20 - 01:28] You can see because 500 pixels doesn't allow to have more than a one item per row. They're taking up the entire column.

[01:29 - 01:43] But if we were to go 200 pixels, you can see we can fit two items per row and still meet that optimal flex basis of at least 200 pixels. And then that final one still grows and takes up the entire row.

[01:44 - 01:49] Now, of course, we don't want to hard code these values. We want this a little bit more configurable.

[01:50 - 02:03] So let's set the min item width to zero pixels by default. And for good hygiene, let's set the min item width to initial.

[02:04 - 02:16] This will allow us to make sure that we don't have values that are being inherited that we don't intend to. So this is the calm drop pattern already implemented.

[02:17 - 02:27] And there's nothing more we need to do to make it work. But there is a variation of the column drop pattern called where we don't stretch the layout.

[02:28 - 02:35] Let's create that variation. We'll say no stretched columns.

[02:36 - 02:57] And then we'll tell it to go back to the default grow property of zero. Now, you can see they're no longer growing, but we will still want that centered look. And so what we do up here is we just say, just defy content center.

[02:58 - 03:08] And now each of the items will center inside of its row. And but it won't stretch and take up the entire row like it did before when we have the no stretch columns.

[03:09 - 03:29] And just to see this in action, if we go to testimonials and we see here no stretch columns, if I remove that and make that not valid anymore, you can see we have the stretch column look. But if we put it back, now we got that, that centering column drop pattern.

[03:30 - 03:38] So let's remove that dot your blue because we no longer need it. And that is the way we implement the column drop design pattern.

[03:39 - 03:49] Okay, so let's go on to this final learning activity and made this really easy for you. We have these card components. They already do exactly what they need to.

[03:50 - 03:59] So you don't need to mess with anything to do with these cards. All we need to have you do is have them lay out like this, where they're in a row.

[04:00 - 04:15] But as the screen size gets smaller, they'll drop into their own columns and that split layout is already working. I just want you to get that column drop layout implemented.

[04:16 - 04:24] So go ahead and pause the video, implement it, and then we'll see how I did it. So once again, easy enough, you didn't have to mess with anything with these cards.

[04:25 - 04:36] They already work exactly the way they should. The only thing we need to do was add the column drop pattern and define what the minimum item width and what the getter was and then everything else worked just fine.

[04:37 - 04:59] So that's the final lesson for the design patterns using CSS Flexbox. In the next module, I'm going to go into which implementations I tend to prefer in which situations and other layout techniques that complement the design pattern way of doing web layout.

[05:00 - 05:02] So I can't wait and I'll see you in the next module.