The Split Design Pattern
The split pattern is for putting two elements next to each other, each taking up a fraction of the inline space.
This lesson preview is part of the Mastering CSS Layout course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Mastering CSS Layout, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:04] Welcome back to everybody. And today we're going to talk about the split design pattern.
[00:05 - 00:15] Now, a split design pattern is when you have two elements that need to be displayed side by side. We have here, an example I found in the wild, we have this item next to this item.
[00:16 - 00:25] We have, in this case, this avatar next to the main content right here. And we also have this main section with a sidebar.
[00:26 - 00:40] So sometimes people will call it a sidebar, sometimes people call it different things, but the idea is that it's a split component, it's a split pattern where one thing is next to another. And once again, we have another example of a main content and a sidebar.
[00:41 - 00:44] Let's go back to our application. I'm going to scroll through here.
[00:45 - 00:54] And I want you to identify examples of the split pattern in use here. Okay, so we have two examples on this page that we're looking at.
[00:55 - 01:00] We have this panel next to this panel. So that's an example of a split design pattern.
[01:01 - 01:09] And then same thing here, we have this group of content, next to this group of content. So that's some examples of the split design pattern.
[01:10 - 01:16] Keep an eye out for it when you're searching the web and I'll see you on the next lesson where we talk about the next design pattern.