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

One of the simplest and yet most common layout patterns found on the web is putting one element on top of another element with consistent space. From form labels, to paragraphs of text, to social media feeds. They all need to stack one thing on top of another with uniform space between them. This problem is precisely what the 

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

As you will notice, we have a few parts to this widget. There is a title section and a form section made up of two input groups and a button. The one thing that they all have in common is that they follow the same pattern. They all stack vertically with space between them. Here is the same mockup with the different space sizes pointed out.

What we need is a way to enforce that all the items will stack in the block direction no matter if they are block or inline elements by default. We also need a way to provide consistent space between the elements without creating space around the stacked elements themselves. That way the stack can remain composable into any other environments.

We are going to be doing the rest of the lessons in codesandbox.io. If you want to follow along, 

 or you can click on the final code at the end the lesson.

Let's start off with some basic markup. Create a new file with the extension 

(You can call it what you like. In this lesson, I am choosing to structure my files in a way that should make it easier to focus on what is being taught and not necessarily the way I would structure it for a production app. 

Although React doesn't have an opinion on how to structure your files

, I typically like to collocate my components together as much as possible, and will separate files when components are reused across other parts of the application.)

export default function Subscribe() {
  return (
    <div>
      <div>
        <h2>Subscribe To Our Newsletter</h2>
        <p>
          Subscribe to our newsletter to keep up to date on all our amazing
          products.
        </p>
      </div>

      <div>
        <div>
          <label htmlFor="name">Name</label>
          <input type="text" id="name" />
        </div>

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

        <button>Subscribe</button>
      </div>
    </div>
  );
}

The first problem we want to solve is to get the label to stack on top of our input. This problem is easily solved with a single line of CSS:

const Stack = styled.div`
  display: grid;
`;

, thereby implicitly setting a single column track for items inside the Stack. Each item that is placed in that column creates an implicit row. We can then use this new 

        <Stack>
          <label htmlFor="name">Name</label>
          <input type="text" id="name" />
        </Stack>

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

Our widget has already taken a major step in the right direction:

---
title: How to Build a Stacked Component Layout in React
slug: stack-component
description: 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
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/m94wtr8qai
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/travis-waith-mair-composing-layout-in-react-app/-/tree/main/module_03/lesson_01
---

One of the simplest and yet most common layout patterns found on the web is putting one element on top of another element with consistent space. From form labels, to paragraphs of text, to social media feeds. They all need to stack one thing on top of another with uniform space between them. This problem is precisely what the **Stack** primitive solves.

## The problem: Subscribe to Our Newsletter

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

![Subscribe to Our Newsletter mockup](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_03/lesson_03.01/public/assets/newsletter.png)

As you will notice, we have a few parts to this widget. There is a title section and a form section made up of two input groups and a button. The one thing that they all have in common is that they follow the same pattern. They all stack vertically with space between them. Here is the same mockup with the different space sizes pointed out.

![Subscribe to Our Newsletter mockup with redlines](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_03/lesson_03.01/public/assets/newsletter-redline.png)

What we need is a way to enforce that all the items will stack in the block direction no matter if they are block or inline elements by default. We also need a way to provide consistent space between the elements without creating space around the stacked elements themselves. That way the stack can remain composable into any other environments.

## The solution

