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

Bootstrap and other CSS frameworks were revolutionary. 

 to create layouts by doing a little math. Although we are (fortunately) no longer dependent on these X column grid systems as our universal layout, it is still a helpful way to lay out items. However, with the Columns primitive, we are no longer bound by 12- or 24-column systems. Instead, we can set five columns, or 13 columns, or any other number we need.

In this lesson, we are going to build out the form part of the previous widget:

Similar to the Split and Stack components, we need consistent gutters. This time we will need to apply them between both the column tracks and the row tracks. In addition to this, we need to lay the input fields across multiple column tracks.

Let's start with our basic markup, and as always 

you can follow along by forking this codesandbox.io starter

export default function Form() {
  return (
    <div>
      <FormGroup htmlFor="firstName" label="First Name">
        <input type="text" id="firstName" />
      </FormGroup>

      <FormGroup htmlFor="lastName" label="Last Name">
        <input type="text" id="lastName" />
      </FormGroup>

      <FormGroup htmlFor="email" label="Email">
        <input type="text" id="email" />
      </FormGroup>

      <FormGroup htmlFor="address" label="Street Address">
        <input type="text" id="address" />
      </FormGroup>

      <FormGroup htmlFor="city" label="City">
        <input type="text" id="city" />
      </FormGroup>

      <FormGroup htmlFor="state" label="State">
        <input type="text" id="state" />
      </FormGroup>

      <FormGroup htmlFor="zipCode" label="Zip Code">
        <input type="text" id="zipCode" />
      </FormGroup>
    </div>
  );
}

And we have already seen that it looks like this:

In the previous lesson, we learned that we could create column tracks simply through the number of values provided. Our Split component only used two column tracks, and therefore it was pretty easy to read. But what if we wanted to have six columns, or 18 columns of equal width? We could repeat 

 18 times, but luckily for us, a helper function was created to make this easier.

 function. This function allows you to repeat a sequence a specified number of times. For example, to create 18 column tracks, we write:

And this will create 18 column tracks. It is important to recognize that it will repeat any sequence of values. You could create six column tracks that alternate between 

grid-template-columns: repeat(3, 100px 200px);

To create our six column tracks, we can write our 

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

The next challenge we need to solve is getting our input fields to span multiple column tracks. To achieve this, we are going to make another helper primitive: the 

. In CSS Grid, there is a property that defines how a grid-item interacts with the columns. This grid property is called 

---
title: How to Build React Grid Layouts With Custom Column Numbers
slug: columns-and-column
description: 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.
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/ggw9t9ntrl
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/travis-waith-mair-composing-layout-in-react-app/-/tree/main/module_03/lesson_03
---

