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

The InlineCluster primitive solved a very common inline layout problem. However, there is another common problem which is similar but needs its own custom solution. In this lesson, we will learn how to make a variant of the InlineCluster, called Inline, which will let us stretch one or more items. It will also allow us to switch to a stack layout when the width decreases below a threshold.

In this lesson, we are going to build a second version of our MenuBar widget:

In this version of the MenuBar, we need to have everything stay inline and not cluster. In addition, we need the center section to stretch and fill the extra available space, but cluster in the center when there is no extra space available.

It will also need to switch from a horizontal, inline layout to a vertical, stack layout when the inline size is less than a 

follow along by forking the codesandbox.io starter project.

In our MenuBar, we need items in the middle section (the menu items) to cluster in the center. We already have a primitive that solves that problem: the InlineCluster primitive. Let's look at our initial markup, which is already using the InlineCluster primitive:

import React from "react";
import { InlineCluster } from "./InlineCluster";
import { Logo, MenuContainer, Button } from "./MenuParts";

export default function MenuBar() {
  return (
    <MenuContainer>
      <div>
        <div>
          <Logo />
        </div>
        <InlineCluster gutter="md" justify="center" align="center">
          <span>Product</span>
          <span>Features</span>
          <span>Marketplace</span>
          <span>Company</span>
        </InlineCluster>
        <div>
          <span>Sign in</span>
          <Button>Sign up</Button>
        </div>
      </div>
    </MenuContainer>
  );
}

In the above code, we have separated our menu into three parts, the logo, the menu items, and our sign-in/sign-up sections. Here is the same image, with the three sections colored to make it easier to see:

The next thing we need to do is move these sections to be inline, but this time we don't want them to cluster like the 

. So let's start making our Inline primitive. The 

 primitive needs to do all the things that the 

 props. The only thing we don't want it to do is cluster. Luckily, we don't have to recreate all those same properties again on our 

 primitive. We are going to take advantage of 

 ability to extend the styles of other components:

const Inline = styled(InlineCluster)`
  flex-wrap: nowrap;

  > * {
    flex: 1;
  }
`;

. Doing that will mean that we have all the style logic of the InlineCluster, but now we can build on top of it. Unlike the menu items in the middle, we don't want our menu bar components to cluster. To prevent clustering we need to override the 

One of the requirements we need to fulfill is to have the menu items in the center to grow to take up all available space. One of the properties you can set on a 

 property can be passed a number and it will stretch to fill as much space as possible. Only those 

 property set will grow and it will grow in relation to other 

Based on the rules of Encapsulated CSS, we know we need to set values like 

 that impact the layout of an element in the parent component. In the above code, we are using the direct child combinator to set the 

 on all the three direct children, the logo, the menu items, and the sign-in/sign-up section. By setting all the direct children to have a 

      <Inline>
        <div>
          <Logo />
        </div>
        <InlineCluster gutter="md" justify="center" align="center">
          <span>Product</span>
          <span>Features</span>
          <span>Marketplace</span>
          <span>Company</span>
        </InlineCluster>
        <div>
          <span>Sign in</span>
          <Button>Sign up</Button>
        </div>
      </Inline>

And here is that same image with colors to make the sections easier to see:

Sometimes, we want all items to stretch uniformly this way, but for our menu bar we want only the second item to stretch. What we need is a way to set which item or items will stretch and grow. Let's add a prop called 

 that accepts either a number that represents the index of the child that we want to stretch, or the strings: 

In the above code, we check to see if the 

 prop is a number. If it is, we will use the 

 pseudo selector allows you to select an element that is the "nth child". We just need to pass into the selector which child it is that we want to have stretched. For example, if we wanted to select the third child, we would write our selector 

. So we need to add one to our number to convert from a 0-based index to a 1-based index, which is why our code will return 

---
title: How to Add Inline Styling to React Components
slug: inline-component
description: 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.
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/7c5j9bxorn
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/travis-waith-mair-composing-layout-in-react-app/-/tree/main/module_03/lesson_06
---

The InlineCluster primitive solved a very common inline layout problem. However, there is another common problem which is similar but needs its own custom solution. In this lesson, we will learn how to make a variant of the InlineCluster, called Inline, which will let us stretch one or more items. It will also allow us to switch to a stack layout when the width decreases below a threshold.

## The problem: the MenuBar v2

In this lesson, we are going to build a second version of our MenuBar widget:

![Menu Bar mockup wide](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_03/lesson_03.06/public/assets/inline-red-line.png)

