Welcome to Composing Layouts in React

Introduction

CSS in the Age of Components

What is Layout Composition? A React Layout Primitives Guide

Encapsulated CSS - How to Apply CSS in a Composable Way

Normal Document Flow in HTML, CSS, and React

CSS Grid vs Flexbox for Composable Layouts

How to Add a CSS Reset to Remove Default Browser Style

Composable Layouts

What are Layout Spacers?

How to Build a Stacked Component Layout in React

How to Build a Split Pane Layout in React

How to Build React Grid Layouts With Custom Column Numbers

How to Build a React Responsive Grid Layout

How to Build Responsive React Text Elements With InlineCluster

How to Add Inline Styling to React Components

Layout Primitives - The Spacers

Introduction to Layout Wrapper Primitives

How to Build a Pricing Page Widget in React With PadBox

Automatically Center Text DIVs with React Center Component

Resize Images And Maintain Aspect Ratio in React and CSS

How to Vertically Center a DIV in React With CSS

How to Build Accessible Navigation Divs in React

Layout Primitives - The Wrappers

Introduction to The Settings Pages

How to Build a React Navbar With a Menu and Header

How to Build a React Sidebar Menu

How to Build a Profile Settings Page in React

How to Build a Privacy Page with Toggle Buttons in React

Composing Layouts in Practice

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

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_02/lesson_02.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_02/lesson_02.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_02/lesson_02.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_02/lesson_02.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_02/lesson_02.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_02/lesson_02.01/protected/stack-1.jsx#L20 }
        <Stack>
          <label htmlFor="name">Name</label>
          <input type="text" id="name" />
        </Stack>

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

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

Guys... when I run this code in CondeSandbox, the each input takes the entire screen. It doesn't look like you are showing in the video and I have exactly the same code :(

Hardsoftdev Team

Why use display:grid; for every container?

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Composing Layouts in React

Module 1: Introduction

Introduction:

Start Here

Introduction: (2:30)

Welcome to Composing Layouts in React

Module 2: Composable Layouts

Lesson 1: (2:14)

CSS in the Age of Components

Lesson 2: (5:33)

What is Layout Composition? A React Layout Primitives Guide

Lesson 3: (8:53)

Encapsulated CSS - How to Apply CSS in a Composable Way

Lesson 4: (8:42)

Normal Document Flow in HTML, CSS, and React

Lesson 5: (6:27)

CSS Grid vs Flexbox for Composable Layouts

Lesson 6: (5:40)

How to Add a CSS Reset to Remove Default Browser Style

Module 3: Layout Primitives - The Spacers

Lesson 1: (2:02)

What are Layout Spacers?

Lesson 2: (17:07)

How to Build a Stacked Component Layout in React

Lesson 3: (14:21)

How to Build a Split Pane Layout in React

Lesson 4: (18:25)

How to Build React Grid Layouts With Custom Column Numbers

Lesson 5: (11:04)

How to Build a React Responsive Grid Layout

Lesson 6: (12:27)

How to Build Responsive React Text Elements With InlineCluster

Lesson 7: (23:22)

How to Add Inline Styling to React Components

Module 4: Layout Primitives - The Wrappers

Lesson 1: (2:39)

Introduction to Layout Wrapper Primitives

Lesson 2: (13:44)

How to Build a Pricing Page Widget in React With PadBox

Lesson 3: (14:27)

Automatically Center Text DIVs with React Center Component

Lesson 4: (19:59)

Resize Images And Maintain Aspect Ratio in React and CSS

Lesson 5: (17:14)

How to Vertically Center a DIV in React With CSS

Lesson 6: (8:54)

How to Build Accessible Navigation Divs in React

Module 5: Composing Layouts in Practice

Lesson 1: (1:32)

Introduction to The Settings Pages

Lesson 2: (24:10)

How to Build a React Navbar With a Menu and Header

Lesson 3: (16:17)

How to Build a React Sidebar Menu

Lesson 4: (20:05)

How to Build a Profile Settings Page in React

Lesson 5: (14:05)

How to Build a Privacy Page with Toggle Buttons in React

How to Build a Stacked Component Layout in React