One CSS Grid to Rule them All
The case for using one CSS grid for your entire website
CSS Grid vs Flexbox
In the dark ages, we used table, a few years ago we used float and before today most of us used flex . Of course, these older technologies still serve a purpose but when it comes to good old fashioned layout, CSS grid is where it’s at.
Examples (JSX)
A simple three-column grid in flexbox with 20px gap and 30px of gutter on the left and right:
There are a few annoying things that we have to do to accomplish this. Do you see them?
- Negative margins on the parent to account for the padding on the left/right of the first/last columns.
- Half padding on left/right of each column to form the column gutters.
Let’s do the same thing with CSS Grid:
Easy peasy! Just define the number of columns (three, filling an equal amount of space) and the gap size and then sit back and relax. The benefits of CSS grid over the other layout techniques become even more apparent as grids get more complex but hopefully, you get the picture.
Multiple Grids vs a Single Grid
Multiple grids may feel like a good idea, but here’s why they aren’t
Once you start using CSS grids, I can almost guarantee that you’ll want to create a new grid for each component. At least I did! However, it turns out this could easily result in inconsistencies all over the place, causing your code to never match up with the designer’s intention (assuming they designed on a grid). A designer typically creates a single grid and lays out the entire site on that grid. Sure, a component might be a 2 column component, but it still fits on their 12 column grid. Here’s an example of the wrong way to do things:
While coding the component above, you may be tempted to create a very simple grid:
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 30 }} />Intuitively, this makes sense! After all, this is just a 2 column grid with each column spanning half of the parent. This is actually not the right approach but let's look at one more example before going on.
In this example from the same project, we might be tempted to create the following 4 column grid:
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 30 }} />Wrong again!
The single grid pattern
I advise that we follow the designer’s workflow and use a single grid for the entire webpage, and follow that same grid for every component. In the case of the examples above, both grids would be a 12 column grid:
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 30 }} />Now let’s take a look at the components above built for the 12 column grid:
And here’s the 4 column layout:
By sharing a single 12 column grid between both components and simply spanning the appropriate amount of columns, we ensure that both of these components actually line up with each other on the global grid as the designer intended. If you choose to use different grids for each component, your components will no longer fit on the global grid and the designer will let you know about it.
React Global Grid
To aid with this, I’ve created a very simple collection of components for React called react-global-grid.
Installation
npm i react-global-gridUsage
At the moment, this library requires the following peer dependencies:
If you’re already using those then you’re set. If not, don’t fret! Just create a Grid component and define some global styles for it. Then make sure to use that component all over the place and just span the number of columns necessary for each module.