In this version of the MenuBar, we need to have everything stay inline and not cluster. In addition, we need the center section to stretch and fill the extra available space, but cluster in the center when there is no extra space available.

It will also need to switch from a horizontal, inline layout to a vertical, stack layout when the inline size is less than a `40rems`, like this:

![Menu Bar mockup narrow](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_03/lesson_03.06/public/assets/inline-red-narrow.png)

## The solution

You can [follow along by forking the codesandbox.io starter project.](https://codesandbox.io/s/heading-example-starter-0nekx)

In our MenuBar, we need items in the middle section (the menu items) to cluster in the center. We already have a primitive that solves that problem: the InlineCluster primitive. Let's look at our initial markup, which is already using the InlineCluster primitive:

```jsx { actualFilename=./protected/inline-0.js endChar=621 endLine=26 startChar=0 startLine=1 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_03/lesson_03.06/protected/inline-0.js }
import React from "react";
import { InlineCluster } from "./InlineCluster";
import { Logo, MenuContainer, Button } from "./MenuParts";

export default function MenuBar() {
  return (
    <MenuContainer>
      <div>
        <div>
          <Logo />
        </div>
        <InlineCluster gutter="md" justify="center" align="center">
          <span>Product</span>
          <span>Features</span>
          <span>Marketplace</span>
          <span>Company</span>
        </InlineCluster>
        <div>
          <span>Sign in</span>
          <Button>Sign up</Button>
        </div>
      </div>
    </MenuContainer>
  );
}
```

And this is how it looks:

![Menu Bar step 0](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_03/lesson_03.06/public/assets/inline-0.png)

In the above code, we have separated our menu into three parts, the logo, the menu items, and our sign-in/sign-up sections. Here is the same image, with the three sections colored to make it easier to see:

![Menu Bar step 0 with color bars](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_03/lesson_03.06/public/assets/inline-0-with-colors.png)

The next thing we need to do is move these sections to be inline, but this time we don't want them to cluster like the `InlineCluster`. So let's start making our Inline primitive. The `Inline` primitive needs to do all the things that the `InlineCluster` can do, like setting the `gutter`, `justify`, and `align` props. The only thing we don't want it to do is cluster. Luckily, we don't have to recreate all those same properties again on our `Inline` primitive. We are going to take advantage of `styled-components` ability to extend the styles of other components:

```jsx { actualFilename=./protected/inline-1.js endLine=12 startLine=6 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_03/lesson_03.06/protected/inline-1.js#L6 }
const Inline = styled(InlineCluster)`
  flex-wrap: nowrap;

  > * {
    flex: 1;
  }
`;
```

In the above code, we pass the `InlineCluster` as an argument to `styled`. Doing that will mean that we have all the style logic of the InlineCluster, but now we can build on top of it. Unlike the menu items in the middle, we don't want our menu bar components to cluster. To prevent clustering we need to override the `flex-wrap` property set in the `InlineCluster` by setting it `flex-wrap` in the `Inline` primitive to `nowrap`.

One of the requirements we need to fulfill is to have the menu items in the center to grow to take up all available space. One of the properties you can set on a `flex-item` is the `flex` property. The `flex` property can be passed a number and it will stretch to fill as much space as possible. Only those `flex-items` that have the `flex` property set will grow and it will grow in relation to other `flex-items` value.

Based on the rules of Encapsulated CSS, we know we need to set values like `flex` that impact the layout of an element in the parent component. In the above code, we are using the direct child combinator to set the `flex` property to `1` on all the three direct children, the logo, the menu items, and the sign-in/sign-up section. By setting all the direct children to have a `flex` value of 1, they will all grow equally.

Now we can wrap our start using the `Inline` primitive, like this:

```jsx { actualFilename=./protected/inline-1.js endLine=31 startLine=17 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_03/lesson_03.06/protected/inline-1.js#L17 }
      <Inline>
        <div>
          <Logo />
        </div>
        <InlineCluster gutter="md" justify="center" align="center">
          <span>Product</span>
          <span>Features</span>
          <span>Marketplace</span>
          <span>Company</span>
        </InlineCluster>
        <div>
          <span>Sign in</span>
          <Button>Sign up</Button>
        </div>
      </Inline>
```

And now our menu looks like this:

![Menu Bar step 1](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_03/lesson_03.06/public/assets/inline-1.png)

And here is that same image with colors to make the sections easier to see:

![Menu Bar step 1 with colored sections](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_03/lesson_03.06/public/assets/inline-1-with-color.png)

Sometimes, we want all items to stretch uniformly this way, but for our menu bar we want only the second item to stretch. What we need is a way to set which item or items will stretch and grow. Let's add a prop called `stretch` that accepts either a number that represents the index of the child that we want to stretch, or the strings: `all`, `start`, or `end`. Let's do a little refactoring:

```jsx { actualFilename=./protected/inline-2.js endLine=21 startLine=6 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_03/lesson_03.06/protected/inline-2.js#L6 }
const stretchMap = {
  all: `> *  { flex: 1 }`,
  start: `> :first-child { flex: 1 }`,
  end: `> :last-child { flex: 1 }`,
};

const Inline = styled(InlineCluster)`
  flex-wrap: nowrap;

  ${({ stretch }) => {
    if (typeof stretch === "number")
      return `> :nth-child(${stretch + 1}) { flex: 1 }`;

    return stretchMap[stretch] ?? "";
  }}
`;
```

In the above code, we check to see if the `stretch` prop is a number. If it is, we will use the `:nth-child` pseudo selector. The `:nth-child` pseudo selector allows you to select an element that is the "nth child". We just need to pass into the selector which child it is that we want to have stretched. For example, if we wanted to select the third child, we would write our selector `> :nth-child(3){}`. In JavaScript, index numbers start at `0`, but in CSS indexes start at `1`. So we need to add one to our number to convert from a 0-based index to a 1-based index, which is why our code will return `> :nth-child(${stretch + 1}) { flex: 1 }`.

Travis Waith-Mair

Hey everybody, Travis here with another lesson in composing layouts and react.

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

The inline cluster primitive solved a very common inline layout problem.

However, there is another common problem which is similar but needs its own

In this lesson we will learn how to make a variant of the inline cluster called

which will let us stretch one or more items and it will also allow us to switch

layout when the width decreases below a threshold.

In this lesson we are going to build a second version of the menu bar widget

In this version the menu bar we need to have everything stay in line and not

In addition we need the center section to stretch and fill the extra available

a cluster in the center when there is no extra space available.

You will also need to switch from a horizontal inline layout to a vertical

the inline size is less than 40 rounds like this.

So in our menu bar that is over here on the left hand side, this is where we

The difference between last lesson and this lesson is there is this menu parts

have just a bunch of helpful items that we are going to be bringing in.

Once again, not really important how it is implemented, just know that they are

there to make things a little bit easier.

We already have this inline cluster, I have to move it to a separate file that

can focus on the menu bar and creating the inline component.

But we will be using the inline cluster again in this module.

So let's go ahead and let's bring in the entire file, this makes it really easy

brought in React, we were bringing in the inline cluster component and these

menu parts, the logo, the menu container and the button.

Then we are just wrapping that everything with the menu container.

And then inside of there, just because we are going to need to know how to use

wrapped everything inside its own div, the logo is wrapped in its own div,

are wrapped in an inline cluster because we need to have them centered and

and so I just kind of had to set that up already.

Then finally our final section which is the button and the span which probably

be actually be like a hyperlink but we are just going to use the span for now.

So the next thing we are going to do, well let me take a step back.

This inline component does most of what the inline cluster does.

They overlap a lot, they need to be able to set the justify, the align, they

the gutter thing just like the inline cluster does.

The difference is we need some of these items to stretch and take the entire

the other items we want them to only take up the minimum amount of impossible.

So what we are going to do is we are going to take advantage of the fact that

And we are going to bring in, we are going to create our inline component but

of going dot div like we usually do, we are going to use it as a function and

And then what this will do is it says hey use everything that is in the inline

all that logic that is already built in but do this other stuff as well.

So the first thing we are going to do is we are going to get rid of, well let's

so you can see it happening in real time, we are going to wrap all these things

And we are going to undo this flex wrap because we do not want them to wrap by

So we are actually going to change it to no wrap.

So this undoes the flex wrap property that was set by the inline cluster.

And then just for now just to show what is happening, we are going to set the

Now what this does is we are using the drag child selector because we are

layout of each of these children, the inline, the div that wraps the logo and

We want to impact their layout so we are using the direct child selector to do

And then we are setting all the flex properties to all of them to have a flex

This does this is shorthand, what we are actually setting is flex grow to one.

We could probably do that, but this is a shorthand.

It does have a few other things that allows us to set some other properties if

But just for conciseness we are just going to use this flex one.

One allows each of these items to stay in line, but they will grow at the same

It is similar to the FR unit where it uses the same amount of space available