The Inline-Cluster Design Pattern in CSS Grid

[00:00 - 00:03] Hey, everybody. So in this lesson, we're going to talk about the inline cluster.

[00:04 - 00:13] So first let's get things started and go data, inline cluster. We're actually going to start off this very much the same way.

[00:14 - 00:29] We want to do display grid and we want to do, let's go ahead and do the gap. And we're going to go ahead and do the exact same thing that we were doing before and set up that initial things.

[00:30 - 00:36] Now you see we've by default, it is putting everything in a column. That's what the stack is doing.

[00:37 - 00:51] But what we want is we want to have the grid auto flow to be in columns. And then we want to align everything center and you'll see what that does.

[00:52 - 01:10] So to explain how this works with grid, every time an item is added to a CSS grid, you will put things in the first available column and then the next available column and you will continue to do that till it runs out of columns. And then it will auto flow to the next row and do the same thing for each column.

[01:11 - 01:20] Given that since we have not defined any columns, we only have one column. By default, with the stack, it will auto flow to the next row.

[01:21 - 01:35] Now, when we say grid auto flow column, this actually reverses that. It will every time that grid item is added, it will try to add it to a new row.

[01:36 - 01:52] And if there's no new row defined, it will make a new column automatically. So you see here that we have this item is automatically flowing and it's automatically creating a new column every time a new item is added.

[01:53 - 02:00] Now we're doing a line item center because this is a good default. Typically, you want your individual things centered inside of this in line.

[02:01 - 02:05] So some things will take up the entire row. Some things will just be centered.

[02:06 - 02:27] But if we want to play with that, well, then we can come in here and take a advantage of our selector and we can say just defy space between. And this will change the contents to be space between automatically.

[02:28 - 02:39] And this, you can see this has changed already to forcing space between these two items. And as you can imagine, we would want things for like center.

[02:40 - 02:54] And then we would want things for start and end. We'll take a look at this header, for example, we have this data in line cluster.

[02:55 - 03:05] And we have a space between that we can come in here instead of doing space between, we can go center. And now everything is centered.

[03:06 - 03:25] We could come in here and go start and we get all the various different ways that we can configure that. The other thing that is very common to want to do is to adjust the alignment.

[03:26 - 03:33] Once again, we have aligned. In fact, we probably want all of these instead of justify.

[03:34 - 03:40] We want aligned. And this case, it's not content is items.

[03:41 - 03:50] So let's say we have this section right here. And let's make just to make it very apparent, we're going to make this logo really tall.

[03:51 - 04:02] So by default, you see here that everything's centered by default, but we can come in here and go align start. Now everything's aligned to the start.

[04:03 - 04:19] We can go align and we can also explicitly define centered if that's what we want. With a little bit of CSS magic, we can go ahead and define how we want these items and give a little bit of configuration.

[04:20 - 04:31] To the implementation of our in line cluster. No, the limitation with the in line cluster defined by the CSS grid is it will not do the clustering part.

[04:32 - 04:47] Because by default, the we would like as we run out of space vertically for items to cluster. So we would like these items to start wrapping to new rows as it runs out of room in the in line direction.

[04:48 - 04:57] But with the CSS grid, you can see here, as we get smaller, we run out of critical space. It's not actually wrapping like we would like to.

[04:58 - 05:07] So it's continued to attempt to take up as much space as possible. That is the one limitation of using the in line cluster using CSS grid.

[05:08 - 05:19] In the same way that we added a line content start to the stack component to prevent the rows from stretching. We need to add something similar to our in line component.

[05:20 - 05:27] We add justify content start. This will prevent the columns from stretching.

[05:28 - 05:37] So we're going to go ahead and practice what we've just learned. We have a menu component and we want it to look like this.

[05:38 - 05:51] Go ahead and pause the video and implement it and then on pause it and you'll see how I did it. Okay, so we have the nav here and we put that in an in line cluster and we use space between.

[05:52 - 06:01] So that way it would force space in between these two sides. And then inside this unordered list, we also have another in line cluster.

[06:02 - 06:09] And that we just gave it a gutter with a size three. That's the in line cluster implementation.

[06:10 - 06:12] Let's go ahead and go on to the next lesson that will learn the next pattern.