Grid System

Moxie flexbox grid system.

Base Grid Jump to Source

Flexible grid system. Combine with widths for virtually unlimited layout possibilities!

.l-grid

Apply the flexbox grid system.
1/6
2/6
Auto
Source 
<div class="l-grid [modifier class]">
  <div class="w-1-6@xs"><div class="sg-boxlet sg-boxlet--grid">1/6</div></div>
  <div class="w-2-6@xs"><div class="sg-boxlet sg-boxlet--grid">2/6</div></div>
  <div><div class="sg-boxlet sg-boxlet--grid">Auto</div></div>
</div>

Alignment Jump to Source

Alter the alignment of items in the grid against the flexbox axis.

.l-grid--align-start

"Flex Start" modifier.
1/3
 
1/3
 
Auto

.l-grid--align-center

"Center" modifier.
1/3
 
1/3
 
Auto

.l-grid--align-end

"Flex End" modifier.
1/3
 
1/3
 
Auto

.l-grid--align-stretch

"Stretch" modifier.
1/3
 
1/3
 
Auto
Source 
<div class="l-grid [modifier class]">
  <div class="w-1-3@xs"><div class="sg-boxlet sg-boxlet--grid">1/3</div></div>
  <div class="w-1-3@xs"><div class="sg-boxlet sg-boxlet--grid sg-boxlet sg-boxlet--grid--large"><span>&nbsp;<br />1/3<br />&nbsp;</span></div></div>
  <div><div class="sg-boxlet sg-boxlet--grid">Auto</div></div>
</div>

Direction Jump to Source

Switch the flexbox grid direction. The grid uses "rows" by default when no modifier is applied.

.l-grid--rows

"Rows" modifier. Switch to flexbox rows direction.
1/3
1/3
1/3

.l-grid--columns

"Columns" modifier. Switch to flexbox columns direction.
1/3
1/3
1/3
Source 
<div class="l-grid [modifier class]">
  <div class="w-1-3@xs"><div class="sg-boxlet sg-boxlet--grid">1/3</div></div>
  <div class="w-1-3@xs"><div class="sg-boxlet sg-boxlet--grid">1/3</div></div>
  <div class="w-1-3@xs"><div class="sg-boxlet sg-boxlet--grid">1/3</div></div>
</div>

Flush Grid Jump to Source

Remove gutters from grid.

.l-grid--flush

"Flush" modifier. Removes guttering.
1/3
1/3
Auto
Source 
<div class="l-grid l-grid--flush">
  <div class="w-1-3@xs"><div class="sg-boxlet sg-boxlet--grid">1/3</div></div>
  <div class="w-1-3@xs"><div class="sg-boxlet sg-boxlet--grid">1/3</div></div>
  <div><div class="sg-boxlet sg-boxlet--grid">Auto</div></div>
</div>

Justification Jump to Source

Alter the justification of items in the grid.

.l-grid--justify-start

"Start" modifier.
1/6
1/6
1/6

.l-grid--justify-center

"Center" modifier.
1/6
1/6
1/6

.l-grid--justify-end

"End" modifier.
1/6
1/6
1/6

.l-grid--justify-space-between

"Space Between" modifier.
1/6
1/6
1/6

.l-grid--justify-space-around

"Space Around" modifier.
1/6
1/6
1/6
Source 
<div class="l-grid [modifier class]">
  <div class="w-1-6@xs"><div class="sg-boxlet sg-boxlet--grid">1/6</div></div>
  <div class="w-1-6@xs"><div class="sg-boxlet sg-boxlet--grid">1/6</div></div>
  <div class="w-1-6@xs"><div class="sg-boxlet sg-boxlet--grid">1/6</div></div>
</div>

Reversed Grid Jump to Source

Reverse the order of the grid.

.l-grid--reverse

"Reverse" modifier. Reverse the grid.
1/3
1/3
Auto
Source 
<div class="l-grid l-grid--reverse">
  <div class="w-1-3@xs"><div class="sg-boxlet sg-boxlet--grid">1/3</div></div>
  <div class="w-1-3@xs"><div class="sg-boxlet sg-boxlet--grid">1/3</div></div>
  <div><div class="sg-boxlet sg-boxlet--grid">Auto</div></div>
</div>

Spaced Grid Jump to Source

Adds vertical spacing to the grid, based on configured guttering.

.l-grid--spaced

"Spaced" modifier. Applies vertical guttering.
1/3
1/3
1/3
1/2
Auto
Source 
<div class="l-grid l-grid--spaced">
  <div class="w-1-3@xs"><div class="sg-boxlet sg-boxlet--grid">1/3</div></div>
  <div class="w-1-3@xs"><div class="sg-boxlet sg-boxlet--grid">1/3</div></div>
  <div class="w-1-3@xs"><div class="sg-boxlet sg-boxlet--grid">1/3</div></div>
  <div class="w-1-2@xs"><div class="sg-boxlet sg-boxlet--grid">1/2</div></div>
  <div><div class="sg-boxlet sg-boxlet--grid">Auto</div></div>
</div>

Item Ordering Jump to Source

Uses the order utility classes to re-order items responsively.

1/3
Order 1
1/3
Order 2
Auto
Ordered 0
Source 
<div class="l-grid">
  <div class="w-1-3@xs u-order-1@xs"><div class="sg-boxlet sg-boxlet--grid">1/3<br />Order 1</div></div>
  <div class="w-1-3@xs u-order-2@xs"><div class="sg-boxlet sg-boxlet--grid">1/3<br />Order 2</div></div>
  <div class="u-order-0@xs"><div class="sg-boxlet sg-boxlet--grid">Auto<br />Ordered 0</div></div>
</div>
Page Generated: Fri, Sep 10, 2021 at 10:56:44 AM