Grid

The Stacks grid system is a flexible, scaffolding system for product layouts. It’s an extensive system that provides fixed cell widths, gutter spacing, and flex atomic classes.

Basic Grid

A grid is initiated with the .grid class. By default, display: flex; starts a non-wrapping row. To convert it to a column, apply the .fd-column helper class.

1
2
3
4
5
6
7
8
<div class="grid">
    <div class="grid--cell"></div>
    <div class="grid--cell"></div>
</div>
<div class="grid fd-column">
    <div class="grid--cell"></div>
    <div class="grid--cell"></div>
</div>
.grid--cell
.grid--cell
.grid--cell
.grid--cell

Fluid Cells

By default all child elements of a grid have a default value of flex: 1 0 auto;. This means that by default all cells will only be as wide as their content. If you would like a cell or all the cells to fill the remaining space, apply the .fl1 to the cell, or .grid__fl1 to the parent to apply to all children.

Fluid Examples

1
2
3
4
5
6
7
8
9
<div class="grid">
    <div class="grid--cell fl1"></div>
    <div class="grid--cell"></div>
</div>
<div class="grid grid__fl1">
    <div class="grid--cell"></div>
    <div class="grid--cell"></div>
    <div class="grid--cell"></div>
</div>
.grid--cell.fl1
.grid--cell
.grid--cell
.grid--cell
.grid--cell

Fixed Cells

You can either fix the width of an individual element or fix the width of all child elements within a parent container by setting the width on the parent. The cell widths are based on a 12-column grid system.

Fixed Classes

Individual Width Uniform Width Output
.grid--cell1 .grid__allcells1 flex-basis: 8.333333333%;
.grid--cell2 .grid__allcells2 flex-basis: 16.666666667%;
.grid--cell3 .grid__allcells3 flex-basis: 24.999999999%;
.grid--cell4 .grid__allcells4 flex-basis: 33.333333332%;
.grid--cell5 .grid__allcells5 flex-basis: 41.666666665%;
.grid--cell6 .grid__allcells6 flex-basis: 50%;
.grid--cell7 .grid__allcells7 flex-basis: 58.333333331%;
.grid--cell8 .grid__allcells8 flex-basis: 66.666666664%;
.grid--cell9 .grid__allcells9 flex-basis: 74.999999997%;
.grid--cell10 .grid__allcells10 flex-basis: 83.33333333%;
.grid--cell11 .grid__allcells11 flex-basis: 91.666666663%;
.grid--cell12 .grid__allcells12 flex-basis: 100%;

Fixed Examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="grid">
    <div class="grid--cell2"></div>
    <div class="grid--cell10"></div>
</div>
<div class="grid">
    <div class="grid--cell3"></div>
    <div class="grid--cell6"></div>
    <div class="grid--cell"></div>
</div>
<div class="grid grid__allcells4">
    <div class="grid--cell"></div>
    <div class="grid--cell"></div>
    <div class="grid--cell"></div>
    <div class="grid--cell"></div>
</div>
.grid--cell2
.grid--cell10
.grid--cell3
.grid--cell6
.grid--cell
.grid--cell
.grid--cell
.grid--cell
.grid--cell

Nested Grids

Grids can be nested within each other. This allows you to create unique, custom layouts without needing to create new, custom code or override existing styles.

Note: Nested grids with gutter spacing will conflict with each other. If you are nesting a grid with gutter spacing into a grid that also has gutter spacing, the child's parent wrapper margins will be overwritten by the parent. To have the child grid gutter spacing honored, you must place the child grid within a .grid--cell wrapper first. This allows the parent and child grid gutter spacing to act correctly without interfering with each other.

Nested Examples

1
2
3
4
5
6
7
8
<div class="grid">
    <div class="grid">
        <div class="grid--cell"></div>
        <div class="grid--cell"></div>
    </div>
    <div class="grid--cell2"></div>
    <div class="grid--cell2"></div>
</div>
.grid--cell
.grid--cell
.grid--cell2
.grid--cell2

Gutters

Sometimes gutters are desired between cells. To do so apply the appropriate class to the parent wrapper. The gutter applies a margin to all sides. The sizes available are the same as the spacing units.

Gutter Classes

Class Output
.gs2 2px
.gs4 4px
.gs8 8px
.gs12 12px
.gs16 16px
.gs24 24px
.gs32 32px
.gs48 48px
.gs64 64px
.gsx Applies margins only to left and right
.gsy Applies margins only to top and bottom

Gutter Examples

1
2
3
4
5
6
7
8
9
10
11
12
<div class="grid grid__fl1 gs16">
    <div class="grid--cell"></div>
    <div class="grid--cell"></div>
</div>
<div class="grid grid__fl1 gs16 gsx">
    <div class="grid--cell"></div>
    <div class="grid--cell"></div>
</div>
<div class="grid grid__fl1 gs16 gsy">
    <div class="grid--cell"></div>
    <div class="grid--cell"></div>
</div>
.gs16
.gs16
.gs16
.gs16
.gs16.gsx -- Row gutters only
.gs16.gsx -- Row gutters only
.gs16.gsx -- Row gutters only
.gs16.gsx -- Row gutters only
.gs16.gsy -- Column gutters only
.gs16.gsy -- Column gutters only
.gs16.gsy -- Column gutters only
.gs16.gsy -- Column gutters only

