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

Vertical centering has long been considered the holy grail of CSS. This has been the case even though there have been multiple ways to do it. What was coveted was a single property that you could set that would automatically center items vertically, which we now have in both CSS Flexbox and CSS Grid.

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

In this Hero section, we have a top and bottom section and a vertically centered section in the middle. A gutter separates all three sections, and padding is added around the entire Hero section.

You can follow along at the codesandbox.io starter project

export default function Hero() {
  return (
    <div>
      <InlineCluster gutter="xl" justify="end">
        <span>Places to stay</span>
        <span>Popular experiences</span>
        <span>Manage your booking</span>
        <span>List your property</span>
      </InlineCluster>

      <Stack gutter="lg">
        <h1>Home4Hire</h1>
        <span>Stay here and relax</span>
        <InlineCluster gutter="lg">
          <Button primary>Get started</Button>
          <Button>Sign in</Button>
        </InlineCluster>
      </Stack>

      <InlineCluster gutter="xl" justify="center">
        <a href="/#">Keep Reading to learn more</a>
      </InlineCluster>
    </div>
  );
}

For the time being, let's remove the top and the bottom and focus on just centering the middle section. We can do it like this:

const Cover = styled.div`
  display: grid;
  min-height: 100vh;

  grid-template-rows: 1fr;

  > * {
    align-self: center;
  }
`;

By default, elements are only as tall as the content. First, we are setting the display to 

, which is 100 percent of the viewport height. To center something vertically, we need vertical space for it to be vertically centered. If we were to set just a 

, that would create an overflow if the content happened to be larger than the viewport. Setting a 

 instead gives us the white space we are looking for but still allows the element to grow if needed.

 is just the same, except in the vertical direction.

Finally, we are using the direct child selector to set the children's alignment to the center.

<Cover>
  <Stack gutter="lg">
    <h1>Home4Hire</h1>
    <span>Stay here and relax</span>
    <InlineCluster gutter="lg">
      <Button primary>Get started</Button>
      <Button>Sign in</Button>
    </InlineCluster>
  </Stack>
</Cover>

(We are ignoring the top and bottom sections for now)

If all we had to do was vertically center a child, we would be done. Unfortunately, it's not that simple. We need to be able to position items above and below, conditionally. The top and bottom need to grow naturally based on their content, but the children need to stay in the center of the remaining vertical space.

To achieve this we are going to use composition via props. In React it is common to see this pattern:

---
title: How to Vertically Center a DIV in React With CSS
slug: cover-component
description: 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.
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/je2v21ji6h
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/travis-waith-mair-composing-layout-in-react-app/-/tree/main/module_04/lesson_04
---

Vertical centering has long been considered the holy grail of CSS. This has been the case even though there have been multiple ways to do it. What was coveted was a single property that you could set that would automatically center items vertically, which we now have in both CSS Flexbox and CSS Grid.

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.

## The problem: the Simple Hero

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

![The Hero red-line](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_04/lesson_04.04/public/assets/cover-red-line.png)

In this Hero section, we have a top and bottom section and a vertically centered section in the middle. A gutter separates all three sections, and padding is added around the entire Hero section.

## The solution

