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.

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

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.

This video is available to students only
Unlock This Course

Get unlimited access to Mastering CSS Layout, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Mastering CSS Layout

  • [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.