Better, Simpler Grid Systems

Most grid systems today use one of two layout methods: float or inline-block. But neither of these methods were really intended to be used for layout and as a result have pretty significant problems and limitations.

Using floats requires clearing them which has a whole host of layout issues, most notoriously that clearing an element sometimes forces it below an unrelated part of the page (take this Bootstrap issue for example). In addition, clearing floats usually requires using both before and after pseudo-elements, preventing you from using them for something else.

Inline block layouts must address the problem of white-space between inline-block items, and all of the solutions to that problem are hacky and annoying.

Flexbox not only eliminates these problems, it opens up an entirely new world of possibilities.

Features of a Flexbox Grid System

Grid systems usually come with a myriad of sizing options, but the vast majority of the time you just want two or three elements side-by-side. Given this, why should we be required to put sizing classes on every single cell?

Listed below are some of my criteria for an ideal grid system. Fortunately, with Flexbox we get most of these features for free.

• By default, each grid cell is the same width and height as every other cell in the row. Basically they all size to fit by default.
• For finer control, you can add sizing classes to individual cells. Without these classes, the cells simply divide up the available space as usual.
• For responsive grids, you can add media query-specific classes to the cells.
• Individual cells can be aligned vertically to the top, bottom, or middle.
• When you want all of the cells in a grid to have the same sizing, media, or alignment values, you should be able to just add a single class to the container to avoid unnecessary repetition.
• Grids can be nested as many levels deep as needed.

Basic Grids

The grid cells below do not specify any widths, they just naturally space themselves equally and expand to fit the entire row. They’re also equal height by default.

Individual Sizing

When equal widths aren’t what you want, you can add sizing classes to individual cells. Cells without sizing classes simply divide up the remaining space as normal.

The cells below labeled “auto” do not have sizing classes specified.

Responsive

Responsive Grids work by adding media classes to the Grid cells or containers. When those media values are met, the grids automatically adjust accordingly.

The cells below should be full width by default and scaled to fit above 48em. Resize your browser to see them in action.

Grid-ception

Grid components are infinitely nestable inside of other grid components.

Alignment Features

Top-aligned Grid Cells

Bottom-aligned Grid Cells

Vertically Centered Grid Cells

Mixed Vertical Alignment

The HTML

<div class="Grid">
  <div class="Grid-cell">…</div>
  <div class="Grid-cell">…</div>
  <div class="Grid-cell">…</div>
</div>

The CSS

Basic Grid Styles

.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}

Grid Style Modifiers

/* With gutters */
.Grid--gutters {
  margin: -1em 0 0 -1em;
}
.Grid--gutters > .Grid-cell {
  padding: 1em 0 0 1em;
}

/* Alignment per row */
.Grid--top {
  align-items: flex-start;
}
.Grid--bottom {
  align-items: flex-end;
}
.Grid--center {
  align-items: center;
}

/* Alignment per cell */
.Grid-cell--top {
  align-self: flex-start;
}
.Grid-cell--bottom {
  align-self: flex-end;
}
.Grid-cell--center {
  align-self: center;
}

Responsive Modifiers (a mobile-first approach)

/* Base classes for all media */
.Grid--fit > .Grid-cell {
  flex: 1;
}
.Grid--full > .Grid-cell {
  flex: 0 0 100%;
}
.Grid--1of2 > .Grid-cell {
  flex: 0 0 50%
}
.Grid--1of3 > .Grid-cell {
  flex: 0 0 33.3333%
}
.Grid--1of4 > .Grid-cell {
  flex: 0 0 25%
}

/* Small to medium screens */
@media (min-width: 24em) {
  .small-Grid--fit > .Grid-cell {
    flex: 1;
  }
  .small-Grid--full > .Grid-cell {
    flex: 0 0 100%;
  }
  .small-Grid--1of2 > .Grid-cell {
    flex: 0 0 50%
  }
  .small-Grid--1of3 > .Grid-cell {
    flex: 0 0 33.3333%
  }
  .small-Grid--1of4 > .Grid-cell {
    flex: 0 0 25%
  }
}

/* Large screens */
@media (min-width: 48em) {
  .large-Grid--fit > .Grid-cell {
    flex: 1;
  }
  .large-Grid--full > .Grid-cell {
    flex: 0 0 100%;
  }
  .large-Grid--1of2 > .Grid-cell {
    flex: 0 0 50%
  }
  .large-Grid--1of3 > .Grid-cell {
    flex: 0 0 33.3333%
  }
  .large-Grid--1of4 > .Grid-cell {
    flex: 0 0 25%
  }
}

View the full source for the Grid component used in this demo on Github.