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

Before adopting CSS, the styling of a web page was achieved primarily through the use of presentational tags. To change the font, alignment, color, or other visual properties, one had to compose the correct tags and attributes together. If you want to read an excellent summary of the early days of web layout, I would highly recommend checking out the 

These presentational tags were eventually dropped in favor of CSS for a few reasons, the biggest being the desire to separate content and presentation. HTML would therefore focus exclusively on providing semantic meaning to content, while CSS would focus on visual structure and styling. Interestingly enough, the one presentational tag that seemed to live long past its deprecation was the 

In this lesson, we will be creating this Testimonial component:

The above component will need to have a max-inline-size of 

 and center itself in any parent container larger than that width. The component should also be able to center its children and text.

you can follow along by going to the codesandbox.io starter project

export default function Testimonial() {
  return (
    <div>
      <h2>Home4Hire</h2>
      <p>
        "Lorem ipsum dolor sit amet, nibh lorem convenire quo et. Usu ea libris
        omittantur. Dicta theophrastus ad mei. Dicat appetere at vis, qui ne
        scripta docendi."
      </p>
      <Attribution />
    </div>
  );
}

export const Center = styled.div`
  box-sizing: content-box;
  margin-inline-start: auto;
  margin-inline-end: auto;

  max-inline-size: 60ch;
`;

, but instead of being based on the physical properties of the screen, it is based on the writing mode.

Hopefully, when you saw that we were setting the inline margin and max-inline-size, you will have asked, "Hey, I thought setting the margin or size properties directly on a component was breaking the first rule of Encapsulated CSS?" And yes, you would be right. It does break the rule, but what we are doing in the above code still follows the "spirit" of the rule.

Let me explain. In this code, we are setting the 

. This means that any time we constrain the size, like with 

 level of the box model. In other words, setting the 

 is effectively setting the max-inline-size on its child.

---
title: Automatically Center Text DIVs with React Center Component
slug: center-component
description: In this lesson, we will be creating a Center layout primitive that centers itself and its children.
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/5whvnnzjtn
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/travis-waith-mair-composing-layout-in-react-app/-/tree/main/module_04/lesson_02
---

Before adopting CSS, the styling of a web page was achieved primarily through the use of presentational tags. To change the font, alignment, color, or other visual properties, one had to compose the correct tags and attributes together. If you want to read an excellent summary of the early days of web layout, I would highly recommend checking out the [web layout history](http://grid-layout.com/history.html) over at grid-layout.com.

These presentational tags were eventually dropped in favor of CSS for a few reasons, the biggest being the desire to separate content and presentation. HTML would therefore focus exclusively on providing semantic meaning to content, while CSS would focus on visual structure and styling. Interestingly enough, the one presentational tag that seemed to live long past its deprecation was the `center` tag. Google still used the `center` tag on its home page as late as 2020.

In this lesson, we will be creating a Center layout primitive that centers itself and its children.

## The problem: the Testimonial

In this lesson, we will be creating this Testimonial component:

![Testimonial red lines](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_04/lesson_04.02/public/assets/center-red-line.png)

The above component will need to have a max-inline-size of `60ch` and center itself in any parent container larger than that width. The component should also be able to center its children and text.

## The solution

Like always, [you can follow along by going to the codesandbox.io starter project](https://codesandbox.io/s/the-testimonial-starter-c3uqs?file=/src/Testimonial.jsx).

Here is how our code starts out:

```jsx { actualFilename=./protected/center-0.js endLine=17 startLine=5 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_04/lesson_04.02/protected/center-0.js#L5 }
export default function Testimonial() {
  return (
    <div>
      <h2>Home4Hire</h2>
      <p>
        "Lorem ipsum dolor sit amet, nibh lorem convenire quo et. Usu ea libris
        omittantur. Dicta theophrastus ad mei. Dicat appetere at vis, qui ne
        scripta docendi."
      </p>
      <Attribution />
    </div>
  );
}
```

And this is how it looks:

![Testimonial step-0](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_04/lesson_04.02/public/assets/center-0.png)

First, let's build our Center primitive:

```jsx { actualFilename=./protected/center-1.js endLine=12 startLine=6 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_04/lesson_04.02/protected/center-1.js#L6 }
export const Center = styled.div`
  box-sizing: content-box;
  margin-inline-start: auto;
  margin-inline-end: auto;

  max-inline-size: 60ch;
`;
```

In the above code, we set the `box-sizing` to be `content-box`, the inline margin to be `auto`, and the `max-inline-size` to be `60ch`. You will remember from Module 1 that `max-inline-size` is the [CSS logical property variation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties) of `max-width`, but instead of being based on the physical properties of the screen, it is based on the writing mode.

Hopefully, when you saw that we were setting the inline margin and max-inline-size, you will have asked, "Hey, I thought setting the margin or size properties directly on a component was breaking the first rule of Encapsulated CSS?" And yes, you would be right. It does break the rule, but what we are doing in the above code still follows the "spirit" of the rule.

Travis Waith-Mair

What's up guys? Travis here with another lesson in Composingly Outstanding

In this lesson we are going to talk about the center.

Before adopting CSS, studying on the web was achieved primarily through present

For example, to change the font, the alignment, the color, or any other visual

had to compose the correct tags and attributes together to achieve the desired

If you want to read an excellent summary of the early days of the web layout, I

highly recommend checking out the web layout history over at grid-layout.com.

These presentational tags were dropped in favor of CSS for a few reasons, the

being the desired separate content and presentation.

HTML would therefore focus exclusively on providing semantic meeting to content

CSS would focus on visual structure and styling.

Interestingly enough, the one presentational tag that seemed to live way long

In fact, Google still used the center tag on its homepage as late as 2020.

In that vein, in this lesson we are going to be creating the center layout

In this lesson we are going to be creating a testimonial component.

In this testimonial component we will need to have a max inline size of 60CH

will need to center itself within its parent container.

The component should also be able to center its children and text.

Like always, there is a link in the notes below where you can follow along with

We are going to be importing an attribute from testimonial parts.

I did not want to focus on getting this laid out correctly, but we just want to

If you want to see how it is implemented, you can always go and look at it.

We are starting off with this testimonial component.

Now we need to just build our center primitive.

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

Let's create our center equals styled.div.

In fact, with the magic of copy and paste, let's just put that in here.

What we are doing here is setting the box sizing back to content box.

Remember, with the CSS reset, we reset that to border box.

Then we are setting the inline start and inline end margin to auto.

Don't worry about this part, we are going to make this configurable in a moment

We are actually going to leave this hard coded as auto.

I know a bunch of you are going to say to me, wait a minute, you spent a whole

The first rule was we do not set it, a component doesn't set its own margin.

All it has to do with this, changing back to the content box.

Now by setting the box sizing content box, that means this width that we are

here, everything to do with the size of this component is going to be based off

Even if we add padding or border, this size, I mean this size that we set here

That means the margin will be based off of that as well.

It is effectively putting a wrapper, a box around all the content and putting a

All rules are meant to be broken sometimes.

The important thing to understand is why you are breaking the rules.

We are breaking them for a very specific purpose here so that we have a

What auto means is that we are going to say, hey browser, we are going to let

If the parent component that the center is using is less than the value that we

there won't be any margin applied anyway.

As the parent component grows larger than this value that we set here, then

available space that is available to it will be equally applied on both the

This will apply in all contexts no matter whether it is being used in normal

Some of you who are familiar with margin know of the shortcut where you can go