`, we invite consumers to consider which semantic HTML tag is the correct one for the context in which the text is used to meet WCAG Success Criterion [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) as the visual experience should match what is presented to the user with assistive technology.
+
+!!!
+
+### Gap
+
+To control the spacing between grid items, use the `@gap` argument.
+
+```handlebars{data-execute=false}
+
+ {{! multiple grid items here, with a gap of 16px between them }}
+
+```
+
+To differentiate the vertical and horizontal spacing between items when they wrap on multiple rows, provide an array of two values to the `@gap` argument.
+
+```handlebars{data-execute=false}
+
+ {{!
+ multiple grid items appearing on multiple rows
+ with a vertical gap of 16px and a horizontal one of 48px
+ }}
+
+```
+
+The first value in the array refers to the vertical gap between “rows” of items (`row-gap` in CSS), the second one to the horizontal spacing between “columns” of items (`column-gap` in CSS).
+
+The `@gap` argument accepts only **pre-defined values**, it can’t be used to provide custom spacing values. Refer to the [Component API](#component-api) section for details on which values are accepted.
+
+If you need to provide custom spacing values, see below how you can use a special escape hatch for this.
+
+!!! Warning
+
+**Important**
+
+The **pre-defined value(s)** passed to the `@gap` argument **must be string(s)**, not numbers!
+
+!!!
+
+#### Non-standard gap values
+
+If you absolutely have to use non-standard spacing value(s) for the grid `gap`, you can use the internal `--hds-layout-grid-row-gap` and `--hds-layout-grid-column-gap` CSS variables and pass custom values to them (e.g., via a local CSS variable or an inline style).
+
+```handlebars{data-execute=false}
+
+ {{!
+ multiple grid items here, with a non-standard gap between them
+ by assigning a custom value for `--hds-layout-grid-column-gap`
+ declared in the `.doc-grid-demo-custom-grid-column-gap` local class
+ }}
+
+```
+
+In this case we’re overwriting only the “column” gap value via the custom CSS class.
+
+If the grid items are wrapping on multiple lines, you have to overwrite both the “row” and “column” gap values.
+
+```handlebars{data-execute=false}
+
+ {{!
+ multiple grid items appearing on multiple rows
+ with a vertical gap of 10px and a horizontal one of 0.625rem
+ }}
+
+```
+
+### Column min width
+
+Specify a `columnMinWidth` size to exercise control over how many columns occupy a row. If the total widths of the columns add up to more than 100% of the parent they will automatically wrap to the next row as necessary to fit.
+
+Note: The `gap` size will be subtracted from the `columnMinWidth`, so take this into account when specifying a column min width.
+
+#### Using percentage values
+
+Column min-widths specified as a percentage value will maintain the same size ratio in all browser screen widths.
+
+```handlebars
+
+
+
+
+
+
+```
+
+#### Using fixed values
+
+Column min-widths specified using pixels or other fixed units, allows you to create layouts which are “automatically” responsive.
+
+##### Grid within a wider view
+
+Narrow your browser window to see the responsive behavior.
+
+```handlebars
+
+
+
+
+
+
+```
+
+##### The same grid within a narrower view
+
+At the specified column min width, columns are forced to stack in this narrower view.
+
+```handlebars
+
+
+
+
+
+
+
+
+```
+
+### Align
+
+Use the `@align` argument to align grid items to the "start", "end", "center" or "stretch" them within the grid parent.
+
+Note: The `Grid` parent will need a height set for the effect to be visible.
+
+```handlebars
+
+
+
+
+
+
+
+
+```
+
+### Colspan & rowspan
+
+Use the `colspan` and `rowspan` arguments of the `Grid::Item` component to set the number of columns or rows an item should occupy.
+
+The following example has an underlying 4-column grid specified by setting a `columnMinWidth` of “25%”. It uses `colspan` and `rowspan` to create a flexible layout roughly resembling a typical web page layout.
+
+Note: By default, if a height is set on the `Grid` parent, grid row heights will stretch proportionally to fill the `Grid`. To instead make a row conform to the minimum height of its content, you can pass an inline style as shown in the example.
+
+```handlebars
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+---
+
+## Common layout patterns
+
+Below are examples of common layout patterns that can be achieved using the `Layout::Grid` component in combination with other HDS components.
+
+!!! Warning
+
+**Important**
+
+The examples below are meant to show how one _could_ use the `Layout::Grid` component to implement certain common/standard UI patterns. They're **not** meant to be taken literally as they are and be used in production code. Also, some of these patterns may already be implemented directly in HDS components that are ready to use.
+
+!!!
+
+### Card layouts
+
+Note: The following example makes use of nested `Grid` and [Flex](/layouts/flex) components to achieve its layout. This may be overkill in actual practice but demonstrates the possibilities for achieving layouts with just these layout components alone.
+
+#### Basic 3-column layout
+
+```handlebars
+
+
+
+
+
+
+ Active resources
+
+
+
+
+
+
+
+ There are 5 active resources inside this project.
+
+
+
+
+
+
+
+ Card #2
+
+
+
+ Card #3
+
+
+```
+
+#### More complex layout
+
+Wrap content with a `Grid::Item` as needed to achieve more complex layouts.
+
+```handlebars
+
+
+
+
+
+
+
+ Better together
+
+
+ HCP Terraform now works together with HCP Vault Secrets.
+
+
+ The combined solution enables your team to provision infrastructure with a scalable and least-privilege security approach for your secrets.
+
+
+
+
+
+
+ content
+
+
+
+ content
+
+
+
+
+
+ HCP Terraform Provider Resources
+
+
+ Deploy HCP Vault
+
+ Integrate HCP Vault into your environment faster.
+
+
+
+ Deploy HCP Consul
+
+ Manage your provisions and snapshot.
+
+
+
+
+
+
+
+```