Create a Responsive Grid With React, Flexbox & Styled-Components

There are a ton of CSS frameworks out there: Bootstrap, Foundation, Materialize. Do you know what all of these have in common? Responsive grid systems! And do you know what else? One massive load of unnecessary shite.

With the creation of flexbox & powerful frontend frameworks like React, there is literally no reason to use CSS frameworks anymore. You don’t need all that stuff.

If you know how to write your own responsive grid, you’ll be able to implement only what you need. Furthermore, you can make it exactly the way you want, with any tweaks or additions. Heck, you can name your Grid component <MargaretThatcher /> if you like. The possibilities are endless.

Spend some time today seeing how easy it is to build a basic responsive grid with react, flexbox & styled-components. By the end of this short piece, you’ll be able to create complex grids with whole sections that can collapse & re-appear depending on your screen size. I guarantee you’ll pee your pants with excitement, and if you don’t, I’ll pee them for you.

Let’s go.

Pre-requisites

Basic understanding of React

I won’t be going over how to create a component, pass props or anything like that.

Basic understanding of CSS

I will explain some Flexbox stuff but not how to create a CSS file or add a border.