docs(gallery): expands design guidelines for gallery layout. (#3671)

* docs: enhances design guidelines for gallery layout.

* Updates images and tweaks content.

* Adjusts content to ready for review.

* Apply suggestions from code review

* Update image and content.

* Update image.

---------

Co-authored-by: Margot <[email protected]>

packages/documentation-site/patternfly-docs/content/design-guidelines/layouts/gallery.md

@@ -2,4 +2,29 @@
 id: Gallery
 section: layouts
 ---
-Use a **Gallery** layout to arrange content in a responsive grid. Content will wrap responsively to create uniform rows and columns.
+The **gallery** layout is used to arrange content in a responsive grid. Content will wrap responsively to create uniform rows and columns.
+
+## Elements
+
+The gallery layout is designed so that all of its elements wrap responsively, are of uniform size, and are displayed horizontally.
+
+![Example image of gallery layout.](./img/gallery-example.png)
+
+1. **Gallery:** The gallery container, which contains all gallery items.
+1. **Gallery item:** An individual item to be placed in the gallery.
+
+## Usage
+
+While a gallery layout resembles a grid, it is not the same as the grid layout, which is structured more rigidly.
+
+The gallery layout is commonly used for UIs that contain multiple card components.
+
+## Variations
+
+### Gutters around items
+
+If you want to add spacing between items (a common practice for card views), you can apply gutters.
+
+### Items with customized wrapping
+
+Both a minimum and maximum width can be defined for gallery items. These values determine the width that a gallery item is allowed to be before wrapping.