The Grid Design Pattern in CSS Grid

[00:00 - 00:08] Hey everybody, so we're gonna talk about our final design pattern that we're gonna be able to do with CSS grid. And that's the grid design pattern.

[00:09 - 00:22] Before we talk about that, I want to acknowledge that the column drum design pattern is not possible using CSS grid. So we're gonna go ahead and skip over that because the way CSS grid works is not something that it's designed to do.

[00:23 - 00:35] And we're therefore going to go straight to the grid pattern. So let's go ahead and put in our base items, which is we're gonna set our g utter and we're gonna set display grid.

[00:36 - 00:51] Now, when we did our split design pattern, remember we did grid template columns. And we did things like one F R, you know, we can set three columns using that and that looks great.

[00:52 - 01:08] But what we want is to be able to how this these columns auto change depending on the minimum width of each item that we set. So first of all, one thing that CSS grid gives us is we can do a repeat.

[01:09 - 01:19] So if we do repeat three times one F R, you'll see that we get that same number of columns. We can come in, we can repeat it four times.

[01:20 - 01:37] And you can see we get four columns now. What we want to do instead of just saying one fraction, we're going to come in here and say, we want the min max to be what let's just give a value of 150 pixels or one F R.

[01:38 - 01:45] And we want that to repeat four times in this case. It's not going to really change, but we can come in here now and say auto fit.

[01:46 - 01:59] And now you see if it can keep at least a hundred fixed 50 pixels wide, it will fit in as many of those columns as it can. But once it runs out of room, then it will move those over.

[02:00 - 02:13] Now, if we were to set this to something higher, for example, five 50. Now we only have two columns because it can only fit two columns that are at least 550 pixels wide.

[02:14 - 02:29] So this is getting us most of the way there. But one thing about this 550 pixels is if our screen size is smaller than 500 pixels, we don't want to be bigger than 550 pixels.

[02:30 - 02:42] So we're going to throw in another function inside of here. And we're going to say, whichever is smaller, 100% of the container or 550 pixels.

[02:43 - 03:01] So if the viewport or the container specifically that this box is in is larger than 550 pixels, then we're going to go with the smaller number 550. But if 550 pixels is larger than the box that we've contained, we're going to go with just whatever the size of the boxes.

[03:02 - 03:22] This is a little extra assurance that we add just to make sure that we're not going to overflow outside of the box that we are setting ourselves in. And then finally, instead of hard coding this 550 pixels, let's give it a value of men item width or zero pixels.

[03:23 - 03:46] And once again, we want to initialize that to nothing, just as a good practice to make sure that we are always working with the value that we expect. Now we can control the minimum item width of each item using a CSS property and then it will automatically create the columns for us that are optimal for the size it said.

[03:47 - 03:55] For this final learning practice, we're going to make some contact cards and lay them out in a grid. And we want it to look like this.

[03:56 - 04:03] We have two sections that you need to be working in. We have an app where we have a section with a bunch of contact cards.

[04:04 - 04:08] And this is where you're going to implement your grid. But we also have the contact card.

[04:09 - 04:14] And so you're going to need to lay out this contact card and make it work. It's going to take a little bit.

[04:15 - 04:23] So go ahead and pause the video, implement it and then unpause it and I'll show you how I got what I did. OK, so first of all, let's do the easy thing first.

[04:24 - 04:32] The grid was done using data grid. We gave each one a minimum item with the 24 rooms and a gutter of size seven.

[04:33 - 04:42] And that's how we got that layout. Now, for the individual cards, what we did here is first of all, this top section.

[04:43 - 04:50] So this section right here is done using an inline cluster with space between. So basically this and this have a space between of them.

[04:51 - 04:56] This section right here is done with a stack. This is stacked on top of that.

[04:57 - 05:04] And then this row is an inline cluster. So this chain dough and the the pill are done using an inline cluster.

[05:05 - 05:17] And then for the bottom section, we're using a split with a very small gutter in between of size one. That's all the design patterns using CSS grid.

[05:18 - 05:26] In the next module, we're going to re implement all the design patterns again, using CSS flex box. I can't wait to see you on the next lesson.