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

In the last lesson, we made a grid to lay our elements out on. In this lesson, we are making a responsive grid 

In this lesson, we are going to build out the following widget:

Like always, we need consistent gutters between elements. However, this time we need a fluid grid with column tracks at least 

 wide but which can be wider if space is available.

As always, let's start with our basic markup, and 

you can follow along with this starter at codesandbox.io

export default function ContactList() {
  return (
    <div>
      <Card />
      <Card />
      <Card />
      <Card />
      <Card />
      <Card />
      <Card />
    </div>
  );
}

Given the requirement that we need to fit in as many cards per row as we can, while maintaining a minimum width, we can't use our Columns primitive. Luckily we can adapt the Columns primitive slightly to make our new primitive:

const Grid = styled.div`
  display: grid;
  gap: ${(props) => spacingMap[props.gutter] ?? spacingMap.lg};

  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
`;

Just like in the Columns primitive, we are using the 

 function. However, instead of a number, we are using the keyword 

 allows us to defer to the browser how many column tracks to use based on the quantity and size constraints.

This brings us to the size value. Instead of simply using 

, like in the Columns primitive, we use the 

 function. This function allows us to set a lower and upper bound without specifying the value itself, by passing in the lower bounds number, followed by the upper bounds number: 

. For example, if you wanted a value that was no less than 

 function is useful when you don't care what the value is, just as long as the value is no less than the lower bounds number and no higher than the higher bounds number.

In the above code, we have a lower bounds value of 

, which means each column track cannot be smaller than 

, which we learned in the last lesson means one fraction of available space. This will let each track take up 

 of available space or in other words, each column track will grow equally to take up all available space. We could put 

 and it would work the same. This is because, as we learned when making the 

. Effectively, the available space is divided into four parts and one part goes to the first track and the remaining three goes into the second track. In the code above, each track will have the same upper-bound fractional value, which means they will all grow equally.

To use the Grid primitive, it looks like this:

---
title: How to Build a React Responsive Grid Layout
slug: grid-component
description: 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.
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/hldcbkd3ma
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/travis-waith-mair-composing-layout-in-react-app/-/tree/main/module_03/lesson_04
---

In the last lesson, we made a grid to lay our elements out on. In this lesson, we are making a responsive grid **of** elements.

## The problem: the Contact Grid List

In this lesson, we are going to build out the following widget:

![Contact list mockup](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_03/lesson_03.04/public/assets/grid-red-line.png)

Like always, we need consistent gutters between elements. However, this time we need a fluid grid with column tracks at least `24rems` wide but which can be wider if space is available.

## The solution

As always, let's start with our basic markup, and [you can follow along with this starter at codesandbox.io](https://codesandbox.io/s/grid-example-starter-83m5i?file=/src/Grid.js):

```jsx { actualFilename=./protected/grid-0.js endLine=16 startLine=4 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_03/lesson_03.04/protected/grid-0.js#L4 }
export default function ContactList() {
  return (
    <div>
      <Card />
      <Card />
      <Card />
      <Card />
      <Card />
      <Card />
      <Card />
    </div>
  );
}
```

Which looks like this:

![Contact list step 0](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_03/lesson_03.04/public/assets/grid-0.png)

Given the requirement that we need to fit in as many cards per row as we can, while maintaining a minimum width, we can't use our Columns primitive. Luckily we can adapt the Columns primitive slightly to make our new primitive:

```jsx { actualFilename=./protected/grid-1.js endLine=12 startLine=7 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_03/lesson_03.04/protected/grid-1.js#L7 }
const Grid = styled.div`
  display: grid;
  gap: ${(props) => spacingMap[props.gutter] ?? spacingMap.lg};

  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
`;
```

Just like in the Columns primitive, we are using the `repeat` function. However, instead of a number, we are using the keyword `auto-fit`. Using `auto-fit` allows us to defer to the browser how many column tracks to use based on the quantity and size constraints.

