Introduction to Composing Layouts in React

Welcome to Composing Layouts in React

Introduction

Using CSS in this age of components is difficult, especially where web layout is concerned.  In this module, you will learn the rules to be able to build composable layouts.

CSS in the Age of Components

Complex layouts can be broken down into smaller layout primitives that can be combined to build more complex structures.  Thinking compositionally will open up a more practical and reusable way of creating layouts on the web.

What is Layout Composition? A React Layout Primitives Guide

Knowing where to place your styles is critical to understanding composable layouts.  Using the Principles of Encapsulated CSS you will know exactly how to apply your layout styles in your components.

Encapsulated CSS - How to Apply CSS in a Composable Way

In the lesson, you will learn about Normal Flow and what patterns you can use to apply the principle of Encapsulated CSS in the context of Normal Flow.

Normal Document Flow in HTML, CSS, and React

You will learn the basics of CSS Flexbox and CSS Grid, especially which properties conform to the Encapsulated CSS principles and which ones do not.

CSS Grid vs Flexbox for Composable Layouts

In this lesson you will learn how to reset the default browser styles so that they follow Encapsulated CSS.

How to Add a CSS Reset to Remove Default Browser Style

Composable Layouts

What are Layout Spacers?

The Stack layout pattern is one of the most simple and common layout patterns on the web.  In this lesson, you will learn how to build the Stack primitive and how to make it configurable for your situation

How to Build a Stacked Component Layout in React

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.

How to Build a Split Pane Layout in React

Having a column-based grid system to lay our elements out on is very useful, which is why Bootstrap and other CSS frameworks are built on that model.  In this lesson, you will learn how to build the Columns primitive and its helper the Column to build your custom column layout.

How to Build React Grid Layouts With Custom Column Numbers

Building an inherently responsive grid of items has been reduced down into a single line of CSS.  In this lesson, you will learn how to build the Grid primitive that easily lets us achieve this layout.

How to Build a React Responsive Grid Layout

Text in a paragraph is one of the best examples of "responsive by default."  Text will wrap and cluster according to the text alignment.  In this lesson, we will learn how to achieve that same effect using the InlineCluster primitive.

How to Build Responsive React Text Elements With InlineCluster

Clustering is one way to do responsive inline layouts, but sometimes we want to switch the direction that the items are flowing when we cross a certain threshold.  In this lesson, we will learn how to build the Inline primitive that does just that.

How to Add Inline Styling to React Components

Layout Primitives - The Spacers

Introduction to layout wrapper primitives

Introduction to Layout Wrapper Primitives

In this lesson, you will learn how to build the PadBox primitive and use it in a Pricing Plan component.

How to Build a Pricing Page Widget in React With PadBox

In this lesson, we will be creating a Center layout primitive that centers itself and its children.

Automatically Center Text DIVs with React Center Component

In this lesson, we will build the Frame primitive, which frames out a visual media, like an image or video,  and forces it into the aspect ratio needed for the design without distorting the image.

Resize Images And Maintain Aspect Ratio in React and CSS

In this lesson, we will learn how to build the Cover primitive, which will vertically center its children and allow you to inject a top or a bottom section around it.

How to Vertically Center a DIV in React With CSS

Let's revisit the Hero section from Module 1 and build it for real using the primitives we have learned.

How to Build Accessible Navigation Divs in React

Layout Primitives - The Wrappers

Introduction to The Settings Pages

This lesson is going to focus on getting the menu and header completed on our mock Settings Page

How to Build a React Navbar With a Menu and Header

This lesson will focus on getting the main section with the sidebar navigation for our Settings page.

How to Build a React Sidebar Menu

In this lesson, we will be focusing on the profile pane.

How to Build a Profile Settings Page in React

In this lesson, we will be finishing the Settings page by completing the privacy pane.

How to Build a Privacy Page with Toggle Buttons in React

Composing Layouts in Practice

Bonus Lessons Introduction

In this lesson, you will learn how to build the ColumnDrop primitive and use it to layout BlogPost cards.

The ColumnDrop Component

The Reel Component

Bonus Lessons

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

What it means to compose layouts and why you should do it

How to apply the principles of Encapsualted CSS in our React components

The foundational layout primitives that every developer should know

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.

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

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.

(You can follow along with the code by forking this codesandbox starter project)

export default function FormSideBar() {
  return (
    <div>
      <div>
        <h2>Personal Information</h2>
        <span>The information you provide will be displayed publicly.</span>
      </div>
      <Form />
    </div>
  );
}

 component, I have pre-emptively wrapped both of those in a 

 component, we will be tackling that in the next lesson. All you need to know about the 

 component is that is structured much the same way as the 

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

const Split = styled.div`
  display: grid;
  gap: ${(props) => spacingMap[props.gutter] ?? spacingMap.lg};
  grid-template-columns: 1fr 1fr;
`;

---
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:

Travis Waith-Mair

Hey everybody, Travis here with another lesson in composing layouts and React.

In this lesson we will learn about the split.

For the longest time floats were the go-to tool for putting two things next to

Unfortunately since this was not what floats were designed for, this created as

Luckily modern CSS makes it so much easier to solve.

In this lesson we are going to build this widget.

Now 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

In this case a one third by two third split.

Okay just like in the last lesson, you can follow along by clicking on the

in the link below under the solution heading.

But yeah let's start with some basic markup.

So we always want to import React from React.

And in this example we are using a form component.

Don't worry about this form component, we will go more into that in the next

And through the power of copy and paste, let's go ahead and bring that in.

We are going to start with a starter here, you can call it split.jsx.

But if you don't want to you can just change that and just make sure you just

And just like everything we're going to take advantage of the copy and paste

Now once again we need import react from React.

We also are going to import a component from this form.js file over here.

The only reason I have this is just so we don't focus on the form part.

We're really just worrying about splitting this section and this section from

We'll go more into this form component in the next lesson.

But for now just know that it's wrapped in a div and that there's a bunch of

And that's all you need to worry about for now.

So we're going to import that form and let's refresh the page.

Oh yeah and it also helps to acknowledge that the form is a default not named

This is how it looks personal information.

The information you will provide will be displayed publicly and then our form.

Now knowing that the H2 and the span will both need to be a sibling of the form

I just kind of had it preemptively wrapped them in a div and then the outer div

we're going to use to eventually control that split.

Now let's go ahead and start building our split primitive.

So once again we bring in styled and with a little hump the magic of copying

Now the other thing we're going to bring in is that spacing map from the split

I've kind of had to put that in a separate file just to make things easier and

Let's get this is a name to export this time so let's go ahead and do that.

This you've already seen so I'm not going to go into it.

This is exactly what we did with the stack primitive and same thing with

But this time we are doing something a little differently.

We are actually defining some columns here.

Now the grid template columns property allows you to define how many contracts

We define the width of each contract using any valence CSS unit.

It could be anything like 30 pixels, 50 percent and two rams.

And the number of columns are defined by how many we put in here with a space

So let's say we wanted to have three columns of 30 pixels, 50 percent and two r

Well then we would do 30 pixels, 50 percent and two rams.

And this would create three column tracks of exactly those sizes.

So you'll notice what I had in here was one FR and one FR.

FR is a special unit only available to the grid if you're using display.grid.

Display grid is a unique size unit that is sometimes called the fraction.

And it basically says give me one fraction of the remaining space available.

So in this case we're saying hey this first column I wanted to have one

And because they're the same amount it's basically going to split the columns.

It's going to take that remaining space and divide it among the two columns.