Bootstrap and other CSS frameworks were revolutionary. [They perfected the X column grid system](https://getbootstrap.com/docs/4.0/layout/grid/) to create layouts by doing a little math. Although we are (fortunately) no longer dependent on these X column grid systems as our universal layout, it is still a helpful way to lay out items. However, with the Columns primitive, we are no longer bound by 12- or 24-column systems. Instead, we can set five columns, or 13 columns, or any other number we need.

## The problem: the Complex Form

In this lesson, we are going to build out the form part of the previous widget:

![Complex Form](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_03/lesson_03.03/public/assets/columns-red-line.png)

Similar to the Split and Stack components, we need consistent gutters. This time we will need to apply them between both the column tracks and the row tracks. In addition to this, we need to lay the input fields across multiple column tracks.

## The solution

Let's start with our basic markup, and as always [you can follow along by forking this codesandbox.io starter](https://codesandbox.io/s/columns-and-column-example-starter-1ibo9?file=/src/Form.jsx):

```jsx { actualFilename=./protected/columns-0.js endLine=36 startLine=4 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_03/lesson_03.03/protected/columns-0.js#L4 }
export default function Form() {
  return (
    <div>
      <FormGroup htmlFor="firstName" label="First Name">
        <input type="text" id="firstName" />
      </FormGroup>

      <FormGroup htmlFor="lastName" label="Last Name">
        <input type="text" id="lastName" />
      </FormGroup>

      <FormGroup htmlFor="email" label="Email">
        <input type="text" id="email" />
      </FormGroup>

      <FormGroup htmlFor="address" label="Street Address">
        <input type="text" id="address" />
      </FormGroup>

      <FormGroup htmlFor="city" label="City">
        <input type="text" id="city" />
      </FormGroup>

      <FormGroup htmlFor="state" label="State">
        <input type="text" id="state" />
      </FormGroup>

      <FormGroup htmlFor="zipCode" label="Zip Code">
        <input type="text" id="zipCode" />
      </FormGroup>
    </div>
  );
}
```

And we have already seen that it looks like this:

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

In the previous lesson, we learned that we could create column tracks simply through the number of values provided. Our Split component only used two column tracks, and therefore it was pretty easy to read. But what if we wanted to have six columns, or 18 columns of equal width? We could repeat `1fr` 18 times, but luckily for us, a helper function was created to make this easier.

The CSS Grid specification includes a `repeat` function. This function allows you to repeat a sequence a specified number of times. For example, to create 18 column tracks, we write:

```css
grid-template-columns: repeat(18, 1fr);
```

And this will create 18 column tracks. It is important to recognize that it will repeat any sequence of values. You could create six column tracks that alternate between `100px` and `200px` like this:

```css
grid-template-columns: repeat(3, 100px 200px);
```

To create our six column tracks, we can write our **Columns** primitive like this:

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

Which creates this layout effect:

![Complex Form step 0.5](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_03/lesson_03.03/public/assets/columns-0.5.png)

The next challenge we need to solve is getting our input fields to span multiple column tracks. To achieve this, we are going to make another helper primitive: the **Column**. In CSS Grid, there is a property that defines how a grid-item interacts with the columns. This grid property is called `grid-column`.

You can get a full definition of [what grid-column can do over at MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column), but for our purposes we can assign it the number of columns that we want it to span like this:

```jsx { actualFilename=./protected/columns-1.js endLine=16 startLine=14 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_03/lesson_03.03/protected/columns-1.js#L14 }
const Column = styled.div`
  grid-column: span 3;
`;
```

This Column primitive can now be used to wrap any of the children of our Columns component to allow it to span more than one column, like this:

```jsx { actualFilename=./protected/columns-1.js endLine=60 startLine=18 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_03/lesson_03.03/protected/columns-1.js#L18 }
export default function Form() {
  return (
    <Columns>
      <Column>
        <FormGroup htmlFor="firstName" label="First Name">
          <input type="text" id="firstName" />
        </FormGroup>
      </Column>

Travis Waith-Mair

What's up guys Travis here with another lesson in composing layouts in React.

In this lesson we are going to learn about the columns and column primitives.

Bootstrap and other CSS frameworks were revolutionary.

They perfected the X-Colon grid systems to create layouts just by doing a

Although we are fortunately no longer dependent on these X-Colon grid systems

layout, it is still a helpful way to layout items.

However with the column primitive, we are no longer bound by 12 or 24 column

Instead we can set 5 columns or 13 columns or any other number we need.

In this lesson we are going to build out the form part of the previous widget.

Now similar to the split and stack components we need consistent gutters, this

to apply them between both the column tracks and the row tracks.

In addition to this we need to layout the input fields across multiple column

Ok so let's start with some basic markup.

And as always, you follow along with the code sandbox starter that I have

So we are going to want to import React from React.

And in this case we have this component called formgroup.

And that is in a file over here called formgroup.

You don't really kind of be on what we are trying to focus on in this course

more to know it is just basically a div with a label and it allows you to put

So with the power of copy and paste let's go ahead and pull that in here.

And this is exactly where we left off in the last lesson.

Ok guys, so let's start off with some basic markup.

Once again we are using the starter with the link in the notes below if you

And this is pretty much where we left off.

We had this form component that was being used by the app.

Now we are going to actually go ahead and build this component out.

And we are going to import React from React.

We are going to import a component called formgroup.

That is this version where we have actually pulled this formgroup component out

It is really not important as it is implemented but you can go look at it if

Now let's go ahead and copy and paste for my notes here.

And this is where we left off in the last lesson.

Now so far we started with the stack component.

We just did display grid and we set some gap.

So let's kind of get that, let's get it to where we were with the split a

So we are going to import styled from styled components.

And we are going to create a component called columns equals styled.div.

Before we add it let's just go ahead and preemptively put that around our

So yeah when we built the split we did display grid and we did a gap.

Then props.gutter otherwise it would default to spacing map.lg.

And then with the split we'd say grid template columns.

And we just did 1FR to do a ratio of 50/50 split.

And yeah that creates a two column split.

Now as we learned when we were making the split if we want to make 3, 4, 18

get pretty ridiculous if we had to get 1FR, 1FR over and over and over again.

So luckily there is a function that we can use called repeat.

And in here we can say I want 6 columns of 1FR.

Now whatever we put in here, let's say we only wanted 3 columns as we give us 3

But what it does is it repeats 3 times whatever we put in here.

So if we wanted to alternate every other column to be 100 pixels to 200 pixels

And you can see we have 6 columns in all but 3 times it repeats this 100, 200,

But in this case the layout we're looking for has 6 columns.

Now the other thing we need to do is we need to span multiple columns.

And that's where we're going to create a complementary primitive called the

And this column component, see there's a property in grid that we can put on

That let's us say, hey, I know I want to change my defaults.

Instead of me being spanning 3 columns, I want to span.

Sorry, instead of me spanning 1 column, I want to span 3 columns.