diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/layouts/grid.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/layouts/grid.md
index 722acf3cba..3f4d2a0983 100644
--- a/packages/documentation-site/patternfly-docs/content/design-guidelines/layouts/grid.md
+++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/layouts/grid.md
@@ -2,4 +2,25 @@
 id: Grid
 section: layouts
 ---
-Use a **Grid** to layout content on a fixed-size 12 column grid.
+The **grid** layout places content on a fixed 12 column grid.
+
+## Elements
+
+![Example of grid layout.](./img/grid-example.png)
+1. **Grid**: The grid container, which holds all grid items.
+1. **Grid item**: An individual section of content to be placed in the grid.
+
+## Usage
+
+Grid items can be ordered in a number of ways to create groups. The span value of all grid items must equal 12, but this can be achieved by modifying the span of each item to create different combinations of section sizes:
+
+
+![Example of grid layout with adjusted span.](./img/adjusted-grid-span.png)
+
+## Variations
+
+### Gutters around items
+
+To adjust spacing between items, you can apply gutters.
+
+![Example of grid layout with gutters](./img/grid-gutters.png)
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/layouts/img/adjusted-grid-span.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/layouts/img/adjusted-grid-span.png
new file mode 100644
index 0000000000..88ad7ed85f
Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/design-guidelines/layouts/img/adjusted-grid-span.png differ
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/layouts/img/grid-example.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/layouts/img/grid-example.png
new file mode 100644
index 0000000000..1d86d80d8f
Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/design-guidelines/layouts/img/grid-example.png differ
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/layouts/img/grid-gutters.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/layouts/img/grid-gutters.png
new file mode 100644
index 0000000000..1e2e8d4057
Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/design-guidelines/layouts/img/grid-gutters.png differ