Composing Layouts in React

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.

  • 4.9 / 5 (10 ratings)
  • Published
  • Updated
On demand video

4 hrs 52 mins

Video Lessons

25 Videos

Course Instructor
Avatar Image

Travis Waith-Mair

👋 Hi! I'm Travis Waith-Mair. I am a senior front-end developer and the creator of the Bedrock Layout Primitives,, a library of components designed to make layout composition easier.

I am also the author of The newline Guide to Composing Layouts in React here at newline.

How The Course Works


You can take the course from anywhere in the world, as long as you have a computer and an internet connection.


Learn at your own pace, whenever it's convenient for you. With no rigid schedule to worry about, you can take the course on your own terms.


Join a vibrant community of other students who are also learning with Composing Layouts in React. Ask questions, get feedback and collaborate with others to take your skills to the next level.


Learn in a cohesive fashion that's easy to follow. With a clear progression from basic principles to advanced techniques, you'll grow stronger and more skilled with each module.

Course Overview

What you will learn
  • 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

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.

Our students work at


Sample Course Lessons

Course Syllabus and Content

Module 1


1 Lesson 2 Minutes

Module 5

Composing Layouts in Practice

5 Lessons1 Hours 16 Minutes

What Students are Saying

        Meet the Course Instructor

        Travis Waith-Mair

        Travis Waith-Mair

        👋 Hi! I'm Travis Waith-Mair. I am a Senior Frontend Developer and the creator of the layout library, Bedrock Layout Primitives. I am passionate about CSS layout and look forward to teaching you the same skills that I learned to build this library.

        Purchase the course today

        One-Time Purchase

        Get lifetime access to this course

        $39$49$10.00 off
        Composing Layouts in React
        • Discord Community Access
        • Full Transcripts
        • Money Back Guarantee

        newline Pro Subscription


        Get unlimited access to the course, plus 60+ newline books, guides and courses. Learn More

        Composing Layouts in React

        Billed annually or $30/mo billed monthly. Free to cancel anytime.

        • Discord Community Access
        • Full Transcripts
        • Money Back Guarantee


        • Unlimited access to 60+ newline Books, Guides and Courses
        • Interactive, Live Project Demos for Every newline Book, Guide and Course
        • Complete Project Source Code for Every newline Book, Guide and Course
        • Best Value 🏆

        Frequently Asked Questions

        Who is this course for?

        Composing Layout in React is for both novice and experienced developers who want to take their layout skills to the next level

        What if I need help?

        You can ask us questions anytime through the community Discord channel, #composing-layouts-in-react, or by sending us a message.

        Composing Layouts in React