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.

<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

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

<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

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

<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

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

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

<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.gsx -- Row 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.
`.fl-none`	This is equivalent to flex: 0 0 auto. It sizes the item according to its width/height properties, but makes it fully inflexible.
`.fl-equal`	Sets flex grow value to 1, flex shrink to 1, and flex basis to 0, allowing for equal spacing of each child.
`.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.