The Inline-Cluster Design Pattern

The inline-cluster pattern is used to place elements inline, set space between them, and cluster the elements when they run out of inline space.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents
  • |

Lesson Transcript

  • [00:00 - 00:05] Hey everybody, welcome to the next lesson. This lesson we're gonna talk about the inline cluster design pattern.

  • [00:06 - 00:26] Now, the problem that we're trying to solve with the inline cluster design patterns when we have a set of elements that need to be displayed inline, but wrap to a new line when they exceed the available space. An example of this is, well, we have these elements, but we can no longer fit like this vocabulary inline, it will wrap around to a new line.

  • [00:27 - 00:35] So if we go look at this page at a full desktop size, this would be over here. When we have less space, it will wrap underneath.

  • [00:36 - 00:45] And then you see inside of this, this community wraps to the next row. It's all about trying to put things inline, but wrapping when we have no more available space.

  • [00:46 - 00:55] Let's go ahead and go back to the application. And I want you to identify things that are inline.

  • [00:56 - 01:00] And then take advantage of this inline cluster. So we have a few things here.

  • [01:01 - 01:10] We have this toolbar is obviously inline, but also the individual aspects of them are inline clusters. And then we have the footer here.

  • [01:11 - 01:18] Each column here is actually inline. So not really technically a column, but they're actually just inline.

  • [01:19 - 01:24] And then we have this bottom footer, which is inline. So that's the inline cluster design pattern.

  • [01:25 - 01:27] I'll see you on the next design pattern.