diff --git a/shared/styles/doc.scss b/shared/styles/doc.scss
index d6b15f5b78..17b1bce882 100644
--- a/shared/styles/doc.scss
+++ b/shared/styles/doc.scss
@@ -106,6 +106,10 @@ p.doc {
margin-bottom: 1.5rem;
}
+p.doc:first-child {
+ margin-top: 0;
+}
+
a.doc {
color: #0070d2;
}
diff --git a/test/__tests__/__snapshots__/Grid_Column_Gutters_2_col_basic.json b/test/__tests__/__snapshots__/Grid_Column_Gutters_2_col_basic.json
new file mode 100644
index 0000000000..ab8d710746
--- /dev/null
+++ b/test/__tests__/__snapshots__/Grid_Column_Gutters_2_col_basic.json
@@ -0,0 +1,75 @@
+{
+ "snapshot": {
+ "html": "\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid slds-gutters\" > < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid slds-grid_pull-padded-medium\" > < divclass = \" slds-col slds-p-horizontal_medium\" > < span> </ span> </ div> < divclass = \" slds-col slds-p-horizontal_medium\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid\" > < divclass = \" slds-col slds-p-horizontal_medium\" > < span> </ span> </ div> < divclass = \" slds-col slds-p-horizontal_medium\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n 1 \n
\n
\n
\n Nested: 1 \n
\n
\n Nested: 2 \n
\n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid slds-wrap\" > < divclass = \" slds-col slds-size_10-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-grid slds-size_1-of-2\" > < divclass = \" slds-col slds-size_1-of-2\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-2\" > < span> </ span> </ div> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n 1 \n
\n
\n 2 \n
\n
\n 3 \n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid\" > < divclass = \" slds-col slds-order_3\" > < span> </ span> </ div> < divclass = \" slds-col slds-order_1\" > < span> </ span> </ div> < divclass = \" slds-col slds-order_2\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid slds-gutters\" > < divclass = \" slds-col slds-size_2-of-3\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-3\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n 1/6 \n
\n
\n 1/6 \n
\n
\n 1/6 \n
\n
\n 1/6 \n
\n
\n 1/6 \n
\n
\n 1/6 \n
\n
\n 1/4 \n
\n
\n 1/4 \n
\n
\n 1/4 \n
\n
\n 1/4 \n
\n
\n 1/3 \n
\n
\n 1/3 \n
\n
\n 1/3 \n
\n
\n 1/2 \n
\n
\n 1/2 \n
\n
\n 1/1 \n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid slds-wrap\" > < divclass = \" slds-col slds-size_1-of-6\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-6\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-6\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-6\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-6\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-6\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-4\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-4\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-4\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-4\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-3\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-3\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-3\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-2\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-2\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-1\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n 1 \n
\n
\n 1 \n
\n
\n 1 \n
\n
\n 1 \n
\n
\n 1 \n
\n
\n 1 \n
\n
\n 1 \n
\n
\n 1 \n
\n
\n 1 \n
\n
\n 1 \n
\n
\n 1 \n
\n
\n 1 \n
\n
\n 2 \n
\n
\n 2 \n
\n
\n 2 \n
\n
\n 2 \n
\n
\n 2 \n
\n
\n 2 \n
\n
\n 3 \n
\n
\n 3 \n
\n
\n 3 \n
\n
\n 3 \n
\n
\n 4 \n
\n
\n 4 \n
\n
\n 4 \n
\n
\n 5 \n
\n
\n 5 \n
\n
\n 2 \n
\n
\n 6 \n
\n
\n 6 \n
\n
\n 7 \n
\n
\n 5 \n
\n
\n 8 \n
\n
\n 4 \n
\n
\n 9 \n
\n
\n 3 \n
\n
\n 10 \n
\n
\n 2 \n
\n
\n 11 \n
\n
\n 1 \n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid slds-wrap\" > < divclass = \" slds-col slds-size_1-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_2-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_2-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_2-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_2-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_2-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_2-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_3-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_3-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_3-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_3-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_4-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_4-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_4-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_5-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_5-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_2-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_6-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_6-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_7-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_5-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_8-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_4-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_9-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_3-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_10-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_2-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_11-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-12\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n 1 \n
\n
\n 1 \n
\n
\n 1 \n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid slds-wrap\" > < divclass = \" slds-col slds-size_8-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_5-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_5-of-12\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n 1 \n
\n
\n 2 \n
\n
\n 3 \n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid slds-grid_align-center\" > < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n 1 \n
\n
\n 2 \n
\n
\n 3 \n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid slds-grid_align-center\" > < divclass = \" slds-col slds-size_1-of-6\" > < span> </ span> </ div> < divclass = \" slds-col slds-grow-none\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-6\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n 1 \n
\n
\n 2 \n
\n
\n 3 \n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid slds-grid_align-end\" > < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n 1 \n
\n
\n 2 \n
\n
\n 3 \n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid slds-grid_align-space\" > < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n 1 \n
\n
\n 2 \n
\n
\n 3 \n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid slds-grid_align-spread\" > < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n 1 \n
\n
\n 2 \n
\n
\n 3 \n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid slds-grid_reverse\" > < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n 1 \n
\n
\n 2 \n
\n
\n 3 \n
\n
\n 4 \n
\n
\n 5 \n
\n
\n 6 \n
\n
\n 7 \n
\n
\n 8 \n
\n
\n 9 \n
\n
\n 10 \n
\n
\n 11 \n
\n
\n 12 \n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid\" > < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n 1 \n
\n
\n 2 \n
\n
\n 3 \n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid slds-gutters\" > < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n 1 \n
\n
\n 2 \n
\n
\n 3 \n
\n
\n 4 \n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid slds-gutters\" > < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid slds-wrap\" > < divclass = \" slds-col slds-size_1-of-1 slds-large-size_8-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-1 slds-large-size_4-of-12\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid slds-wrap\" > < divclass = \" slds-col slds-size_1-of-1 slds-medium-size_6-of-12 slds-large-size_8-of-12\" > < span> </ span> </ div> < divclass = \" slds-col slds-size_1-of-1 slds-medium-size_6-of-12 slds-large-size_4-of-12\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid\" > < divclass = \" slds-col slds-order_2 slds-large-order_1\" > < span> </ span> </ div> < divclass = \" slds-col slds-order_1 slds-large-order_2\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n 1 \n
\n
\n 2 \n
\n
\n 3 \n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid slds-grid_vertical\" > < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n 1 \n
\n
\n 2 \n
\n
\n 3 \n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid slds-grid_vertical-align-center slds-grid_align-center\" style =\" height : 200 px; \" > < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n 1 \n
\n
\n 2 \n
\n
\n 3 \n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid slds-grid_vertical-align-center\" style =\" height : 200 px; \" > < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n 1 \n
\n
\n 2 \n
\n
\n 3 \n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid slds-grid_vertical-align-end\" style =\" height : 200 px; \" > < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n 1 \n
\n
\n 2 \n
\n
\n 3 \n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid\" style =\" height : 200 px; \" > < divclass = \" slds-col slds-align-top\" > < span> </ span> </ div> < divclass = \" slds-col slds-align-middle\" > < span> </ span> </ div> < divclass = \" slds-col slds-align-bottom\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n 1 \n
\n
\n 2 \n
\n
\n 3 \n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid slds-grid_vertical-reverse\" style =\" height : 200 px; \" > < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> </ div> \n
\n
\n
\n
\n
\n
\n
\n 1 \n
\n
\n 2 \n
\n
\n 3 \n
\n
\n
\n
\n
\n Show Code \n
\n
< divclass = \" slds-grid slds-grid_vertical-align-start\" style =\" height : 200 px; \" > < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> < divclass = \" slds-col\" > < span> </ span> </ div> </ div> \n
\n
\n
+ The SLDS grid system provides a flexible, mobile-first, device-agnostic layout system. It has features to control alignment, order, flow, and gutters.
+
+
+## Introduction
+
+Our most-used grid has standard 16px gutters. If you don’t have a design that calls for something more specific, this is the grid you’ll want to use. We’ll also show you exactly how to customize it for your use-case.
+
+**To build a grid:**
+ 1. Add a grid container by adding `slds-grid` to an HTML element
+ 2. Add as many `slds-col` elements as you want inside of your grid container
+
+
+
+
+Initially, each column takes an equal percentage of the width available. In this case, that's 33.3% of the container’s width. Once content is added, the sections expand as needed to fit the content if sizing classes are not used.
+
+
+
+
+Adding a fourth column means they'll each take up 25% of the width of the container.
+
+## 12 Column Support
+
+You can have up to 12 columns in your grid.
+
+
+
+
+
+## Column Widths
+
+If you don’t want the columns to have widths based on their content, you can easily control the width of the columns by adding column width classes.
+
+
+
+ 1
+ 2
+
+
+
+This example sets the width of the first column 66% of your `slds-grid` container and the second column to 33% of your `slds-grid` container.
+
+
+Our sizing classes set widths in percentages. This will keep your layout fluid to the width of your slds-grid container.
+
+
+A 12 column grid is our most used grid. Here's an overview of all the available width classes for a 12 column grid:
+
+
+
+
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+
+ 2
+ 2
+ 2
+ 2
+ 2
+ 2
+
+ 3
+ 3
+ 3
+ 3
+
+ 4
+ 4
+ 4
+
+ 5
+ 5
+ 2
+
+ 6
+ 6
+
+ 7
+ 5
+
+ 8
+ 4
+
+ 9
+ 3
+
+ 10
+ 2
+
+ 11
+ 1
+
+
+
+Since width classnames are written in a human-friendly way, you may choose to write `slds-size_1-of-2` or `slds-size_6-of-12`, both outcomes are the same.
+
+
+
+
+ 1/6
+ 1/6
+ 1/6
+ 1/6
+ 1/6
+ 1/6
+
+ 1/4
+ 1/4
+ 1/4
+ 1/4
+
+ 1/3
+ 1/3
+ 1/3
+
+ 1/2
+ 1/2
+
+ 1/1
+
+
+
+
+## Column Gutters
+
+By default, we start with 0 gutters on our columns. This allows flexibility to add gutter widths of your liking to each column(s) or grid container.
+
+You can easily add padding to your grid by applying `slds-gutters` to the `slds-grid` container. This will add the gutters to your columns as well as align the outside of your grid.
+
+
+
+
+In the above example, adding `slds-gutters` will give us our default gutter size of 24px (12px on each side).
+
+
+The default slds-gutters is subject to change over time but is a great way to ensure when we upgrade, you upgrade.
+
+
+You can modify the width of the gutters between each column by using `slds-gutters_x-small` (16px), `slds-gutters_small` (24px), `slds-gutters_medium` (32px), `slds-gutters_large` (48px), and `slds-gutters_x-large` (64px).
+
+You can also add different gutter widths to your columns by using a spacing utility and adding it to the `slds-col` element (e.g. `slds-p-location_size-*`). The "location" can be __left__, __right__, __top__, __bottom__, __vertical__, __horizontal__ or __around__. The "size" can be __xxx-small__ (2px), __xx-small__ (4px), __x-small__ (8px), __small__ (12px), __medium__ (16px), __large (24px)__, __x-large__ (32px) or __xx-large__ (48px).
+
+
+
+ 1
+ 2
+
+
+
+The above example adds gutters of 32px (16px on each side) in between each column.
+
+You'll notice the 16px space on the left and right of your container created by the spacing classes. You can remove this by adding a `slds-grid_pull-padded-[size]` class to the `slds-grid` container. The `[size]` portion of this class should be the name of the spacing utility size you've applied to the outermost columns.
+
+
+
+ 1
+ 2
+
+
+
+## Column Wrapping
+
+By default, your columns will align themselves horizontally unless you tell them otherwise. If you are using sizing classes (e.g. `slds-size_4-of-12`) and the total # of columns in a row exceed 12 then you can let the grid container know to wrap your columns to a new row by adding `slds-wrap` to the `slds-grid` container.
+
+
+
+ 1
+ 1
+ 1
+
+
+
+## Column Reordering
+
+
+You can visually reorder columns independently from their position in the markup, but you should avoid doing so if you wish to remain WCAG compliant.
+
+
+
+
+
+ 1
+ 2
+ 3
+
+
+
+## Column Nesting
+
+Nesting columns is simple and can add more flexibility in your designs. In a column, you can add a nested grid by creating another `slds-grid` container and as many `slds-col` elements inside of that container as you need..
+
+
+
+ 1
+
+ Nested: 1
+ Nested: 2
+
+
+
+
+## Page Containers
+
+Optionally, you can contain your page content by adding the class `slds-container_width` to a top level element in your page structure.
+
+Containers come in 4 widths, __small__, __medium__, __large__ and __x-large__. They are rendered using `max-width`. This means your content will be a fluid width until it reaches the width the modifier has set on the container.
+
+Class|Width
+---|---
+`slds-container_small`|480px
+`slds-container_medium`|768px
+`slds-container_large`|1024px
+`slds-container_x-large`|1280px
+
+Additionally, you can center the content of your page by adding `slds-container_center`.
+
+## Creating Responsive Layouts
+
+The SLDS grid system can become responsive to your viewport size by prefixing our sizing and ordering classes with a breakpoint name. Our responsive sizing utilities are built upon a mobile first approach.
+
+To achieve the desired outcome of this approach, you will need to append responsive sizing utilities to an element that override the previous breakpoint.
+
+This means the sizing utility used will start at the smallest width and continue to be applied until a responsive sizing utility for a specific breakpoint overrides it.
+
+In some uncommon cases, you may need a sizing utility that is up to a certain breakpoint. For these, use the classes prefixed with `max-` to achieve this result.
+
+#### Responsive Layout Options
+
+Below is an overview table outlining the default behavior for columns and how that behavior may change for responsive breakpoints.
+
+| |Default|Small (>= 480px)|Medium (>=768px)|Large (>=1024px)|
+|---|---|---|---|---|
+|Width class prefix|`slds-size`|`slds-size-small`|`slds-size-medium`|`slds-size-large`|
+|# of columns|1,2,3,4,5,6,7,8 and 12
+|Column ordering prefix|`slds-order`|`slds-order-small`|`slds-order-medium`|`slds-order-large`|
+|Max # of reorders|12
+
+
+ Note: To make sure columns wrap as they exceed a total column count of 12, responsive layouts require slds-wrap to be added to the slds-grid container.
+
+
+### Mobile/Desktop Example
+
+Since we build on the concept of mobile first, let's set a layout for mobile and override for desktop directly in our HTML. We do this by setting a mobile, in this case default widths to our columns and override the layout when we meet the criteria of a desktop viewport size.
+
+
+
+ 1
+ 2
+
+
+
+In the above example, we are setting a stacked layout for mobile/tablet devices and then when our viewport exceeds a width of 1024px we redraw our layout to be a nice two column where the primary content area takes up 8 columns and the secondary content area takes up 4 columns.
+
+### Mobile/Tablet/Desktop Example
+
+If our designs need a bit more flexibility, we can accomplish that by establishing different layouts for mobile, tablets and desktops.
+
+
+
+ 1
+ 2
+
+
+
+In this above example, we are setting our default stacked layout and when our browser exceeds a viewport width of 768px, we adjust the layout for each column to take up 50% or 6 columns of the slds-grid container. Then once we exceed a viewport width of 1024px, we again redraw a layout to be a nice 66% or 8 columns for the primary content area and 33% or 4 columns for the secondary content area.
+
+### Responsive Layout - Column Reordering
+
+With flexbox it's easy to reorder your columns visually. Luckily with the SLDS grid system it's easy to reorder visually in a responsive manner! Following the same naming convention as sizing, we'll want to prefix `slds-order` with our breakpoint name and pass in an integer for where you want it visually. The lowest value is the first in order. If no order is defined, standard ordering is applied. This means that a column with no order class will render before `slds-order_1`.
+
+
+
+ 1
+ 2
+
+
+
+In the above example, we're setting our first column to be last in the order of 3. Then once your viewport exceeds a width of 1024px, we're changing the visual order of our first column back to 1. Now this seemed rather long winded to move 1 column. Below is an easy way of letting the column know you only want to reorder the first column if it's in a viewport smaller than 480px. This breaks the convention of mobile first and should be used sparingly.
+
+## Horizontal Alignment
+
+Since the grids are built on flexbox, they allow us to do some interesting things with alignment on both a horizontal axis and vertical axis. You can add an alignment utility to the `slds-grid` container.
+
+### Content centered
+
+If you want your columns to grow from the the center of the horizontal axis, apply the class `slds-grid_align-center`.
+
+
+
+ 1
+ 2
+ 3
+
+
+
+### Setting variable widths based on content
+
+Another powerful technique is letting a column shrink to the width of the content inside of it, while explicitly setting widths to other columns. This is achieved by using the `slds-shrink-none` or `slds-grow-none` utility classes or simply removing the `slds-col` class from the column element.
+
+
+
+ 1
+ 2
+ 3
+
+
+
+### Content evenly spaced out
+
+To evenly distribute columns on the horizontal axis with an equal amount of white space separating the columns, apply the class `slds-grid_align-space`.
+
+
+
+ 1
+ 2
+ 3
+
+
+
+### Content evenly spread out from edges
+
+To spread out your columns on the horizontal axis, with the first column starting at the start of your main axis and last item ending at the far end of your main axis, apply the class `slds-grid_align-spread`.
+
+
+
+ 1
+ 2
+ 3
+
+
+
+### Content right justified
+
+If you want your columns to grow from the end of the horizontal axis, apply the class `slds-grid_align-end`.
+
+
+
+ 1
+ 2
+ 3
+
+
+
+### Reversed
+
+There may be times you find yourself in a situation to reverse the visual flow of your columns, you can do this both horizontally and vertically. To reverse the horizontal flow, add the class `slds-grid_reverse` to the `slds-grid` container. To reverse the vertical flow, add the class `slds-grid_vertical-reverse` to the `slds-grid` container.
+
+
+
+ 1
+ 2
+ 3
+
+
+
+## Vertical Alignment
+
+Once an `slds-grid` has been set, you can change things like flow. By default, a grid flows left to right on the main horizontal axis. You can easily switch your grid to flow top to bottom on a vertical axis by adding `slds-grid_vertical` to the `slds-grid` container.
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
+Note, to vertically align elements on a cross-axis of a `slds-grid` container, the elements need available vertical white space. This is usually achieved by having a height applied to the `slds-grid` container.
+
+
+### Content top
+
+To align a single row or multi-line rows to the beginning of the cross axis, apply the class `slds-grid_vertical-align-start`.
+
+
+
+ 1
+ 2
+ 3
+
+
+
+### Content centered
+
+To vertically center align a single row or multi-line rows to the height of a `slds-grid` container, apply the class `slds-grid_vertical-align-center`. When `slds-grid_vertical-align-center` is used in conjunction with `slds-grid_align-center`, the outcome would horizontally and vertically center align your content in the center of the `slds-grid` container.
+
+
+
+ 1
+ 2
+ 3
+
+
+
+### Content bottom
+
+To align a single row or multi-line rows to the end of the cross axis, apply the class `slds-grid_vertical-align-end`.
+
+
+
+ 1
+ 2
+ 3
+
+
+
+### Content absolutely centered
+
+
+
+ 1
+ 2
+ 3
+
+
+
+### Reversed
+
+To reverse the vertical flow, add the class `slds-grid_vertical-reverse` to the `slds-grid` container.
+
+
+
+ 1
+ 2
+ 3
+
+
+
+### Individual alignment
+
+To specify the vertical placement of grid items on the cross axis, you can apply `slds-align-top`, `slds-align-middle`, and `slds-align-bottom` to a `slds-col` element.
+
+
+
+ 1
+ 2
+ 3
+
+
diff --git a/ui/utilities/grid/docs/Grid.jsx b/ui/utilities/grid/docs/Grid.jsx
new file mode 100644
index 0000000000..ab4956d7cd
--- /dev/null
+++ b/ui/utilities/grid/docs/Grid.jsx
@@ -0,0 +1,46 @@
+// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
+
+import React, { Component } from 'react';
+import CodeView from '../../../../shared/components/CodeView';
+import style from './Grid.scss';
+import classNames from 'classnames';
+
+export const Column = props => {
+ let count = props.count + 1;
+ return (
+
+ {props.count >= 0 ? {count} : {props.children} }
+
+ );
+};
+
+class Grid extends Component {
+ render() {
+ const children = [];
+ for (var i = 0; i < this.props.columns; i += 1) {
+ children.push({ key: i, count: i });
+ }
+ return (
+
+
+
+ {this.props.columns
+ ? children.map(props =>
+
+