Flex Classes

To change a flex property, use one of the following atomic classes.

Class Definition Responsive?
.ac-center

Distributes child elements starting from the center along a parent’s cross axis. This only works with more than one line.

.ac-end

Distributes child elements starting from the end along a parent’s cross axis. This only works with more than one line.

.ac-space-around

Distributes child elements with space around along a parent’s cross axis. This only works with more than one line.

.ac-space-between

Distributes child elements with space between along a parent’s cross axis. This only works with more than one line.

.ac-start

Distributes child elements starting from the start along a parent’s cross axis. This only works with more than one line.

.ac-stretch

Distributes child elements stretching them along a parent’s cross axis. This only works with more than one line.

.ai-baseline

Aligns child elements along the baseline of a parent’s cross axis.

.ai-center

Centers child elements along the parent’s cross axis.

.ai-end

Places child elements at the end of the parent’s cross axis.

.ai-start

Places child elements at the start of the parent’s cross axis.

.ai-stretch

Stretches child elements along the parent’s cross axis.

.as-auto

Auto re-aligns a child element along the parent’s main axis.

.as-baseline

Re-aligns a child element along the baseline of the parent’s main axis.

.as-center

Centers a child element along the parent’s main axis.

.as-end

Re-aligns a child element to the end of the parent’s main axis.

.as-start

Re-aligns a child element to the start of the parent’s main axis.

.as-stretch

Stretches a child element along the parent’s main axis.

.fd-row

Sets the flex direction to a row.

.fd-row-reverse

Reverses the row flex direction.

.fd-column

Sets the flex direction to a column.

.fd-column-reverse

Reverses the column flex direction.

.ff-row-wrap

Shortand property to set flex direction and wrap to row wrap.

.ff-row-nowrap

Shortand property to set flex direction and wrap to row nowrap.

.ff-row-reverse-wrap

Shortand property to set flex direction and wrap to row-reverse wrap.

.ff-row-reverse-nowrap

Shortand property to set flex direction and wrap to row-reverse nowrap.

.ff-column-wrap

Shortand property to set flex direction and wrap to column wrap.

.ff-column-nowrap

Shortand property to set flex direction and wrap to column nowrap.

.ff-column-reverse-wrap

Shortand property to set flex direction and wrap to column-reverse wrap.

.ff-column-reverse-nowrap

Shortand property to set flex direction and wrap to column-reverse nowrap.

.fl0

Sets flex grow and shrink to 0, flex-basis to auto.

.fl1

Sets flex grow and shrink to 1, flex-basis to auto.

.fl2

Sets flex grow and shrink to 2, flex-basis to auto.

.fl3

Sets flex grow and shrink to 3, flex-basis to auto.

.fl4

Sets flex grow and shrink to 4, flex-basis to auto.

.fl5

Sets flex grow and shrink to 5, flex-basis to auto.

.fl-shrink0

Sets flex shrink value to 0, which means it won’t shrink relative to available space and sibling elements.

.fl-shrink1

Sets flex shrink value to 1. This means it will shrink relative to other sibling elements by a factor of 1.

.fl-shrink2

Sets flex shrink value to 2. This means it will shrink relative to other sibling elements by a factor of 2.

.fl-shrink3

Sets flex shrink value to 3. This means it will shrink relative to other sibling elements by a factor of 3.

.fl-shrink4

Sets flex shrink value to 4. This means it will shrink relative to other sibling elements by a factor of 4.

.fl-shrink5

Sets flex shrink value to 5. This means it will shrink relative to other sibling elements by a factor of 5.

.fl-grow0

Sets flex grow value to 0, which means it won’t grow relative to available space and sibling elements.

.fl-grow1

Sets flex grow value to 1. This means it will grow relative to other sibling elements by a factor of 1.

.fl-grow2

Sets flex grow value to 2. This means it will grow relative to other sibling elements by a factor of 2.

.fl-grow3

Sets flex grow value to 3. This means it will grow relative to other sibling elements by a factor of 3.

.fl-grow4

Sets flex grow value to 4. This means it will grow relative to other sibling elements by a factor of 4.

.fl-grow5

Sets flex grow value to 5. This means it will grow relative to other sibling elements by a factor of 5.

.fw-wrap

Wraps the child cells within a parent.

.fw-reverse

Reverses the wrap direction.

.fw-nowrap

Removes the wrap direction.

.jc-center

Centers child elements along the parent’s main axis.

.jc-end

Aligns child elements at the end of the parent’s main axis.

.jc-space-around

Equally distributes the remaining space around child elements. Note that this doesn’t mean the spaces are visually equal, but that the same space unit is applied to both sides of a child element. The first item would have one unit of space against the container edge, but the next item would have two units of space between itself and the first item.

.jc-space-between

Evenly distributes the space between child elements along a parent’s main axis with the first item starting on the start line and the last item on the end line.

.jc-space-evenly

The spacing between any two items (and spacing between the edges) are equal.

.jc-start

Aligns child elements at the start of the parent’s main axis.

.grid__center

Centers child elements along a parent’s main and cross axis.

.order-first

Places the child element first within a parent container.

.order-last

Places the child element last within a parent container.