React Flexbox Grid

Posted onby admin

To be fair, grid frameworks tend to be fairly robust, and plenty of teams find success in having predefined classes and recipes for building any type of grid they need. If you’re interested in leaning on a grid framework that is flexbox specific, here’s a few I know about: Frow, Flexbox Grid, and Gridlex. React Flexbox Grid is a set of React components implementing flexboxgrid with the power of CSS Modules.

Web development technology is fast moving and constantly evolving and seems every time you blink, some new framework has been created. In this article I’ll focus on getting started with React Flexbox Grid. Note that this is not a full fledged tutorial nor a description of flexbox; if that’s what you are looking for then you should check out Chris Coyier’s fantastic write-up: A Complete Guid to Flexbox. The goal of this article is to allow you to quickly get up to speed with react-flexbox-grid and then explore more on your own, or join the RedBit team and we’ll help you!

The code for this tutorial can be found here, while a working copy of the final result can be found here.

Introduction

If you’ve been a front end developer for any time at all on a team with a designer, you’ve inevitably been handed an image like the one below and told to make it come to life for the web.

Easy, right? … a couple floats here, maybe a media query here and there… and soon you’ve got a few hundred lines of css, thinking: there has to be an easier way.

React flexbox grid tutorial

Well, if you’re already using react, there is…

react-flexbox-grid

From the react-flexbox-grid site, the library is described as “a set of React components that implement flexboxgrid.css” In this tutorial, we will use this library to implement the example design above.

Coding the Design

To help things along, I’ve created two sample components for us to place around the screen for different screen sizes:

Field:

Hero:

Understanding the Basics

When using react-flexbox-grid, you will deal with three components:

Grid: The base component that will wrap everything else.

Row: Rows within the grid.

Col: Columns within the grid.

The simplest example would be a one row, one column grid:

CODE: https://gist.github.com/barranger/51169f81d9e8d4bffac67eb3f53dd83e.js

Column Sizing

In this (overly) simple example, notice the attribute on the Col element: xs={12}. This determines how many columns (out of twelve) that this column should take up on extra small (xs) screens. The four supported screen sizes are:

lg – 75em (most often 1200px) and up

md – 64em (most often 1024px) to 74em

sm – 48em (most often 768px) to 63em

xs – up to 47em

Mobile First

While this may come across as a bit of a buzz phrase, we will be starting with mobile and moving our way up. Due to the way that the library is written (and more specifically the way that media queries are based on a minimum width), starting with desktop will cause nothing but headaches.

So given that, let’s finally get down to coding, beginning with the mobile page.

React Flexbox Grid


The code for the mobile page is actually quite simple: we wrap each Card in a Row component, then wrap the Hero and six Field components in Col components. Since we are only dealing with mobile, we can set only the xs attribute and be on our way. The code would look like this:

CODE: https://gist.github.com/barranger/901187e3d50e310fe541d134ae6f62f2.js

Tablet Size

Notice that the code in the previous section does not respond to different screen sizes at all, indicating that the layout will be of terrible quality on larger displays. We’ll update the code to match the design for Tablet-sized screens first. Looking at the design, the fields should be arranged in two rows of three columns, with the Hero component off to the right.

Since we are dealing with a 12 column grid, we should be able to set the column size to 4 (12/3 = 4) and it the library will take care of the rest for the fields.

If you run it now, you’ll notice that we didn’t handle the hero image. In order to do this, we will have to nest the Rows and Cols. Let’s divide the Card into two sections, one for the Hero component and one for the rows of Field components. The resulting code should look like this:

CODE: https://gist.github.com/barranger/7fa6c77e42b998bd98867b05a2cf75ed.js

While this looks much closer to the design, you should notice a visual bug right away, the Hero Image is on the wrong side. We could fix the issue by simply moving the image to the end of the parent row… but then the Hero would be at the bottom of the mobile view.

Reordering attributes to the rescue!

react-flexbox-grid has more than the basic column width attributes to help with your layout needs. The one that we’ll use here is Reordering. What this feature allows us to do is specify that the first column of the parent row should be first on mobile, but last for all other page sizes. Unsurprisingly, these attributes are named first and last, respectively. The updated code should look like this:

CODE: https://gist.github.com/barranger/f9c34a59c38fc3fa817bf0fb5f1d5bba.js