We are going to be doing the rest of the lessons in codesandbox.io. If you want to follow along, [Here is a starter project you can fork](https://codesandbox.io/s/stack-example-forked-jfkil?file=/src/stack.jsx) or you can click on the final code at the end the lesson.

Let's start off with some basic markup. Create a new file with the extension `.jsx`.

(You can call it what you like. In this lesson, I am choosing to structure my files in a way that should make it easier to focus on what is being taught and not necessarily the way I would structure it for a production app. [Although React doesn't have an opinion on how to structure your files](https://reactjs.org/docs/faq-structure.html), I typically like to collocate my components together as much as possible, and will separate files when components are reused across other parts of the application.)

```jsx { actualFilename=./protected/stack-0.jsx endLine=29 startLine=3 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_03/lesson_03.01/protected/stack-0.jsx#L3 }
export default function Subscribe() {
  return (
    <div>
      <div>
        <h2>Subscribe To Our Newsletter</h2>
        <p>
          Subscribe to our newsletter to keep up to date on all our amazing
          products.
        </p>
      </div>

      <div>
        <div>
          <label htmlFor="name">Name</label>
          <input type="text" id="name" />
        </div>

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

        <button>Subscribe</button>
      </div>
    </div>
  );
}
```

And this is what that looks like:

![initial layout](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_03/lesson_03.01/public/assets/stack-0.png)

The first problem we want to solve is to get the label to stack on top of our input. This problem is easily solved with a single line of CSS:

```jsx { actualFilename=./protected/stack-1.jsx endLine=6 startLine=4 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_03/lesson_03.01/protected/stack-1.jsx#L4 }
const Stack = styled.div`
  display: grid;
`;
```

We create a new `Stack` component and set the `display` property to `grid`, thereby implicitly setting a single column track for items inside the Stack. Each item that is placed in that column creates an implicit row. We can then use this new `Stack` component like this:

```jsx { actualFilename=./protected/stack-1.jsx endLine=28 startLine=20 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_03/lesson_03.01/protected/stack-1.jsx#L20 }
        <Stack>
          <label htmlFor="name">Name</label>
          <input type="text" id="name" />
        </Stack>

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 stack.

One of the simplest and yet most common layout patterns found on the web is

on top of another element with consistent space.

From form labels to paragraphs of text to social media feeds, they all need to

one thing on top of another with uniform space between them.

This problem is precisely what the stack primitive solves.

In this lesson we are going to build the following widget.

It's a subscribe to our newsletter widget.

As you will notice, we have a few parts to this widget.

There's a title section and a form section made up of two input groups and a

The one thing that they all have in common is that they follow the same pattern

They all stack vertically with space between them.

Here's the same mock up with different space sizes pointed out.

So what we need is a way to enforce that all the items will stack in the block

no matter if they are block or inline elements by default.

We also need a way to provide consistent space between the elements without

That way the stack can remain composable in any other environment.

So going forward in the rest of the lessons of this course, we are going to be

If you want to follow along, I will provide a link to a starter project that

If you want to see the final code, there will be a link at the bottom of each

Now let's start off with some basic markup.

You can create a new file called stack.jsx or you can call whatever you like.

If you want to change that, just come and change it on line seven.

Now in these lessons, I'm choosing to structure my files in a way that should

to focus on what's being taught and not necessarily the way I would structure a

Although React doesn't have an opinion on how to structure your files, I

to co-locate my components together as much as possible and then separate the

components are reused across other parts of the application.

So let's go ahead and just bring this in here.

And of course, when I copy, I got to remember to import React.

Now the first problem we need to solve is to get the label to stack on top of

This problem is easily solved with the single line of CSS.

So we're going to start by creating our actual stack component.

To do this, we're going to import styled from styled components.

And this is already pre-installed as you'll see.

But if you haven't, it's just as simple as searching for styled components and

So let's make our first styled component called stack, which is equal to styled

And then we're going to write our CSS in here.

Now when we set display grid, we haven't at this point set any row or columns.

So we have implicitly created a single column and it will implicitly create a

each element that is added inside of our stack.

Let's just start off with these input groups.

And as you can see over here, we've already got our label and our input to

Now the first thing you'll notice is that not only are the labels stacked on

Now we're going to take up the entire width of the column.

If you want to override this behavior, you'll simply need to use justify items

on the stack one to change all of them or use the justify self property on the

So all we need to do now is set space between them.

We can set space between them using the gap property.

Now the value that we add into the gap property can be any values CSS size unit

But we don't want to just hard code it into 10 pixels for example.

What we want to do is have this configurable via props.

So what we're going to use is style component string interpolation property.

And I've already got this copied and it looks like this.

And we're going to worry about the way this styling changes while we do that.

Now what we're doing here, let's take a step back.

We already know about JavaScript string template property, which is within two