docs(grid): expands design guidelines for grid layout. (#3672)

* docs: expands design guidelines for grid layout. * Updates with images and placeholder images. * Updates image paths. * Updates content to ready for review. * Apply suggestions from code review * Fix merge issues. * Update packages/documentation-site/patternfly-docs/content/design-guidelines/layouts/grid.md * Update packages/documentation-site/patternfly-docs/content/design-guidelines/layouts/grid.md --------- Co-authored-by: Margot <[email protected]>
patternfly · Sep 27, 2023 · 9c4d902 · 9c4d902
1 parent 5a328aa
commit 9c4d902
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 1 deletion.
diff --git a/...es/documentation-site/patternfly-docs/content/design-guidelines/layouts/grid.md b/...es/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/...te/patternfly-docs/content/design-guidelines/layouts/img/adjusted-grid-span.png b/...te/patternfly-docs/content/design-guidelines/layouts/img/adjusted-grid-span.png
diff --git a/...ion-site/patternfly-docs/content/design-guidelines/layouts/img/grid-example.png b/...ion-site/patternfly-docs/content/design-guidelines/layouts/img/grid-example.png
diff --git a/...ion-site/patternfly-docs/content/design-guidelines/layouts/img/grid-gutters.png b/...ion-site/patternfly-docs/content/design-guidelines/layouts/img/grid-gutters.png