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

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