This brings us to the size value. Instead of simply using `1fr`, like in the Columns primitive, we use the `minmax` function. This function allows us to set a lower and upper bound without specifying the value itself, by passing in the lower bounds number, followed by the upper bounds number: `minmax(LOWER, UPPER)`. For example, if you wanted a value that was no less than `100px` and no larger than `300px`, then you would write `minmax(100px, 300px)`. The `minmax` function is useful when you don't care what the value is, just as long as the value is no less than the lower bounds number and no higher than the higher bounds number.

In the above code, we have a lower bounds value of `24rems`, which means each column track cannot be smaller than `24rems` wide. For the upper-bound we are using `1fr`, which we learned in the last lesson means one fraction of available space. This will let each track take up `1fr` of available space or in other words, each column track will grow equally to take up all available space. We could put `2fr` or `100fr` and it would work the same. This is because, as we learned when making the `Split`, `fr` units work in ratios. To create a `1/4` fractional split, we used `1fr 3fr`. Effectively, the available space is divided into four parts and one part goes to the first track and the remaining three goes into the second track. In the code above, each track will have the same upper-bound fractional value, which means they will all grow equally.

Travis Waith-Mair

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

In this lesson we are going to learn about the grid.

In the last lesson we made a grid to layer elements out on.

In this lesson we are going to make a responsive grid of elements.

In this lesson we are going to build out the following widget.

It's a list of contacts that are laid out on a grid.

Like always we need consistent gutters between the elements.

However, this time we need to build a fluid grid with column tracks that are at

But it can be wider if there is space available.

Once again we are in another code sandbox IO project and there is a link to it

notes below if you want to click and follow along.

Let's start off by just getting a basic grid working here.

This is a card component that we have built here.

You can look at it and see if you want but it is a default.

We are going to call this just card from card.

And then let's copy and paste the rest of this code.

So basically we have a bunch of these cards that have their names, emails, so

And what we are looking to do is just get these cards to be a minimum value and

So we are going to create something called a grid.

So we are going to import styled components.

And I know we are going to need our spacing map from spacing map.

So first of all we are going to want to do display grid.

And we are going to want to do, in fact let's just copy and paste this.

And now we are going to get our gutters in there that we want.

In the columns component where we did our grid template columns.

We did a repeat function and we said something like 6, 1, F r units.

Well there is another available option here.

Instead of just repeating 6 times we can say auto fit.

And this says okay browser I am going to let you decide how many columns there

Instead of me telling you I will let you figure out the best way to make that

Now since we only gave it a single value it is only going to create, it is

auto fit everything to be 1 F r and just do one column.

But we can take advantage of something else.

In this case it is a function called min max.

And it basically gives two different thresholds.

So the minimum width that it needs to be.

So in this case we are going to say 24 RAM.

And then we are going to give an upper threshold of 1 F r.

So basically this will auto fit everything as long as it is at least 24 RAMs.

But no more than 1 F r which is just a column.

And the browser is going to come in here and try to fit as many columns as it

Now you can use anything as your constraints.

You just need to have the first value be your lower threshold and the second

It typically works best if one of these is some type of variable amount.

So that way it can grow or shrink to any amount depending on what is going on.

So you can do something like 45% or something like that.

And you can see it is capping out everything at 45%.

But it is making it grow up to that point.

But it works really great with these fractional units because then they can

So as you can see here like this is working pretty much how we want.

As we get wider it will put more columns.

And as we get narrower it will take up less columns until it finally stacks

So really all we need to do now is let's make this value right here variable.

And just to make it a little easier we are going to take the magic of copy and

And now what this is doing is we are saying hey give me the minimum item width

gets passed in we are going to use that as the lower threshold.

But if no value is given we are going to use 320 pixels.

It is kind of a standard mobile phone size.

So that way it will always be at least 320 pixels wide.

But let's go ahead and let's add a little bit bigger gutter.

And let's go ahead and use that 24 rem and set it explicitly here.

Let's see exactly what the design wanted.