Reflexbox is part of Rebass UI React components. These components are built for styled systems like Emotion, that we are using in this series. We are going to use just the Reflexbox part of Rebass, and Reflexbox is - "Ergonomic, responsive React layout and grid system" - as it's written in their documentation.

We are using it so that we don't need to polute our Next.js pages with unnecessary CSS just to layout our components. But you can of course use Reflexbox even inside your components, if you really need and want to. 

As you will see Reflexbox is very powerfull and flexible, and can be used on any React based project that uses styled system.

In this episode we are going to learn how to layout your React components using Reflexbox.

Layouts With Reflexbox

In this episode I'm going to show you how to create a classic layout with header, footer, one third of a sidebar and two thirds of main content using CSS Grid. After we create this layout, we are going to create a post list with one feateured post and several post around and below it.

As you will see creating something like this using CSS Grid is much easier than using something like Flex Box or regular floats.

In this mini series we are going to take a look at how we can make popular layouts that you find around the web and create them using CSS Grid.

Tutorials tagged with: layouts

Get in touch