The Split Design Pattern in CSS Grid

[00:00 - 00:06] Hey, everybody, let's now talk about the split design pattern. So we're going to start off with the same thing pretty much that we've done.

[00:07 - 00:17] So far as we're going to have a gutter, we're going to have display grid and a gap. But now we're going to define grid template columns.

[00:18 - 00:27] This is the first time we're actually defining some columns. And what we're seeing here is we're like, we're saying we want two columns of equal amount.

[00:28 - 00:33] This is a fraction. And this is a unit only available to display grid.

[00:34 - 00:58] So unlike pixels or percentage, this will say, how the available space left after you've calculated the gaps in between items, I want one fraction to go to the first item and another fraction to the second item. If we wanted to do a one quarter split, so one fourth one to the first and the remaining parts went together, we could do that.

[00:59 - 01:02] So one part. So we have a ratio of one to three.

[01:03 - 01:15] That's so we have of the four of this whole available space is divided into four, three parts go to this section and one part goes to the first section. We could do two thirds.

[01:16 - 01:28] So two thirds goes to this first section and one third goes to the last 50 50 split is a good default. But that's where we come in with some other options.

[01:29 - 01:37] We can come in and go data. And we can go for a fraction one third two thirds.

[01:38 - 01:52] We can come into here and go for us three quarters. So then just to be consistent, let's go ahead and defined a 50% split.

[01:53 - 01:55] Okay. So this would then give us the freedom to come in here anywhere.

[01:56 - 02:11] This is used, for example, we have the hero or using split fraction one half, but we can come in here and come in and say two thirds. And that would automatically update to the way we want that.

[02:12 - 02:23] But let's go back to fraction one half and now we're getting the layout that we 're looking for. Okay, in this activity, we're going to get a little bit more complicated.

[02:24 - 02:31] We have a product card and we want it to look like this. Now, just so you wear this image is a random image from unsplash.

[02:32 - 02:47] So it's going to change every time you reload, but we're going to actually be using more than just one design pattern to make this one work. So go ahead and pause the video and then implement it and then come back and see how I implement it.

[02:48 - 02:55] Okay. So we have the product card here and we have it using a split with a fraction one quarter.

[02:56 - 03:03] So you can see that here. Now, the article, the content over here on the right is also a stack.

[03:04 - 03:09] And you can see that's been stacking here. And then this row of buttons, we have that as an in line cluster.

[03:10 - 03:17] So here we have three different design patterns being used to make one product card. I'll see you on the next lesson.