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

Images on the web are surprisingly tricky. A whole course could be devoted to best practices for images on the web, but from a layout point of view, one of the more difficult parts to deal with is the size and aspect ratio. The images we use are rarely the same size and aspect ratio as our web page's design. This problem is compounded by the need to support multiple viewports that our image will need to load. We typically deal with the size issue by making the image size responsive - we can set the 

However, dealing with aspect ratios is not as simple. Images have an intrinsic aspect ratio based on the actual width and height of the image file. If we try to force the image into a box of a different aspect ratio, then the image becomes skewed and deformed.

We need a way to not just control the size, but also the aspect ratio, by cropping the image where it is too tall or too wide for the aspect ratio we need.

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.

In this lesson, we are going to build a "New Arrivals" card, like this:

In the above widget, the image is cropped at a 1:1 aspect ratio, or in other words, a square. It also needs to be responsive to the size of the parent container by growing or shrinking accordingly.

You can follow along at the starter project over at codesandbox.io

function NewArrivals() {
  return (
    <div>
      <img src={shirt} alt="" />
      <Details>Ella Blouse - $35.99</Details>
    </div>
  );
}

So let's start building our Frame primitive:

const Frame = styled.div`
  position: relative;

  width: 18rem;
  height: 18rem;

  > * {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }

It may seem like a lot is going on here, but it isn't. First, we are setting the Frame primitive to have a 

 position and setting the width and height to 

Next, we are selecting all the direct children, setting the position to be 

 properties to 0. Zero is one of those unique values in CSS that you never have to give the unit of. That is because zero of any unit, be it 

, will always still be zero. The value you set to each of these properties is how much you want to offset from the 

, for example. By setting these properties to zero, we are effectively pinning the children to the outer div element, ensuring the child will be the same size as the outer div that is wrapping the image. Then we are setting the 

 to force any media object to fit in the box.

 tag with our Frame primitive, like this:

function NewArrivals() {
  return (
    <div>
      <Frame>
        <img src={shirt} alt="" />
      </Frame>
      <Details>Ella Blouse - $35.99</Details>
    </div>
  );
}

And our New Arrivals component looks like this:

We have a square now, but the image is distorted as we've forced it into a square box. The image is also too small in this view. In other views it will be too large. What we need is a way to keep the aspect ratio, without hard-coding the size itself.

---
title: Resize Images And Maintain Aspect Ratio in React and CSS
slug: frame-component
description: 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.
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/8eyyrj0u3h
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/travis-waith-mair-composing-layout-in-react-app/-/tree/main/module_04/lesson_03
---

Images on the web are surprisingly tricky. A whole course could be devoted to best practices for images on the web, but from a layout point of view, one of the more difficult parts to deal with is the size and aspect ratio. The images we use are rarely the same size and aspect ratio as our web page's design. This problem is compounded by the need to support multiple viewports that our image will need to load. We typically deal with the size issue by making the image size responsive - we can set the `max-width` of the image to `100%`, which we did in our CSS Reset.

However, dealing with aspect ratios is not as simple. Images have an intrinsic aspect ratio based on the actual width and height of the image file. If we try to force the image into a box of a different aspect ratio, then the image becomes skewed and deformed.

We need a way to not just control the size, but also the aspect ratio, by cropping the image where it is too tall or too wide for the aspect ratio we need.

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.

## The problem: the New Arrivals

In this lesson, we are going to build a "New Arrivals" card, like this:

![New arrivals red-line](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_04/lesson_04.03/public/assets/frame-red-line.png)

In the above widget, the image is cropped at a 1:1 aspect ratio, or in other words, a square. It also needs to be responsive to the size of the parent container by growing or shrinking accordingly.

## The solution

Here is how our code starts out. [You can follow along at the starter project over at codesandbox.io](https://codesandbox.io/s/new-arrivals-forked-nmugp?file=/src/NewArrivals.jsx):

```jsx { actualFilename=./protected/frame-0.js endLine=15 startLine=8 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_04/lesson_04.03/protected/frame-0.js#L8 }
function NewArrivals() {
  return (
    <div>
      <img src={shirt} alt="" />
      <Details>Ella Blouse - $35.99</Details>
    </div>
  );
}
```

And this is how it looks:

![New arrivals step-0](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_04/lesson_04.03/public/assets/frame-0.png)

So let's start building our Frame primitive:

```jsx { actualFilename=./protected/frame-1.js endLine=24 startLine=9 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_04/lesson_04.03/protected/frame-1.js#L9 }
const Frame = styled.div`
  position: relative;

  width: 18rem;
  height: 18rem;

  > * {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
```

It may seem like a lot is going on here, but it isn't. First, we are setting the Frame primitive to have a `relative` position and setting the width and height to `18rem`. These settings will give us an `18rem` by `18rem` square box.

Next, we are selecting all the direct children, setting the position to be `absolute`, and setting the `top`, `bottom`, `left`, and `right` properties to 0. Zero is one of those unique values in CSS that you never have to give the unit of. That is because zero of any unit, be it `rem`, `px`, or `vw`, will always still be zero. The value you set to each of these properties is how much you want to offset from the `top` or `bottom`, for example. By setting these properties to zero, we are effectively pinning the children to the outer div element, ensuring the child will be the same size as the outer div that is wrapping the image. Then we are setting the `width` and `height` to be `100%` to force any media object to fit in the box.

Now we just need to wrap our `img` tag with our Frame primitive, like this:

```jsx { actualFilename=./protected/frame-1.js endLine=36 startLine=27 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_04/lesson_04.03/protected/frame-1.js#L27 }
function NewArrivals() {
  return (
    <div>
      <Frame>
        <img src={shirt} alt="" />
      </Frame>
      <Details>Ella Blouse - $35.99</Details>
    </div>
  );
}
```

And our New Arrivals component looks like this:

![New arrivals step-1](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_04/lesson_04.03/public/assets/frame-1.png)

Travis Waith-Mair

Travis here with another lesson in composing layouts in React.

This lesson we are going to learn about the frame component.

Images on the web are surprisingly tricky.

A whole course can be devoted to best practices for images on the web.

But from a layout point of view, one of the more difficult parts to deal with

The images we use are rarely the same size or aspect ratio as the web page

The problem is compounded by the need to support multiple viewports that our

We typically deal with the size issue by making the image size responsive,

setting the max width of the image to 100%, which is what we did in our CSS

However, dealing with aspect ratios is not as simple.

Images have an intrinsic aspect ratio based on the actual width and height of

If we try to force an image into a box of a different aspect ratio, then the

What we need is a way to not just control the size, but also the aspect ratio

the image where it is too tall or too wide for the aspect ratio that we need.

In this lesson we will be building the frame primitive, which frames out visual

in the image or video and forces it into the aspect ratio needed for the design

In this lesson we are going to be building a new arrivals card like this.

In the above widget, the image is cropped at a one by one aspect ratio or

It will also need to be responsive to the size of the parent container by

Once again, you can follow along in the link below.

What we are going to do now, we have got this new arrival.

This is where we are going to do all of our work and it is being exported

grid so we can have multiple new arrival objects.

This image of the shirt is in this public folder under assets.

There is this details which is where we are getting this aliblouse $35.99

It is not really important for what we are doing in this course.

Let's go ahead and start building our frame.

We are going to import styled from styled components.

I forget to bring in that final backtake.

Let's go ahead and put it around our image and then we will talk about what is

What we have here is this outer div, this frame is being set as a position

This is not a long term solution because as we move around, we want this to be

We are going to set this with an height to change.

We are going to set it for that way for now.

What we are doing inside here is saying all the direct children, which is this

we are going to set it as position absolute.

We are going to set top, bottom, left and right to zero.

That is going to pin the object to all the sides of this outer frame here.

We are going to set that as 100% and 100% for both.

This is especially for image and video tags.

We need that little extra setting here to force the image to live inside of

The reason why we don't have to put any units on this is because zero is always

It is zero rem, view heights, pixels, whatever.

Those are one of those unique things in CSS that you can just put zero and you

Now we have this put inside this box, but now we have distorted the image to

We are going to tackle a couple of different things here.

First thing we are going to tackle is setting the aspect ratio.

Instead of hard coding this with an height to be 18 rems, let's just set an

and let the browser decide how big, how tall and how wide it should be.

The good news is there is a property that is available called aspect ratio.

Let's say you wanted a 16 by 9 aspect ratio and you can set it just like that.

You know me setting this aspect ratio, I am going to get rid of that.

If we look at can I use this aspect ratio is available in Chrome and Edge and