Here is how our code starts out. [You can follow along at the codesandbox.io starter project](https://codesandbox.io/s/the-hero-starter-cbrid?file=/src/Hero.jsx):

```jsx { actualFilename=./protected/cover-0.js endLine=31 startLine=7 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_04/lesson_04.04/protected/cover-0.js#L7 }
export default function Hero() {
  return (
    <div>
      <InlineCluster gutter="xl" justify="end">
        <span>Places to stay</span>
        <span>Popular experiences</span>
        <span>Manage your booking</span>
        <span>List your property</span>
      </InlineCluster>

      <Stack gutter="lg">
        <h1>Home4Hire</h1>
        <span>Stay here and relax</span>
        <InlineCluster gutter="lg">
          <Button primary>Get started</Button>
          <Button>Sign in</Button>
        </InlineCluster>
      </Stack>

      <InlineCluster gutter="xl" justify="center">
        <a href="/#">Keep Reading to learn more</a>
      </InlineCluster>
    </div>
  );
}
```

And this is how it looks:

![The Hero step-0](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_04/lesson_04.04/public/assets/cover-0.png)

For the time being, let's remove the top and the bottom and focus on just centering the middle section. We can do it like this:

```jsx { actualFilename=./protected/cover-1.js endLine=17 startLine=8 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_04/lesson_04.04/protected/cover-1.js#L8 }
const Cover = styled.div`
  display: grid;
  min-height: 100vh;

  grid-template-rows: 1fr;

  > * {
    align-self: center;
  }
`;
```

By default, elements are only as tall as the content. First, we are setting the display to `grid` and the `min-height` to `100vh`, which is 100 percent of the viewport height. To center something vertically, we need vertical space for it to be vertically centered. If we were to set just a `height`, that would create an overflow if the content happened to be larger than the viewport. Setting a `min-height` instead gives us the white space we are looking for but still allows the element to grow if needed.

Next, we are setting the `grid-template-rows` to `1fr`. We already used `grid-template-columns` in a few of the spacer primitives. `grid-template-rows` is just the same, except in the vertical direction.

Finally, we are using the direct child selector to set the children's alignment to the center.

Now we can use the Cover like this:

```jsx
<Cover>
  <Stack gutter="lg">
    <h1>Home4Hire</h1>
    <span>Stay here and relax</span>
    <InlineCluster gutter="lg">
      <Button primary>Get started</Button>
      <Button>Sign in</Button>
    </InlineCluster>
  </Stack>
</Cover>
```

(We are ignoring the top and bottom sections for now)

This is what that looks like:

![The Hero step-1](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_04/lesson_04.04/public/assets/cover-1.png)

If all we had to do was vertically center a child, we would be done. Unfortunately, it's not that simple. We need to be able to position items above and below, conditionally. The top and bottom need to grow naturally based on their content, but the children need to stay in the center of the remaining vertical space.

To achieve this we are going to use composition via props. In React it is common to see this pattern:

Travis Waith-Mair

Hey everybody Travis here with another lesson in composing IELTS in React.

In this lesson we are going to learn about the cover primitive.

Vertically centering has long been considered the holy grail of CSS.

This has been the case even though there are actually multiple ways to do it.

What was coveted was actually a single property that you could set that would

center items vertically which is now possible in both CSS flex box and CSS grid

In this lesson we are going to learn how to build a cover primitive which will

center its children and allow you to inject a top or bottom section around it.

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

This hero section will have a top and bottom section and a vertically centered

Now a gutter will also separate all three sections and a padding is added

So just like always there is a link to the code sandbox site.io starter project

Now we have in here we have just got this button that I created if you want to

at it once again go ahead feel free to go look at it it is not important.

Basically it just has two properties you can either give it a primary property

the start version or it is this white version and that is all there is to it.

And we are using this inline cluster as well.

You can see we have already got the inline cluster a couple different places

So let's start off by making our cover component.

Let's go ahead and import our styled from styled components.

And for now let's just not worry about the top and bottom section.

Let's just worry about that middle section this stack right here.

And there we go we got that centered right there in the middle and this is done

doing display grid we should be pretty familiar with that by now.

We are setting a minimum height of 100 view heights.

Now we are going to make this configurable but we are just hard coding that for

And then before we were setting grid template columns to set column tracks this

were setting a road tracks grid template rows and we are doing one of our and

exactly the same way except for in this direction.

So by setting one of our we are setting I want one road track which in this

the entire element which is 100 view heights is going to be one road track one

And then we are using the direct child combinator here to align have the child

the issue of these top and bottom sections because it's not as simple as soon

these in here if we we do this for example.

Now things are not getting skew because we set one row and this thing is

centered then we are creating an automatic row below it and that's not what we

What we want is to conditionally create a top and a bottom row and then kind of

So the first thing we are going to do is we are going to use the render props

Well it's not actually not render props it's just rendering a prop as a child.

Now you are all familiar with rendering something as a child.

We do props that children and then we can use it like this.

Well we could just as easily render this like that.

So if we can render children this way we can render any prop that way.

So we could do something like this for example and have a top section and a

We can pass in a value into our top and that would get placed right here and

We are going to update our cover component to use that adders constructor that

Once again what this does is this takes a function and allows us to return

to all the props and lets us hard code some values.

So from there we are pulling it destructuring off of the props the children,

Then we are going to wrap everything in a React app fragment.

Now I just want to be explicit here that is why I am not using the close the

You could definitely use the shortcut if you wanted here that is totally fine