The Simplest Grid System

Most front-end frameworks today come with a built in concept of a grid system. I would bet $50 that grids are the most commonly used component of any presentational framework like Bootstrap orFoundation. Easily aligning content in a responsive grid is extremely valuable. There are a few patterns for achieving responsive grids, I’m most familiar with floating columns and rapping in rows like Bootstrap does. Traditional solutions are good, but they tend to have edge-cases and require some hoop-jumping to work properly, like clearing your floats.

Flexbox was built for alignment. Out of the box, flexbox gives us simple solutions for layout alignment and some extra flexibility around ordering.

Learning how to build grids with flexbox can help us rebuild some really useful parts of frameworks that we use often, and give us the option to work without a presentational framework if we care to.

Flexbox Grids

Before we get started, be aware that flexbox hasn’t been around forever so if you support legacy browsers you should check for support before relying on flexbox.

Flexbox works from this magic css property called display: flex;. Once you define this on an element, that elements direct children are flex elements. So with a few lines of CSS, we can setup a grid container that distributes it’s children evenly.

html

<div class="grid">  
<div class="grid-item grid-item-1">1</div>
<div class="grid-item grid-item-2">2</div>
<div class="grid-item grid-item-3">3</div>
</div>

css

.grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
border: 1px solid black;
height: 200px;
text-align: center;
}
.grid-item {
flex: 1;
border: 1px solid black;
}

We’ve added a few extra styles so we can see what’s happening.

That’s all we need for responsive columns. You can add a <div/> to the grid and watch it resize for 4 columns.

Let’s try out some flexbox features before moving on.

Change flex-direction to flex-direction: row-reverse; to reverse you set of divs.

Change flex-direction to flex-direction: column; to stack your divs.

Add individual classes for each grid child to re-order them individually.

.grid-item-1 {
order: 1
}
.grid-item-2 {
order: 3
}
.grid-item-3 {
order: 2
}

Remove flex: 1; from the grid’s children and add justify-content: space-between; to the grid class.

We still want ways of doing the things we did with our grid before like offset columns and define specific column sizes.

You can use the flex shorthand or the flex-grow/flex-shrink properties to control how flex items will behave individually. If we have 3 flex items and we give one flex-grow: 2; while the other two have flex-grow: 1; then our layout will respond to those ratios.

For offsets, take the number of columns you plan to have in your grid, multiply that by the number of columns you want to offset then divide 100 by that number since our grids will be 100% of their parents.

(100 / number of columns * number of columns to offset)

Do that for each offset you need to calculate the % you need to set your margins for.

For example, if you want to know how to set a class that offsets 2 column’s width in your grid. You would do -

100 / 12 * 2 = 16.666666666666666;

so our class would look like this -

.offset-2-cols {
margin-left: 16.66666666666666%;
}

So we’ve done very little work, but now have a the building blocks for a grid system. With a little more work, we could build this into a fully responsive solution with flexible options.

We’ve skipped vendor prefixes for the sake of brevity, it’s worth noting that you shouldn’t ship stuff without them

If you have any questions or want to chat web stuff, you can find me on Twitter at @stides303 or on my blog at aristid.es.