Desktop

GithubReact

Finally, let’s implement the layout for Desktop. You’ll see that the only true difference is that we now have a row of four columns, with the second row containing two columns aligned with the first and last columns in the first row:

First we’ll update the Field rows to use three as the value for lg (12/4=3). While the first row properly has the four Field components lined up, notice that the second row’s columns are aligned incorrectly per our design.
Another feature of react-flexbox-grid – distribution attributes – allows us to specify how to distribute the contents of a Row or Column within the available space. This, too, can be defined per screen size so that the layout on smaller displays is unaffected.

In our case we want to use the between attribute on the Row containing the Field components so that the final two (on the second row) are distributed with the superfluous screen real estate left between them. The final code should look like this:

CODE: https://gist.github.com/barranger/cd7ba6e5b96638b370dd8f7e3b6bafed.js

Final Thoughts

We have only scratched the surface of what can be accomplished with react-flexbox-grid. To read more, check out the GitHub repos for both react-flexbox-grid and the underlyling css framework: flexboxgrid.css.

Material UI's Grid layout system is mostly a wrapper around the 'CSS Flexible Box module', also known as Flexbox. See the official specfor Flexbox here.

This particular library is an example of why you should read the source code of libraries to understand how theywork at a deeper level. Without an understanding of Flexbox, you won't understand what most of the props are doing here.Similarly, if you've mastered Flexbox or CSS Grid already, you may find it more comfortable to implement your owngrid with your own CSS.

So while it's not required to use Material UI's Grid to build grids in your application, using it does have some advantages (and disadvantanges).

A Brief Explanation of Flexbox

Grid

Let's refer to the W3 spec on the exact terms we'll be using.

A flex container is the box generated by an element with a computed display of flex or inline-flex.In-flow children of a flex container are called flex items and are laid out using the flex layout model.

So to keep the definition really simple, a flex container is an element with CSS display: flex. That's it, by that oneCSS property, that element becomes a flex container and the children of that element magically become flex items.Check out Example 1 below for a simple example of a pure flexbox with no other CSS properties other than a border on the items so you cansee how they are laid out by default.

Properties of Flexbox

Of course there is no better site than CSS Tricks for the complete visual guide of flexbox.As Material UI uses Flexbox under the hood for their Grid, you should at least know a few key properties. Using the flex-grow property, you can specifya unitless value (like 2,2,4,4) to proportionally scale the widths of the items or have one item take up the remaining space. flex-basis accepts more normalwidth values (33%, 100px) to use as the default column width before applying flex-grow properties. Material UI uses flex-basis and max-width to set thewidths of the columns this way with the below breakpoint properties. In all honesty, Flexbox is just more confusing than CSS Grid properties, which can specifycolumn widths a bit more expressively with the grid-template-columns prop.

So how does Material UI Grid compare to Flexbox?

Material UI Grid's grid uses Flexbox under the hood. The properties of Flexbox are used as properties of the Grid, so you can control the componentas if it were a flexbox. Additionally, Material UI's Grid also provides helpers for spacing, responsive design, and fitting a 12 column layout.To see all the properites of Grid, check out the Grid API or look at the bottom of the Grid source code to see prop types.

Now for the tricky part: using breakpoints as props to the Grid, we can specify how many columns we want that component to take up, for each of thebreakpoints. We'll explain this in our responsive design section. First let's look at the breakpoint values.

Material UI Breakpoints

Looking at Material UI's default breakpoints, we can see theseare the horizontal screen sizes we will use as props to the Grid component. These are also used elsewhere in Material UI.

Material UI Grid Responsive Design

React-flexbox-grid Github

So how do we implement responsive design with Material UI's Grid?As you can see in our Example 4 component in the above Sandbox:

React Flexbox Grid

Observe the comments in the GridItem to get a feel for how this works. We are specifying multiple breakpoints toprogressively use 4 columns on desktop, 2 columns on tablet, and 1 column on phones. This level of customization is usuallyonly found on apps like landing pages, where multi-media components need special handling on each device.Most often, you'll find yourself collapsing 2 column layouts on desktop into 1 column layouts on mobile phones.

Material UI Templates using Grid

React Native Alignitems

Looking for a downloadable project with tons of Grid examples? All of React School's Material UI Templates use Material UI Grids. Check out the free projectto see our Grids in action!