Flexbox Grid

Create a fully responsive, fluid and nestable grid layout.

Atomic's grid system follows the mobile-first approach, accommodates up to 10 grid columns and is built using flexbox.
For explicit control over the widths and responsiveness, use the Size component.

Features

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.

Usage

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/3

1/4

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

Animi corporis dolores eos, eum excepturi explicabo harum inventore ipsam ipsum magnam, magni numquam odit omnis quibusdam quo reiciendis sapiente sint, vero?

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

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 768px (`md` breakpoint). Resize your browser to see them in action.

Full & Halves

Full & Thirds

Grid-ception!

Grid components are infinitely nestable inside other grid components.

1/3

1/2

1/3

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 centred grid cells

This cell should be vertically-centred with the cell to it's right.

Mixed vertical alignment

This cell should be top aligned.

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.

This cell should be center-aligned.

This cell should be bottom-aligned.

Equal size column layouts

1 of 2

Grid cell

1 of 3

Grid cell

1 of 4

Grid cell

1 of 5

Grid cell

<div class="o-flex-grid">
  <div class="o-flex-grid__cell">…</div>
  <div class="o-flex-grid__cell">…</div>
  <div class="o-flex-grid__cell">…</div>
</div>

Classes

Class	Description	Type
`.o-flex-grid`	Object component	Component
`.o-flex-grid--full`	Stacks all grid cells (ready to be over-ridden with responsive modifiers)	Component modifier
`.o-flex-grid--flexCells`	All grid cells will fill the available vertical space (vertical alignment)	Component modifier
`.o-flex-grid--top`	Vertically aligns all grid cells to the top	Component modifier
`.o-flex-grid--bottom`	Vertically aligns all grid cells to the bottom	Component modifier
`.o-flex-grid--center`	Vertically aligns all grid cells to the center	Component modifier
`.o-flex-grid--justifyCenter`	Horizontally aligns the grid cells to the center	Component modifier
`.o-flex-grid--reverse`	Reverses the order of the grid cells	Component modifier
`.o-flex-grid--1of2`	Divides grid cells into 2 columns per row	Component modifier
`.o-flex-grid--1of3`	Divides grid cells into 3 columns per row	Component modifier
`.o-flex-grid--1of4`	Divides grid cells into 4 columns per row	Component modifier
`.o-flex-grid--1of5`	Divides grid cells into 5 columns per row	Component modifier
`.o-flex-grid@sm`	This classname, combined with any of the modifiers associated with the `o-flex-grid` component, (e.g `o-flex-grid@sm--reverse`) have the same effect but only at that particular breakpoint and above	Responsive modifier
`.o-flex-grid@md`	As above	Responsive modifier
`.o-flex-grid@lg`	As above	Responsive modifier
`.o-flex-grid@xl`	As above	Responsive modifier
`.o-flex-grid@xxl`	As above	Responsive modifier
`.o-flex-grid__cell`	Grid cells	Sub-element
`.o-flex-grid__cell--top`	Vertically aligns individual grid cell to the top	Sub-element modifier
`.o-flex-grid__cell--bottom`	Vertically aligns individual grid cell to the bottom	Sub-element modifier
`.o-flex-grid__cell--center`	Vertically aligns individual grid cell to the centre	Sub-element modifier
`.o-flex-grid__cell--autoSize`	Instructs the individual grid cell to fill the available space	Sub-element modifier