How to achieve layout composition in React

Rate this content

Using CSS in this age of components is difficult. Many tools have been created to help us with this problem, but they all fall short in the one problem that tooling can never solve: Which component should be in charge of which styles? In this talk, we will go over strategies on how to build layouts in a composable way.

8 min
21 Jun, 2022


Sign in or register to post your comment.

AI Generated Video Summary

This talk discusses achieving layout composition in React using Bedrock Layout Primitives. By componentizing CSS layout, complex layouts can be achieved and reused across different components. The talk also covers the challenges of achieving complex layouts, such as card lineups, and provides solutions for maintaining alignment and responsiveness. The BedrockLayout primitive library simplifies web layouts and offers flexibility in composing layouts.

1. Achieving Layout Composition in React

Short description:

Hello, React Summit! In this talk, I will discuss achieving layout composition in React using Bedrock Layout Primitives. By componentizing CSS layout, we can create layout primitives like stack, inline, split, cover, and frame. These components can be combined to achieve complex layouts, and can be reused across different components. The BedrockLayout primitive library simplifies web layouts and offers flexibility in composing layouts. Check out for more information.

Hello, React Summit, and welcome to my talk on how to achieve layout composition in React. My name is Travis Waithmer, and you can find me at Twitter, at Travis Waithmer, all in my account on Canvas, or on my blog at

Now, a little bit about myself, I work for Plex, which is an online streaming platform that allows you to stream both your video from your personal media as well as video on demand that we curate for you. And we're hiring, of course, slash careers. I'm also the creator and maintainer of Bedrock Layout Primitives. It's a layout library designed to make your React apps easier to layout on the web. And that's the point of this talk, how do we achieve layout composition? How do we use React's composition model in our web layout?

Well, let's look at this hero layout. This is probably something all of us have made some time in our career. Now, a naive way to approach this is to approach this at the component level. We have a hero container, we have a hero top, left, right, and so on. And this is the way we're taught to write our CSS, from the top down, with an exception-based approach. Now, this, unfortunately, gets really hard to scale across our applications, so we start reusing our components. Now, we can have CSS methodologies that assist us, but they only get us so far. They help us manage our style sheets at scale, but when we approach each component and, specifically, the layout of each component, as something unique, we're missing a fantastic opportunity for layout reuse. So what if I told you CSS layout could be componentized? What if we created some layout primitives? For example, what if we had a stack component that stacked things on top of each other? An inline that put things in line with spaces in between? A split component that split things from just the left and the right-hand side, evenly across the parent's width? What if we had a cover component that covered an area and vertically-centered the children inside? And a frame component that took things like media, or images, or any of its children and forced it into an aspect ratio? Now, these individually can only do one unique thing each. But when we put them together, we can achieve that same hero layout. We can have an inline, a couple stacks, a cover, frame, split. Through careful composition, we've now achieved that hero layout. But that's not all. We can put it under JSX like this and just use the React composition. And then we can go ahead and use that in our other components, such as a signup form, a blog post feed, a feature page. All of these can use those same exact components, those same exact layouts, but just composed in different ways to achieve their individual layouts. And that's exactly what the BedrockLayout primitive library is designed to do. It's the low dash of web layouts. We can then take... And if you want to find out more, it's at But let's take, for example, just a simple stack component. We probably all have something like this, where we need to put some consistent spacing on top of other items. Well, using just one of the layout components from Bedrock, the stack, for example, we can achieve this subscribe component. Now, another common pattern is we need to do things kind of like the way our paragraph works on the web.

2. Achieving Complex Layouts in React

Short description:

Whereas we run out of room, our words will automatically wrap to the next row according to the justification that we set. The inline cluster component comes in handy for inline content that automatically wraps. For more complex layouts like a card lineup, we need to ensure that each card takes up the full height of the row, while maintaining aligned images and headings. The description should always be vertically centered. Images should maintain an aspect ratio and be cut off if necessary. Cards should be in a responsive grid with a minimum column width, wrapping and adjusting columns as needed.

Whereas we run out of room, our words will automatically wrap to the next row according to the justification that we set. So that's where the inline cluster component comes in handy. We can have things inline. But as we run out of room, it will automatically wrap according to the justification.

And here's what that looks like in code. We have our menu component that obviously composes that right-hand side inside of it. And we just use an inline cluster to put all of our navigation items in a row, and then they will cluster once the width doesn't allow it to all stay in one single row.

So what about something much more complicated like a card lineup? This seems pretty simple at first, but there's some gotchas to this. Each one of these cards needs to take up the full height of the row that it's in, but the image and headings for all the cards need to line up. But the description, no matter how big or small, needs to still be vertically centered inside each of these cards.

