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.

Full-height, even when my content doesn't fill the space.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque.

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

This cell should be top-aligned.

Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar porta leo, eu ultricies nunc sollicitudin vitae. Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh.

This cell should be top-aligned.

Bottom-aligned Grid Cells

This cell should be bottom-aligned.

Vertically Centered Grid Cells

This cell should be vertically-centered with the cell to its right.

Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh. Ut interdum ligula id metus hendrerit cursus. Integer eu leo felis. Aenean commodo ultrices nunc, sit amet blandit elit gravida in. Sed est ligula, ornare ac nisi adipiscing, iaculis facilisis tellus. Nullam vel facilisis libero. Duis semper lobortis elit, vitae dictum erat.

Mixed Vertical Alignment

This cell should be top aligned.

This cell should be center-aligned.

This cell should be bottom-aligned.

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


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


.Grid--top {
  align-items: flex-start;
}
.Grid--bottom {
  align-items: flex-end;
}
.Grid--center {
  align-items: center;
}


.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)


.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%
}


@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%
  }
}


@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.