Solved by Flexbox

Cleaner, hack-free CSS

  View Project Source   Spread the Word

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.

1/2 1/2

1/3 1/3 1/3

1/4 1/4 1/4 1/4

Full-height, even when my content doesn't Lorem ipsum dolor sit amet, consectetur
fill the space. 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.

1/2 auto auto

auto 1/3

1/4 auto 1/3

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.

Full / Halves

Full / Halves

Full / Thirds

Full / Thirds

Full / Thirds

Grid-ception

Grid components are infinitely nestable inside of other grid components.

1/3
1/3
1/2 1/2

Alignment Features
Top-aligned Grid Cells

This cell should Pellentesque sagittis vel erat ac laoreet. This cell should
be top-aligned. Phasellus ac aliquet enim, eu aliquet sem. be top-aligned.
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.

Bottom-aligned Grid Cells

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
This cell should be ultrices nunc, sit amet This cell should be
bottom-aligned. blandit elit gravida in. bottom-aligned.

Vertically Centered Grid Cells

Curabitur pulvinar dolor lectus, quis porta

turpis ullamcorper nec. Quisque eget
varius turpis, quis iaculis nibh. Ut interdum
ligula id metus hendrerit cursus. Integer
This cell should be vertically-centered with eu leo felis. Aenean commodo ultrices
the cell to its right. 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 Curabitur

be top aligned. pulvinar dolor
lectus, quis porta
turpis
ullamcorper nec.
Quisque eget
varius turpis, quis
iaculis nibh. Ut
interdum ligula id
 metus hendrerit
cursus. Integer eu This cell should
leo felis. Aenean be center-
commodo aligned.
ultrices nunc, sit
amet blandit elit
gravida in. Sed
est ligula, ornare
This cell should
ac nisi adipiscing,
be bottom-
iaculis facilisis
aligned.
tellus.

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.

Star @philwalton Tweet

Created and maintained by Philip Walton.

Source code and examples released under the MIT license.
Website and documentation licensed under CC BY 4.0.