Now besides that, all the images need to maintain an aspect ratio, and the images need to be cut off to maintain that aspect ratio. And then finally, each of these cards needs to be in a responsive grid, they need to maintain a minimum column width, and if they can't maintain that column width and keep them all in the same row, we need to start wrapping in and adjusting the columns accordingly.

So in the code, we could write our card component using a cover, which allows us to specify the top and the bottom. In this case, the top is an h3 and the bottom is using a frame component to force the aspect ratio to be at a 16 by 9, and then we have our description which will be vertically centered inside that cover. And then we're setting that height to be 100% so that way it will always be the full height of the row that it's in. And then we will use all these cards inside of a grid and we can set the minimum item width to 40 ch so that way the columns will be as wide as they possibly can to get everything inside. But if they can't fit them all in and without having at least a 40 ch column, it will then start wrapping and optimize that.

Now that's all the time I have for you today. You can check out more at or you can go to my course over at where I teach you more about composing layouts in React.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit 2022React Summit 2022
17 min
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
There are many ways of authoring components in React, and doing it right might not be that easy, especially when components get more complex. In this talk, you will learn how to build future-proof React components. We will cover two different approaches to building components - Composition and Configuration, to build the same component using both approaches and explore their advantages and disadvantages.
TestJS Summit 2022TestJS Summit 2022
25 min
CCTDD: Cypress Component Test Driven Design
The first part of the talk will focus on a variety of patterns when using Cypress Component Testing and TDD to create React components. The code samples will be from Angular's Tour of Heroes to make the content relatable to a wider community. Currently I am working on a GitBook rewriting it in React using Cypress Component Tests, there should be plenty of content to distill into the talk.
The second part of the talk will focus on test strategies, types of testing and where to apply them, and finally compare
contrast them to the familiar industry approaches.
We will finish with key takeaways, sample application repos to help with learning, and rollout strategies.
React Summit 2022React Summit 2022
20 min
Find Out If Your Design System Is Better Than Nothing
Building a design system is not enough. Your dev team has to prefer it over one-off components and third-party libraries. Otherwise, the whole effort is a waste of time. Learn how to use static code analysis to measure if your design system wins over the internal competition and data-driven ways to improve your position.

Workshops on related topic

React Summit 2022React Summit 2022
147 min
Hands-on with AG Grid's React Data Grid
Get started with AG Grid React Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you'll learn a powerful tool that you can immediately add to your projects. You'll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created an AG Grid React Data Grid and customized with functional React components.
- Getting started and installing AG Grid
- Configuring sorting, filtering, pagination
- Loading data into the grid
- The grid API
- Using hooks and functional components with AG Grid
- Capabilities of the free community edition of AG Grid
- Customizing the grid with React Components
TypeScript Congress 2023TypeScript Congress 2023
131 min
Practice TypeScript Techniques Building React Server Components App
In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities.
During the workshop, you will:
- Maximize code maintainability and scalability with advanced TypeScript practices
- Unleash the performance benefits of React Server Components, surpassing traditional approaches
- Turbocharge your TypeScript with the power of Mapped Types
- Make your TypeScript types more secure with Opaque Types
- Explore the power of Template Literal Types when using Mapped Types
Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications.
Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.
React Summit 2023React Summit 2023
31 min
From Idea to Production: React Development with a Visual Twist
Join us for a 3-hour workshop that dives into the world of creative React development using Codux. Participants will explore how a visually-driven approach can unlock creativity, streamline workflows, and enhance their development velocity. Dive into the features that make Codux a game-changer for React developers. The session will include hands-on exercises that demonstrate the power of real-time rendering, visual code manipulation, and component isolation all in your source code.
Table of the contents: 
- Download
Setup: Getting Codux Ready for the Workshop
- Project Picker: Cloning and Installing a Demo Project
- Introduction to Codux Core Concepts and Its UI
- Exercise 1: Finding our Feet
- Break
- Exercise 2: Making Changes While Staying Effective
- Exercise 3: Reusability and Edge Case Validation
- Summary, Wrap-Up, and Q
React Summit 2022React Summit 2022
98 min
Crash Course into TypeScript for content from headless CMS
In this workshop, I’ll first show you how to create a new project in a headless CMS, fill it with data, and use the content in your project. Then, we’ll spend the rest of time in code, we will:
- Generate strongly typed models and structure for the fetched content.
- Use the content in components
- Resolve content from rich text fields into React components
- Touch on deployment pipelines and possibilities for discovering content-related issues before hitting production
You will learn:
- How to work with content from headless CMS
- How content model can be leveraged to generate TS types and what benefits it brings to your project
- How not to use string literals for content in code anymore
- How to do rich text resolution into React components
- How to minimize or avoid content-related issues before hitting production