The Stack Component
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
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:
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, Here is a starter project you can fork 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.)
And this is what that looks like:
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:
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:
Our widget has already taken a major step in the right direction: