Build a Layout with the Container, Flex and VStack Component in Chakra UI

Lazar Nikolov: [0:00] Throughout this course, we'll be building this user interface. Just by looking at it, we can immediately see that we have two types of fonts, a few inputs, a checkbox, a button, an image, etc. We will break down the design as we go.

[0:14] First, we'll focus on these two red lines. These are the margins that keep our content contained and centered. They represent two columns with 640 pixels each, totaling at 1,280 pixels. In Chakra UI, we can use the container component to achieve the same.

[0:31] Let's add the container component in our index.tsx file. Let's switch to the index.tsx file and add an import statement at the top. We're going to import the container component from Chakra UI/react and add it into our index page.

[0:51] The container component by itself has some default parameters, but we would like to overwrite them. We can do that by using style props.

[1:04] Before we do that, I'll briefly explain Chakra UI's design system. Chakra UI has its own implemented design system and every design system has designed tokens, which are colors, spacing units, fonts, sizes, etc.

[1:18] We can use style props to access those design tokens that are part of Chakra UI. Under the hood, these style props are compiled to CSS properties. These style props are well documented and can be checked out on the Chakra UI website.

[1:33] In our case, we need to set the width of the container to 1,280 pixels. Let's see what design token we need to use. We can open up the Chakra UI website. Enter the default theme section and scroll down to the sizes section.

[1:49] We can see that there's a container section and there's an XL value of 1,280. Just what we need. In order to set the size to 1,280 pixels of the container component, we can do maxWidth = container.xl.

[2:09] The container component by default has a padding of 16 pixels, and we don't want that in our case. Let's do padding = . Since the container component is empty right now, we can't see its effect until we add more elements to it. Here's a bonus tip.

[2:27] The style props also have shorthand names. Instead of doing maxWidth, we can do maxW, and then just P, in this case. The result is the same. This way it's just faster to type them. That's about it for the container component for now.

[2:44] Next, we should add the two sections into the container component. If we think about the responsive design, it will make more sense for these two sections to be aligned vertically on smaller screens and horizontally, just like they are now, on bigger screens.

[3:01] That's why in this case, it's better to grab those two sections with a flex component, but we'll cover the responsive functionality in one of the following lessons. Before adding the sections, we'll add the flex component. Let's import the flex component.

[3:16] Reformat the code just a little bit and add the flex component inside of the container. We're going to set the height or just H to 100vh, which is viewport height and set the vertical padding to 20. Py stands for padding y, or padding on the y-axis.

[3:41] This way, we'll set the top and bottom padding to 20, which converts to 80 pixels. Here is another bonus tip. You can convert spacing values to pixels by multiplying them by four and vice versa, pixels to spacing values by dividing them by four.

[3:56] Now we can add the two sections. We can see that the elements in the first section are stacked on top of each other. To achieve this, we will use the VStack component from Chakra UI.

[4:09] As the name suggests, the VStack component is a vertical stack that stacks its children vertically. It's very similar to the flex component, but it also has support of spacing that we can control. Let's add the VStack in the import statement and add it to the flex component.

[4:26] We're going to set the width or just W to full, which is 100 percent. Also the height to full, the padding to 10, which will be for the pixels, the spacing to 10, and we we'll set the alignItems to flex start. This is enough for our first section.

[4:52] While we're here, let's also add the second section. It's going to be pretty much the same as the first section, so we can copy paste this code. In this case, we'll add a light gray background and we can do that by bg = gray.50. The gray.50 is a design token from Chakra UI.

[5:10] Now we can actually see something. We can see that the second section is here. Also the first section is here, but the background is the same. Let's try to do inspect element and see what we have. We can see the container is here.

[5:33] Then we can see the flex component here, which wraps around the two of our sections. We can see the two sections here. This is the layout that we want. These are some of the layout components that are built in Chakra UI, but they're enough to achieve our design.

[5:55] To recap, we can use the container component to keep our content contained and centered. We can use the flex and vertical stack, or VStack components, to stack the inner elements.

[6:08] When we want to add a background, or padding, alignment, we can use the style props which have access to the design tokens built in Chakra UI. All the style props are well documented and can be checked out on Chakra UI's website.