CSS layout has grown and evolved into a robust set of tools to accomplish some fantastic modern layouts.
The problem is that we are still teaching CSS as something that is" hacked" together by using" tricks" to get our desired web layouts.
Learning CSS like this typically leads us down one of two paths: We either build fragile page layouts using 
the "see what sticks" method of CSS, or we give up and declare that CSS is too tricky and bring in an X column grid system like Twitter Bootstrap.

Creating page layouts in CSS doesn't have to be complicated. Like how you make much of your everyday speech using just a small 
subset of vocabulary composed together, you can achieve sophisticated layouts by composing simple low-level layout primitives in unique ways.

In this course, you will learn foundational layout primitives that you can use to build many of your more complex layouts. You will also learn 
how to apply the principle of "Encapsulated CSS" to both extend these primitives as well as to create custom layout primitives. To do this, we 
will recreate many of the layouts found in the wild using the principles mentioned above.

This course does not require extensive knowledge of CSS. It does assume that you have a basic understanding of the CSS box model, CSS specificity, 
CSS selectors, and CSS sizing units. Though you can apply the principles in this course to any modern web framework, including no framework 
development, this course will be using React and assume you have a basic understanding of React, JSX, and React hooks.

Composing Layout in React is for both novice and experienced developers who want to take their layout skills to the next level. This course will 
teach you the practical skills you need to build modern layouts for the web without depending on heavy CSS frameworks. Unlike courses and blog 
posts that teach each layout property in isolation, our product teaches practical layout patterns that you can use every day when solving your 
layout challenges.

In this course we show you how to build complex layouts in React by composing just a few foundational layout primitives.
Along the way you will learn modern CSS Layout tools like Normal Flow, Flexbox, and Grid.

Composing Layouts in React

---
title: How to Build a Split Pane Layout in React
slug: split-component
description: The layout challenge that is as old as the web itself is putting two items next to each other. In this lesson, you will learn how to build the Split primitive to solve this problem.
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/h17q6bb3ed
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/travis-waith-mair-composing-layout-in-react-app/-/tree/main/module_03/lesson_02
---

For the longest time, floats were the go-to tool for putting two things next to each other. Unfortunately, since this is not what floats were designed for, this created as many problems as it solved. Luckily, modern CSS makes this much easier to solve.

## The problem: Form SideBar

In this lesson, we are going to build this widget:

![Form Sidebar](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_03/lesson_03.02/public/assets/split-final-red-line.png)

Similar to the Stack primitive, we want a gutter in between the two parts. Unlike the Stack component, we need to be able to split the two children into fractional parts.

## The solution

Let's start with the basic markup. [(You can follow along with the code by forking this codesandbox starter project)](https://codesandbox.io/s/split-example-starter-yy03b?file=/src/split.jsx):

```jsx { actualFilename=./protected/split-0.js endLine=15 startLine=5 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_03/lesson_03.02/protected/split-0.js#L5 }
export default function FormSideBar() {
  return (
    <div>
      <div>
        <h2>Personal Information</h2>
        <span>The information you provide will be displayed publicly.</span>
      </div>
      <Form />
    </div>
  );
}
```

And this is how it looks:

![Form Sidebar step 0](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_03/lesson_03.02/public/assets/split-0.png)

Knowing that the `h2` and `span` will both need to be a sibling of the `Form` component, I have pre-emptively wrapped both of those in a `div`. Now the outer `div` is the sibling of the `Form`.

(Don't worry about the `Form` component, we will be tackling that in the next lesson. All you need to know about the `Form` component is that is structured much the same way as the `h2` and `span`. It's a bunch of `inputs` wrapped in a `div`.)

To build our Split primitive, we can take all the code from our Stack component, plus a little extra:

```jsx { actualFilename=./protected/split-1.js endLine=11 startLine=7 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_03/lesson_03.02/protected/split-1.js#L7 }
const Split = styled.div`
  display: grid;
  gap: ${(props) => spacingMap[props.gutter] ?? spacingMap.lg};
  grid-template-columns: 1fr 1fr;
`;
```

In the above code, you can see that the first two lines are the same as the Stack. The addition is a single property: `grid-template-columns`. The `grid-template-columns` property allows us to define how many column tracks we have and how wide they should be. We define the width of each column track using any valid CSS size unit, and the quantity of tracks is determined by how many sizes we assign to the property. For example, if we wanted three column tracks of `30px`, `50%`, and `2rem`, It would look like this:

The layout challenge that is as old as the web itself is putting two items next to each other. In this lesson, you will learn how to build the Split primitive to solve this problem.