Repository: hashicorp/design-system
Pull request #2756: `Layout::Grid` component implementation (HDS-4532)
Author: login: KristinLBradley
Labels: name: packages/components
name: showcase
Created: 2025-03-08T01:14:59Z | Merged: 2025-03-25T20:56:42Z

### :pushpin: Summary

If merged, this PR adds the `Layout::Grid` & `Layout::Grid::Item` components to the design system.

👉 **Showcase Preview**: https://hds-showcase-git-hds-4532-grid-component-hashicorp.vercel.app/layouts/grid

**Documentation PR**: https://github.com/hashicorp/design-system/pull/2772

### :hammer_and_wrench: Detailed description

* Includes 2 new components:
  - `Layout::Grid` - parent/wrapper component
  - `Layout::Grid::Item` - optional child component for further layout control
* Simple API for laying out content:
  - Creates equal width columns by default
  - Set `columnMinWidth` to control how children wrap (= "automatic" responsiveness).  
   —Children stretch to fit 100% of the parent width.  
   —If `columnMinWidth` of the children exceeds 100% of parent width, they will begin to wrap to the next row.
  - Use `colSpan` & `rowSpan` options of `Layout::Grid::Item` to customize layouts
* Other features:
  - `tag`: Set a custom HTML tag other than default `div`
  - `gap`: Set vertical & horizontal spacing sizes
  - `align`: Align items within Grid to "start", "center", "end", or "stretch"
  - `isInline`: Optionally create an inline grid

<!--
### :camera_flash: Screenshots
Screenshots always help, especially if this PR will change what renders to the browser -->

### :link: External links

* Jira ticket: [HDS-4532](https://hashicorp.atlassian.net/browse/HDS-4532)
* Project plan: [HDS Project Plan - Flex/Grid components](https://docs.google.com/document/d/1SIW_vOCEYkvK6U5XkRVSVwGyhh6hR3XY5o4RdaH2g-Q)
* Related PR for `Layout::Flex`: https://github.com/hashicorp/design-system/pull/2751

***

### 👀 Component checklist

- [ ] Percy was checked for any visual regression
- [x] A changelog entry was added via [Changesets](https://github.com/changesets/changesets) if needed (see [templates here](https://hashicorp.atlassian.net/wiki/spaces/HDS/pages/3243114706/Changelog+authoring+best+practices#Templates))

:speech_balloon: Please consider using [conventional comments](https://conventionalcomments.org/) when reviewing this PR.


[HDS-4532]: https://hashicorp.atlassian.net/browse/HDS-4532?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ


Diff:
diff --git a/.changeset/strong-students-decide.md b/.changeset/strong-students-decide.md
new file mode 100644
index 00000000000..81c97a5c23d
--- /dev/null
+++ b/.changeset/strong-students-decide.md
@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`Layout::Grid` - Added `Grid` and `Grid::Item` components
diff --git a/packages/components/package.json b/packages/components/package.json
index d56835723af..278d40e5b4e 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -258,6 +258,8 @@
       "./components/hds/interactive/index.js": "./dist/_app_/components/hds/interactive/index.js",
       "./components/hds/layout/flex/index.js": "./dist/_app_/components/hds/layout/flex/index.js",
       "./components/hds/layout/flex/item.js": "./dist/_app_/components/hds/layout/flex/item.js",
+      "./components/hds/layout/grid/index.js": "./dist/_app_/components/hds/layout/grid/index.js",
+      "./components/hds/layout/grid/item.js": "./dist/_app_/components/hds/layout/grid/item.js",
       "./components/hds/link/inline.js": "./dist/_app_/components/hds/link/inline.js",
       "./components/hds/link/standalone.js": "./dist/_app_/components/hds/link/standalone.js",
       "./components/hds/menu-primitive/index.js": "./dist/_app_/components/hds/menu-primitive/index.js",
diff --git a/packages/components/src/components/hds/layout/grid/index.hbs b/packages/components/src/components/hds/layout/grid/index.hbs
new file mode 100644
index 00000000000..e17cc477406
--- /dev/null
+++ b/packages/components/src/components/hds/layout/grid/index.hbs
@@ -0,0 +1,19 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+{{!
+  Dynamically generating an HTML tag in Ember creates a dynamic component class (with the corresponding tagName), while rendering
+  a plain HTML element requires less computing cycles for Ember (you will notice it doesn't add the `ember-view` class to it).
+}}
+{{#if (eq this.componentTag "div")}}
+  <div class={{this.classNames}} {{style this.inlineStyles}} ...attributes>{{yield
+      (hash Item=(component "hds/layout/grid/item"))
+    }}</div>
+{{else}}
+  {{#let (element this.componentTag) as |Tag|}}
+    <Tag class={{this.classNames}} {{style this.inlineStyles}} ...attributes>{{yield
+        (hash Item=(component "hds/layout/grid/item"))
+      }}</Tag>
+  {{/let}}
+{{/if}}
\ No newline at end of file
diff --git a/packages/components/src/components/hds/layout/grid/index.ts b/packages/components/src/components/hds/layout/grid/index.ts
new file mode 100644
index 00000000000..fa4f2ce40a6
--- /dev/null
+++ b/packages/components/src/components/hds/layout/grid/index.ts
@@ -0,0 +1,117 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+import type { ComponentLike } from '@glint/template';
+import type { HdsLayoutGridItemSignature } from '../grid/item.ts';
+
+import { HdsLayoutGridAlignValues, HdsLayoutGridGapValues } from './types.ts';
+
+import type {
+  HdsLayoutGridAligns,
+  HdsLayoutGridGaps,
+  AvailableTagNames,
+  AvailableElements,
+} from './types.ts';
+
+export const ALIGNS: string[] = Object.values(HdsLayoutGridAlignValues);
+export const GAPS: string[] = Object.values(HdsLayoutGridGapValues);
+
+export interface HdsLayoutGridSignature {
+  Args: {
+    tag?: AvailableTagNames;
+    columnMinWidth?: string;
+    align?: HdsLayoutGridAligns;
+    gap?: HdsLayoutGridGaps | [HdsLayoutGridGaps, HdsLayoutGridGaps];
+  };
+  Blocks: {
+    default: [
+      {
+        Item?: ComponentLike<HdsLayoutGridItemSignature>;
+      },
+    ];
+  };
+  Element: AvailableElements;
+}
+
+export default class HdsLayoutGrid extends Component<HdsLayoutGridSignature> {
+  get componentTag(): AvailableTagNames {
+    return this.args.tag ?? 'div';
+  }
+
+  get align(): HdsLayoutGridAligns | undefined {
+    const { align } = this.args;
+
+    if (align) {
+      assert(
+        `@align for "Hds::Layout::Grid" must be one of the following: ${ALIGNS.join(
+          ', '
+        )}; received: ${align}`,
+        ALIGNS.includes(align)
+      );
+    }
+
+    return align;
+  }
+
+  get gap():
+    | [HdsLayoutGridGaps]
+    | [HdsLayoutGridGaps, HdsLayoutGridGaps]
+    | undefined {
+    const { gap } = this.args;
+
+    if (gap) {
+      assert(
+        `@gap for "Hds::Layout::Grid" must be a single value or an array of two values of one of the following: ${GAPS.join(
+          ', '
+        )}; received: ${gap}`,
+        (!Array.isArray(gap) && GAPS.includes(gap)) ||
+          (Array.isArray(gap) &&
+            gap.length === 2 &&
+            GAPS.includes(gap[0]) &&
+            GAPS.includes(gap[1]))
+      );
+      return Array.isArray(gap) ? gap : [gap];
+    } else {
+      return undefined;
+    }
+  }
+
+  get inlineStyles(): Record<string, unknown> {
+    const inlineStyles: {
+      '--hds-layout-grid-column-min-width'?: string;
+    } = {};
+
+    if (this.args.columnMinWidth) {
+      inlineStyles['--hds-layout-grid-column-min-width'] =
+        this.args.columnMinWidth;
+    }
+    return inlineStyles;
+  }
+
+  get classNames(): string {
+    const classes = ['hds-layout-grid'];
+
+    // add a class based on the @align argument
+    if (this.align) {
+      classes.push(`hds-layout-grid--align-items-${this.align}`);
+    }
+
+    // add a class based on the @gap argument
+    if (this.gap) {
+      if (this.gap.length === 2) {
+        classes.push(`hds-layout-grid--row-gap-${this.gap[0]}`);
+        classes.push(`hds-layout-grid--column-gap-${this.gap[1]}`);
+      } else if (this.gap.length === 1) {
+        classes.push(`hds-layout-grid--row-gap-${this.gap[0]}`);
+        classes.push(`hds-layout-grid--column-gap-${this.gap[0]}`);
+      }
+    }
+
+    return classes.join(' ');
+  }
+}
diff --git a/packages/components/src/components/hds/layout/grid/item.hbs b/packages/components/src/components/hds/layout/grid/item.hbs
new file mode 100644
index 00000000000..82e5f45e60d
--- /dev/null
+++ b/packages/components/src/components/hds/layout/grid/item.hbs
@@ -0,0 +1,15 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+{{!
+  Dynamically generating an HTML tag in Ember creates a dynamic component class (with the corresponding tagName), while rendering
+  a plain HTML element requires less computing cycles for Ember (you will notice it doesn't add the `ember-view` class to it).
+}}
+{{#if (eq this.componentTag "div")}}
+  <div class="hds-layout-grid-item" {{style this.inlineStyles}} ...attributes>{{yield}}</div>
+{{else}}
+  {{#let (element this.componentTag) as |Tag|}}
+    <Tag class="hds-layout-grid-item" {{style this.inlineStyles}} ...attributes>{{yield}}</Tag>
+  {{/let}}
+{{/if}}
\ No newline at end of file
diff --git a/packages/components/src/components/hds/layout/grid/item.ts b/packages/components/src/components/hds/layout/grid/item.ts
new file mode 100644
index 00000000000..f324ad4ff19
--- /dev/null
+++ b/packages/components/src/components/hds/layout/grid/item.ts
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+import type { AvailableTagNames, AvailableElements } from './types.ts';
+
+export interface HdsLayoutGridItemSignature {
+  Args: {
+    tag?: AvailableTagNames;
+    colspan?: number;
+    rowspan?: number;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: AvailableElements;
+}
+
+export default class HdsLayoutGridItem extends Component<HdsLayoutGridItemSignature> {
+  get componentTag(): AvailableTagNames {
+    return this.args.tag ?? 'div';
+  }
+
+  get inlineStyles(): Record<string, unknown> {
+    const inlineStyles: {
+      '--hds-layout-grid-column-span'?: string;
+      '--hds-layout-grid-row-span'?: string;
+    } = {};
+
+    if (this.args.colspan) {
+      inlineStyles['--hds-layout-grid-column-span'] =
+        this.args.colspan.toString();
+    }
+    if (this.args.rowspan) {
+      inlineStyles['--hds-layout-grid-row-span'] = this.args.rowspan.toString();
+    }
+
+    return inlineStyles;
+  }
+}
diff --git a/packages/components/src/components/hds/layout/grid/types.ts b/packages/components/src/components/hds/layout/grid/types.ts
new file mode 100644
index 00000000000..a807e84a8dd
--- /dev/null
+++ b/packages/components/src/components/hds/layout/grid/types.ts
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export enum HdsLayoutGridAlignValues {
+  Start = 'start',
+  Center = 'center',
+  End = 'end',
+  Stretch = 'stretch',
+}
+
+export type HdsLayoutGridAligns = `${HdsLayoutGridAlignValues}`;
+
+export enum HdsLayoutGridGapValues {
+  'Four' = '4',
+  'Eight' = '8',
+  'Twelve' = '12',
+  'Sixteen' = '16',
+  'TwentyFour' = '24',
+  'ThirtyTwo' = '32',
+  'FortyEight' = '48',
+}
+
+export type HdsLayoutGridGaps = `${HdsLayoutGridGapValues}`;
+
+// A list of all existing tag names in the HTMLElementTagNameMap interface
+export type AvailableTagNames = keyof HTMLElementTagNameMap;
+// A union of all types in the HTMLElementTagNameMap interface
+export type AvailableElements =
+  HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
diff --git a/packages/components/src/styles/components/layout/grid.scss b/packages/components/src/styles/components/layout/grid.scss
new file mode 100644
index 00000000000..69b36d1debd
--- /dev/null
+++ b/packages/components/src/styles/components/layout/grid.scss
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // The column gap value is subtracted from the column-min-width to prevent overflow & simplify API for consumers
+
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as a fallback value within calc()
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+  grid-template-columns:
+    repeat(
+      auto-fit,
+      minmax(
+        calc(
+          var(--hds-layout-grid-column-min-width, 0px) - var(--hds-layout-grid-column-gap, 0px)
+        ),
+        1fr
+      )
+    );
+
+  // Note: The gap style is defined here to avoid setting it repeatedly for the gap size variants defined below.
+  // For the gap size variants, we override the value of the gap custom properties to set the desired sizes.
+  // These variables can be used by the consumers as an escape hatch if they need to set non-standard gap values (but adds a bit of friction to it)
+  gap:
+    var(--hds-layout-grid-row-gap, 0)
+    var(--hds-layout-grid-column-gap, 0);
+}
+
+// align
+
+.hds-layout-grid--align-items-start { align-items: start; }
+.hds-layout-grid--align-items-center { align-items: center; }
+.hds-layout-grid--align-items-end { align-items: end; }
+.hds-layout-grid--align-items-stretch { align-items: stretch; }
+
+// gap
+
+// We set the values of the gap custom properties overriding the default value of 0
+
+.hds-layout-grid--row-gap-4 { --hds-layout-grid-row-gap: 4px; }
+.hds-layout-grid--row-gap-8 { --hds-layout-grid-row-gap: 8px; }
+.hds-layout-grid--row-gap-12 { --hds-layout-grid-row-gap: 12px; }
+.hds-layout-grid--row-gap-16 { --hds-layout-grid-row-gap: 16px; }
+.hds-layout-grid--row-gap-24 { --hds-layout-grid-row-gap: 24px; }
+.hds-layout-grid--row-gap-32 { --hds-layout-grid-row-gap: 32px; }
+.hds-layout-grid--row-gap-48 { --hds-layout-grid-row-gap: 48px; }
+
+.hds-layout-grid--column-gap-4 { --hds-layout-grid-column-gap: 4px; }
+.hds-layout-grid--column-gap-8 { --hds-layout-grid-column-gap: 8px; }
+.hds-layout-grid--column-gap-12 { --hds-layout-grid-column-gap: 12px; }
+.hds-layout-grid--column-gap-16 { --hds-layout-grid-column-gap: 16px; }
+.hds-layout-grid--column-gap-24 { --hds-layout-grid-column-gap: 24px; }
+.hds-layout-grid--column-gap-32 { --hds-layout-grid-column-gap: 32px; }
+.hds-layout-grid--column-gap-48 { --hds-layout-grid-column-gap: 48px; }
+
+// LAYOUT > GRID > ITEM
+
+.hds-layout-grid-item {
+  --hds-layout-grid-row-span: 1;
+  --hds-layout-grid-column-span: 1;
+  grid-row-start: span var(--hds-layout-grid-row-span);
+  grid-column-start: span var(--hds-layout-grid-column-span);
+}
diff --git a/packages/components/src/styles/components/layout/index.scss b/packages/components/src/styles/components/layout/index.scss
index 8264e882d16..fd7d2da59d1 100644
--- a/packages/components/src/styles/components/layout/index.scss
+++ b/packages/components/src/styles/components/layout/index.scss
@@ -4,3 +4,4 @@
  */
 
 @use "./flex";
+@use "./grid";
diff --git a/packages/components/src/template-registry.ts b/packages/components/src/template-registry.ts
index 7c527d23fbc..17ee75bce38 100644
--- a/packages/components/src/template-registry.ts
+++ b/packages/components/src/template-registry.ts
@@ -143,6 +143,8 @@ import type HdsIconTileComponent from './components/hds/icon-tile';
 import type HdsInteractiveComponent from './components/hds/interactive';
 import type HdsLayoutFlexComponent from './components/hds/layout/flex';
 import type HdsLayoutFlexItemComponent from './components/hds/layout/flex/item';
+import type HdsLayoutGridComponent from './components/hds/layout/grid';
+import type HdsLayoutGridItemComponent from './components/hds/layout/grid/item';
 import type HdsLinkInlineComponent from './components/hds/link/inline';
 import type HdsLinkStandaloneComponent from './components/hds/link/standalone';
 import type HdsMenuPrimitiveComponent from './components/hds/menu-primitive';
@@ -707,6 +709,12 @@ export default interface HdsComponentsRegistry {
   'Hds::Layout::Flex::Item': typeof HdsLayoutFlexItemComponent;
   'hds/layout/flex/item': typeof HdsLayoutFlexItemComponent;
 
+  // Layout Grid
+  'Hds::Layout::Grid': typeof HdsLayoutGridComponent;
+  'hds/layout/grid': typeof HdsLayoutGridComponent;
+  'Hds::Layout::Grid::Item': typeof HdsLayoutGridItemComponent;
+  'hds/layout/grid/item': typeof HdsLayoutGridItemComponent;
+
   // Link Inline
   'Hds::Link::Inline': typeof HdsLinkInlineComponent;
   'hds/link/inline': typeof HdsLinkInlineComponent;
diff --git a/showcase/app/router.ts b/showcase/app/router.ts
index a81cda6b8d7..b575ce0a5c5 100644
--- a/showcase/app/router.ts
+++ b/showcase/app/router.ts
@@ -90,6 +90,7 @@ Router.map(function () {
       });
     });
     this.route('flex');
+    this.route('grid');
   });
   this.route('utilities', function () {
     this.route('dialog-primitive');
diff --git a/showcase/app/routes/components/layout/grid.js b/showcase/app/routes/components/layout/grid.js
new file mode 100644
index 00000000000..460ca3fd0eb
--- /dev/null
+++ b/showcase/app/routes/components/layout/grid.js
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Route from '@ember/routing/route';
+
+export default class ComponentsLayoutGridRoute extends Route {}
diff --git a/showcase/app/routes/layouts/grid.js b/showcase/app/routes/layouts/grid.js
new file mode 100644
index 00000000000..3731fff79d3
--- /dev/null
+++ b/showcase/app/routes/layouts/grid.js
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Route from '@ember/routing/route';
+
+import {
+  ALIGNS,
+  GAPS,
+} from '@hashicorp/design-system-components/components/hds/layout/grid';
+
+export default class LayoutsGridRoute extends Route {
+  model() {
+    return { ALIGNS, GAPS };
+  }
+}
diff --git a/showcase/app/styles/app.scss b/showcase/app/styles/app.scss
index e068f89e105..f8be6cd718b 100644
--- a/showcase/app/styles/app.scss
+++ b/showcase/app/styles/app.scss
@@ -61,6 +61,7 @@
 @use "./showcase-pages/form/toggle" as showcase-toggle;
 @use "./showcase-pages/icon" as showcase-icon;
 @use "./showcase-pages/layout/flex" as showcase-layout-flex;
+@use "./showcase-pages/layout/grid" as showcase-layout-grid;
 @use "./showcase-pages/link-inline" as showcase-link-inline;
 @use "./showcase-pages/menu-primitive" as showcase-menu-primitive;
 @use "./showcase-pages/modal" as showcase-modal;
diff --git a/showcase/app/styles/showcase-pages/layout/grid.scss b/showcase/app/styles/showcase-pages/layout/grid.scss
new file mode 100644
index 00000000000..90c889f6265
--- /dev/null
+++ b/showcase/app/styles/showcase-pages/layout/grid.scss
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+// LAYOUT > GRID
+
+body.layouts-grid {
+  .shw-layouts-grid-plain-list {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  .shw-layout-grid-example-tint-flex-items {
+    .hds-layout-grid > * {
+      &:nth-child(6n+1) { background-color: #e4c5f3; }
+      &:nth-child(6n+2) { background-color: #e5ffd2; }
+      &:nth-child(6n+3) { background-color: #d2f4ff; }
+      &:nth-child(6n+4) { background-color: #fff8d2; }
+      &:nth-child(6n+5) { background-color: #f3d9c5; }
+      &:nth-child(6n+6) { background-color: #fee1ec; }
+    }
+  }
+}
diff --git a/showcase/app/templates/index.hbs b/showcase/app/templates/index.hbs
index d69b54bf648..a704efae2dc 100644
--- a/showcase/app/templates/index.hbs
+++ b/showcase/app/templates/index.hbs
@@ -304,6 +304,11 @@
           Layout::Flex
         </LinkTo>
       </li>
+      <li>
+        <LinkTo @route="layouts.grid">
+          Layout::Grid
+        </LinkTo>
+      </li>
     </ol>
     <Shw::Text::H2>Overrides</Shw::Text::H2>
     <ol class="shw-text-body">
diff --git a/showcase/app/templates/layouts/grid.hbs b/showcase/app/templates/layouts/grid.hbs
new file mode 100644
index 00000000000..911cd3050a8
--- /dev/null
+++ b/showcase/app/templates/layouts/grid.hbs
@@ -0,0 +1,393 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    <SG.Item @label="No min width columns (min-width defaults to 0px)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="24">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="24" @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="24" @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="30em min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="24" @columnMinWidth="30em">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Align</Shw::Text::H2>
+  <Shw::Text::Body>This is the
+    <code>align-items</code>
+    CSS property of
+    <code>css grid</code>.</Shw::Text::Body>
+
+  <Shw::Grid @columns={{@model.ALIGNS.length}} @gap="2rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    {{#each @model.ALIGNS as |align|}}
+      <SG.Item @label={{(concat "align=" align)}}>
+        <Shw::Outliner {{style width="120px" height="120px"}}>
+          <Hds::Layout::Grid @align={{align}} {{style width="100%" height="100%"}}>
+            <Shw::Placeholder @text="#A" @width="auto" @height="auto" {{style min-width="24px" min-height="24px"}} />
+            <Shw::Placeholder @text="#B" @width="auto" @height="auto" {{style min-width="24px" min-height="24px"}} />
+            <Shw::Placeholder @text="#C" @width="auto" @height="auto" {{style min-width="24px" min-height="24px"}} />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Gap</Shw::Text::H2>
+
+  <Shw::Text::H4 @tag="h3">Single value</Shw::Text::H4>
+
+  <Shw::Grid @columns="4" @gap="2rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    {{#each @model.GAPS as |gap|}}
+      <SG.Item @label="gap={{gap}}">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}} @columnMinWidth="50%">
+            <Shw::Placeholder @text="#1" @height="24" />
+            <Shw::Placeholder @text="#2" @height="24" />
+            <Shw::Placeholder @text="#3" @height="24" />
+            <Shw::Placeholder @text="#4" @height="24" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Text::H4 @tag="h3">Double value (row/column)</Shw::Text::H4>
+
+  <Shw::Grid @columns={{2}} @gap="2rem 4rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    {{! we use only a subset of possible combinations, just for testing purposes }}
+    {{#let (array (array "4" "48") (array "8" "32") (array "12" "24") (array "16" "16")) as |gapsList|}}
+      {{#each gapsList as |gapsArray|}}
+        <SG.Item @label="gap=[{{gapsArray}}]">
+          <Shw::Outliner>
+            <Hds::Layout::Grid @gap={{gapsArray}} @columnMinWidth="50%">
+              <Shw::Placeholder @text="item #1" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #2" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #3" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #4" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #5" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #6" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #7" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #8" @width="auto" @height="24" />
+            </Hds::Layout::Grid>
+          </Shw::Outliner>
+        </SG.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+</section>
+
+<Shw::Divider />
+
+<section data-test-percy>
+  <Shw::Text::H2>Grid::Item</Shw::Text::H2>
+
+  <Shw::Grid @columns={{1}} as |SG|>
+    <SG.Item @label="used directly or via yielded component">
+      <Shw::Outliner>
+        <Hds::Layout::Grid as |HLG|>
+          <Shw::Placeholder @text="item #1" @height="40" @background="#e4c5f3" />
+
+          <Hds::Layout::Grid::Item>
+            <Shw::Placeholder @text="item #2 within Grid::Item" @height="40" @background="#e5ffd2" />
+          </Hds::Layout::Grid::Item>
+
+          <Shw::Placeholder @text="item #3" @height="40" @background="#d2f4ff" />
+
+          <HLG.Item>
+            <Shw::Placeholder @text="item #4 within HLG.Item" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Divider @level="2" />
+
+  <Shw::Text::H3>colspan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="1st item w/ colspan=2">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colspan={{2}}>
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="1st item w/ colspan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colspan={{3}}>
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="1st item w/ colspan=4">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colspan={{4}}>
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Divider @level="2" />
+
+  <Shw::Text::H3>rowspan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="1st item w/ rowspan=2">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="12" as |HLG|>
+          <HLG.Item @rowspan={{2}}>
+            <Shw::Placeholder @text="#1" @height="100%" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="2nd item w/ rowspan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="50%" @gap="12" as |HLG|>
+          <HLG.Item>
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item @rowspan={{3}}>
+            <Shw::Placeholder @text="#2" @height="100%" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Divider @level="2" />
+
+  <Shw::Text::H3>colspan & rowspan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="1st item w/ colspan=2 & rowspan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="12" as |HLG|>
+          <HLG.Item @colspan={{2}} @rowspan={{3}}>
+            <Shw::Placeholder @text="#1" @height="100%" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#5" @height="40" @background="#f3d9c5" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#6" @height="40" @background="#fee1ec" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+</section>
+
+<Shw::Divider />
+
+<section data-test-percy>
+  <Shw::Text::H2>Examples</Shw::Text::H2>
+
+  <Shw::Grid @columns="1" @gap="2rem" as |SG|>
+    <SG.Item @label="3 column layout Card layout">
+      <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="32">
+        <Hds::Card::Container @level="mid" @hasBorder={{true}} {{style padding="24px"}}>
+          <Hds::Layout::Grid @columnMinWidth="100%" @gap="16">
+            <Hds::Layout::Flex @align="center" @gap="8">
+              <Hds::IconTile @icon="cloud" @size="small" />
+              <Hds::Text::Display @tag="h2" @size="300">
+                Active resources
+              </Hds::Text::Display>
+            </Hds::Layout::Flex>
+            <Hds::Layout::Grid @columnMinWidth="100%" @gap="8" as |LG|>
+              <LG.Item>
+                <Hds::Badge @text="5 active resources" @color="success" @icon="check-circle" @size="medium" />
+              </LG.Item>
+
+              <Hds::Text::Body @tag="p">
+                There are 5 active resources inside this project.
+              </Hds::Text::Body>
+            </Hds::Layout::Grid>
+
+            <Hds::Link::Standalone
+              @icon="arrow-right"
+              @iconPosition="trailing"
+              @text="View active resources"
+              @href="#"
+            />
+          </Hds::Layout::Grid>
+        </Hds::Card::Container>
+
+        <Hds::Card::Container @level="mid" @hasBorder={{true}} {{style padding="24px"}}>
+          <Hds::Text::Display @tag="h2" @size="300">Card #2</Hds::Text::Display>
+        </Hds::Card::Container>
+
+        <Hds::Card::Container @level="mid" @hasBorder={{true}} {{style padding="24px"}}>
+          <Hds::Text::Display @tag="h2" @size="300">Card #3</Hds::Text::Display>
+        </Hds::Card::Container>
+      </Hds::Layout::Grid>
+    </SG.Item>
+
+    <SG.Item @label="More complex layout using colspan">
+      <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="24" as |LG|>
+        <LG.Item @colspan={{2}}>
+          <Hds::Card::Container
+            @level="mid"
+            @hasBorder={{true}}
+            {{style padding="24px"}}
+            {{style background="radial-gradient(151.34% 168.34% at 0 0,#f6f9ff 0,#ebf2ff 100%)"}}
+          >
+            <Hds::Layout::Grid @columnMinWidth="100%" @gap="16">
+              <div>
+                <Hds::Badge @text="In Preview" @type="outlined" @color="highlight" />
+                <Hds::Text::Display @tag="h2" @size="300" @weight="bold">Better together</Hds::Text::Display>
+              </div>
+              <Hds::Text::Body @tag="p" @weight="semibold">
+                HCP Terraform now works together with HCP Vault Secrets.
+              </Hds::Text::Body>
+              <Hds::Text::Body @tag="p">
+                The combined solution enables your team to provision infrastructure with a scalable and least-privilege
+                security approach for your secrets.
+              </Hds::Text::Body>
+            </Hds::Layout::Grid>
+          </Hds::Card::Container>
+        </LG.Item>
+
+        <Hds::Card::Container @level="mid" @hasBorder={{true}} {{style padding="24px"}}>
+          <Hds::Text::Display @tag="h2" @size="300">content</Hds::Text::Display>
+        </Hds::Card::Container>
+
+        <Hds::Card::Container @level="mid" @hasBorder={{true}} {{style padding="24px"}}>
+          <Hds::Text::Display @tag="h2" @size="300">content</Hds::Text::Display>
+        </Hds::Card::Container>
+
+        <LG.Item @colspan={{2}}>
+          <Hds::Card::Container @level="mid" @hasBorder={{true}} {{style padding="24px"}}>
+            <Hds::Layout::Grid @columnMinWidth="100%" @gap="16">
+              <Hds::Text::Display @tag="h2" @size="300">HCP Terraform Provider Resources</Hds::Text::Display>
+              <Hds::Layout::Grid @columnMinWidth="50%" @gap="24" @tag="ul" class="shw-layouts-grid-plain-list">
+                <Hds::Layout::Grid @columnMinWidth="100%" @gap="8" @tag="li">
+                  <Hds::Text::Body @tag="p" @weight="semibold">Deploy HCP Vault</Hds::Text::Body>
+                  <Hds::Text::Body @tag="p">
+                    Integrate HCP Vault into your environment faster.
+                  </Hds::Text::Body>
+                </Hds::Layout::Grid>
+                <Hds::Layout::Grid @columnMinWidth="100%" @gap="8" @tag="li">
+                  <Hds::Text::Body @tag="p" @weight="semibold">Deploy HCP Consul</Hds::Text::Body>
+                  <Hds::Text::Body @tag="p">
+                    Manage your provisions and snapshot.
+                  </Hds::Text::Body>
+                </Hds::Layout::Grid>
+              </Hds::Layout::Grid>
+            </Hds::Layout::Grid>
+          </Hds::Card::Container>
+        </LG.Item>
+      </Hds::Layout::Grid>
+    </SG.Item>
+  </Shw::Grid>
+</section>
\ No newline at end of file
diff --git a/showcase/tests/acceptance/components/hds/layout/grid.js b/showcase/tests/acceptance/components/hds/layout/grid.js
new file mode 100644
index 00000000000..f5a598a1639
--- /dev/null
+++ b/showcase/tests/acceptance/components/hds/layout/grid.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { visit } from '@ember/test-helpers';
+import { setupApplicationTest } from 'dummy/tests/helpers';
+import { a11yAudit } from 'ember-a11y-testing/test-support';
+
+module('Acceptance | components/layout/grid', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('Components/layout/grid page passes automated a11y checks', async function (assert) {
+    await visit('/components/layout/grid');
+
+    await a11yAudit();
+
+    assert.ok(true, 'a11y automation audit passed');
+  });
+});
diff --git a/showcase/tests/acceptance/percy-test.js b/showcase/tests/acceptance/percy-test.js
index 20b9b758a42..b625896fb57 100644
--- a/showcase/tests/acceptance/percy-test.js
+++ b/showcase/tests/acceptance/percy-test.js
@@ -191,6 +191,9 @@ module('Acceptance | Percy test', function (hooks) {
     await visit('/layouts/flex');
     await percySnapshot('Flex');
 
+    await visit('/layouts/grid');
+    await percySnapshot('Grid');
+
     await visit('/overrides/power-select');
     await percySnapshot('PowerSelect');
 
diff --git a/showcase/tests/integration/components/hds/layout/grid/index-test.js b/showcase/tests/integration/components/hds/layout/grid/index-test.js
new file mode 100644
index 00000000000..efd093504d5
--- /dev/null
+++ b/showcase/tests/integration/components/hds/layout/grid/index-test.js
@@ -0,0 +1,148 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, setupOnerror } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | hds/layout/grid/index', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it should render the component with a CSS class that matches the component name', async function (assert) {
+    await render(hbs`<Hds::Layout::Grid id="test-layout-grid" />`);
+    assert.dom('#test-layout-grid').hasClass('hds-layout-grid');
+  });
+
+  // CONTENT
+
+  test('it should render the yielded content', async function (assert) {
+    await render(
+      hbs`<Hds::Layout::Grid id="test-layout-grid"><pre>test</pre></Hds::Layout::Grid>`
+    );
+    assert.dom('#test-layout-grid > pre').exists().hasText('test');
+  });
+
+  test('it should render the `Item` yielded contextual component', async function (assert) {
+    await render(
+      hbs`
+        <Hds::Layout::Grid id="test-layout-grid" as |LG|>
+          <LG.Item><pre>test</pre></LG.Item>
+        </Hds::Layout::Grid>`
+    );
+    assert
+      .dom('#test-layout-grid > .hds-layout-grid-item > pre')
+      .exists()
+      .hasText('test');
+  });
+
+  // COLUMN MIN WIDTH
+
+  // Note: A fallback value of 0px is set in the CSS for the `--hds-layout-grid-column-min-width` custom property
+  test('if the @columnMinWidth prop is not declared, --hds-layout-grid-column-min-width should be unset', async function (assert) {
+    await render(hbs`<Hds::Layout::Grid id="test-layout-grid" />`);
+    assert
+      .dom('#test-layout-grid')
+      .doesNotHaveStyle('--hds-layout-grid-column-min-width');
+  });
+
+  test('it should render the correct min-width if the @columnMinWidth prop is declared', async function (assert) {
+    await render(
+      hbs`<Hds::Layout::Grid id="test-layout-grid" @columnMinWidth="200px" />`
+    );
+    assert
+      .dom('#test-layout-grid')
+      .hasStyle({ '--hds-layout-grid-column-min-width': '200px' });
+  });
+
+  // TAG
+
+  test('it should render with a "div" element if @tag is not declared', async function (assert) {
+    await render(hbs`<Hds::Layout::Grid id="test-layout-grid" />`);
+    assert.dom('#test-layout-grid').hasTagName('div');
+  });
+
+  test('it should render with the correct @tag declared', async function (assert) {
+    await render(
+      hbs`<Hds::Layout::Grid id="test-layout-grid" @tag="section" />`
+    );
+    assert.dom('#test-layout-grid').hasTagName('section');
+  });
+
+  // ALIGN
+
+  test('it should render the element without specific classes if @align is not declared', async function (assert) {
+    await render(hbs`<Hds::Layout::Grid id="test-layout-grid" />`);
+    assert
+      .dom('#test-layout-grid')
+      .doesNotHaveClass(/hds-layout-grid--align-items-/);
+  });
+
+  test('it should render the correct CSS classes if @align props are declared', async function (assert) {
+    await render(
+      hbs`<Hds::Layout::Grid id="test-layout-grid" @align="stretch" @wrap={{true}} />`
+    );
+    assert
+      .dom('#test-layout-grid')
+      .hasClass('hds-layout-grid--align-items-stretch');
+  });
+
+  // GAP
+
+  test('it should render the element without `gap` class if no @gap is declared', async function (assert) {
+    await render(hbs`<Hds::Layout::Grid id="test-layout-grid" />`);
+    assert.dom('#test-layout-grid').doesNotHaveClass(/hds-layout-grid--gap-/);
+    assert
+      .dom('#test-layout-grid')
+      .doesNotHaveClass(/hds-layout-grid--row-gap-/);
+    assert
+      .dom('#test-layout-grid')
+      .doesNotHaveClass(/hds-layout-grid--column-gap-/);
+  });
+
+  test('it should render the correct CSS classes if the @gap prop is declared as a single value', async function (assert) {
+    await render(hbs`<Hds::Layout::Grid id="test-layout-grid" @gap="24" />`);
+    assert
+      .dom('#test-layout-grid')
+      .hasClass('hds-layout-grid--row-gap-24')
+      .hasClass('hds-layout-grid--column-gap-24');
+  });
+
+  test('it should render the correct CSS class if the @gap prop is declared as two values', async function (assert) {
+    await render(
+      hbs`<Hds::Layout::Grid id="test-layout-grid" @gap={{array "4" "48"}} />`
+    );
+    assert.dom('#test-layout-grid').hasClass('hds-layout-grid--row-gap-4');
+    assert.dom('#test-layout-grid').hasClass('hds-layout-grid--column-gap-48');
+  });
+
+  // ASSERTIONS
+
+  test('it should throw an assertion if an incorrect value for @align is provided', async function (assert) {
+    const errorMessage =
+      '@align for "Hds::Layout::Grid" must be one of the following: start, center, end, stretch; received: foo';
+    assert.expect(2);
+    setupOnerror(function (error) {
+      assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
+    });
+    await render(hbs`<Hds::Layout::Grid @align="foo" />`);
+    assert.throws(function () {
+      throw new Error(errorMessage);
+    });
+  });
+
+  test('it should throw an assertion if an incorrect value for @gap is provided', async function (assert) {
+    const errorMessage =
+      '@gap for "Hds::Layout::Grid" must be a single value or an array of two values of one of the following: 4, 8, 12, 16, 24, 32, 48; received: 4,foo';
+    assert.expect(2);
+    setupOnerror(function (error) {
+      assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
+    });
+    await render(hbs`<Hds::Layout::Grid @gap={{array 4 "foo"}} />`);
+    assert.throws(function () {
+      throw new Error(errorMessage);
+    });
+  });
+});
diff --git a/showcase/tests/integration/components/hds/layout/grid/item-test.js b/showcase/tests/integration/components/hds/layout/grid/item-test.js
new file mode 100644
index 00000000000..28339406410
--- /dev/null
+++ b/showcase/tests/integration/components/hds/layout/grid/item-test.js
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | hds/layout/grid/item', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it should render the component with a CSS class that matches the component name', async function (assert) {
+    await render(hbs`<Hds::Layout::Grid::Item id="test-layout-grid-item" />`);
+    assert.dom('#test-layout-grid-item').hasClass('hds-layout-grid-item');
+  });
+
+  // CONTENT
+
+  test('it should render the yielded content', async function (assert) {
+    await render(
+      hbs`<Hds::Layout::Grid::Item id="test-layout-grid-item"><pre>test</pre></Hds::Layout::Grid::Item>`
+    );
+    assert.dom('#test-layout-grid-item > pre').exists().hasText('test');
+  });
+
+  test('it should render as yielded contextual component', async function (assert) {
+    await render(
+      hbs`<Hds::Layout::Grid as |LG|><LG.Item id="test-layout-grid-item"><pre>test</pre></LG.Item></Hds::Layout::Grid>`
+    );
+    assert.dom('#test-layout-grid-item > pre').exists().hasText('test');
+  });
+
+  // TAG
+
+  test('it should render with a "div" element if @tag is not declared', async function (assert) {
+    await render(
+      hbs`<Hds::Layout::Grid as |LG|><LG.Item id="test-layout-grid-item" /></Hds::Layout::Grid>`
+    );
+    assert.dom('#test-layout-grid-item').hasTagName('div');
+  });
+
+  test('it should render with the correct @tag declared', async function (assert) {
+    await render(
+      hbs`<Hds::Layout::Grid as |LG|><LG.Item id="test-layout-grid-item" @tag="span" /></Hds::Layout::Grid>`
+    );
+    assert.dom('#test-layout-grid-item').hasTagName('span');
+  });
+
+  // COL SPAN
+
+  // Note: A fallback value of 1 is set in the CSS for the `--hds-layout-grid-column-span` custom property
+  test('if the @colspan prop is not declared, --hds-layout-grid-column-span should be unset', async function (assert) {
+    await render(hbs`<Hds::Layout::Grid::Item id="test-layout-grid-item" />`);
+    assert
+      .dom('#test-layout-grid-item')
+      .doesNotHaveStyle('--hds-layout-grid-column-span');
+  });
+
+  test('it should render the correct column span if the @colspan prop is declared', async function (assert) {
+    await render(
+      hbs`<Hds::Layout::Grid::Item id="test-layout-grid" @colspan={{2}} />`
+    );
+    assert
+      .dom('#test-layout-grid')
+      .hasStyle({ '--hds-layout-grid-column-span': '2' });
+  });
+
+  // ROW SPAN
+
+  // Note: A fallback value of 1 is set in the CSS for the `--hds-layout-grid-row-span` custom property
+  test('if the @rowspan prop is not declared, --hds-layout-grid-row-span should be unset', async function (assert) {
+    await render(hbs`<Hds::Layout::Grid::Item id="test-layout-grid" />`);
+    assert
+      .dom('#test-layout-grid')
+      .doesNotHaveStyle('--hds-layout-grid-row-span');
+  });
+
+  test('it should render the correct row span if the @rowspan prop is declared', async function (assert) {
+    await render(
+      hbs`<Hds::Layout::Grid::Item id="test-layout-grid" @rowspan={{2}} />`
+    );
+    assert
+      .dom('#test-layout-grid')
+      .hasStyle({ '--hds-layout-grid-row-span': '2' });
+  });
+});


Reviews:
user: login: didoo
body: @KristinLBradley OK, I've done a (detailed) first pass (except for the tests, that I'll leave for when the component is finalized and the PR officially open).

Overall nothing major to change/fix. I **really** like how you've implemented the `Grid` component, simple but powerful at the same time! 👏 👏 👏 
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T12:51:11Z
user: login: didoo
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T15:51:00Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T21:13:18Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T21:20:53Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T21:25:56Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T21:34:31Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T22:01:59Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T22:02:58Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T22:05:08Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T22:27:38Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T22:39:20Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T22:39:47Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T22:53:32Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T22:54:11Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T22:56:32Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T23:06:32Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T23:07:40Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-13T23:39:53Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T00:04:52Z
user: login: didoo
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T11:30:54Z
user: login: didoo
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T12:18:35Z
user: login: didoo
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T13:01:38Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T05:12:26Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T05:14:06Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T05:14:31Z
user: login: didoo
body: @KristinLBradley did a thorough review, and left only minor comments/suggestions.
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T12:59:35Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T15:30:10Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T15:32:10Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T16:25:07Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T16:34:15Z
user: login: didoo
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T16:35:35Z
user: login: didoo
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T16:40:46Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T16:56:55Z
user: login: dchyun
body: Looks great! Seems to cover all of the grid use cases without getting overly complex. I also tested out nesting grid components and it worked great. Just found a couple small nits.
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T18:32:22Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T18:47:04Z
user: login: didoo
body: Nice! 👏

(in case we decide to change the name of the component, removing/changing the `Layout` prefix) I'll re-review, but for now everything is OK for me)
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-03-19T10:02:28Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-19T17:58:46Z
user: login: dchyun
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-03-19T18:47:39Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-19T20:51:24Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-19T20:55:20Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-20T21:22:50Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-20T21:23:23Z
user: login: shleewhite
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-24T20:15:48Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-24T22:10:40Z
user: login: shleewhite
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-03-24T22:35:23Z
user: login: dchyun
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-25T19:48:42Z
user: login: KristinLBradley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-25T20:07:34Z
user: login: dchyun
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-25T20:20:51Z

Review comments:
diff_hunk: @@ -0,0 +1,121 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+import type { ComponentLike } from '@glint/template';
+import type { HdsLayoutGridItemSignature } from '../grid/item.ts';
+
+import { HdsLayoutGridAlignValues, HdsLayoutGridGapValues } from './types.ts';
+
+import type { HdsLayoutGridAligns, HdsLayoutGridGaps } from './types.ts';
+
+export const ALIGNS: string[] = Object.values(HdsLayoutGridAlignValues);
+export const GAPS: string[] = Object.values(HdsLayoutGridGapValues);
+
+// A list of all existing tag names in the HTMLElementTagNameMap interface
+type AvailableTagNames = keyof HTMLElementTagNameMap;
path: packages/components/src/components/hds/layout/grid/index.ts
user: login: didoo
body: [suggestion] in my branch, I've moved these two definitions to the `types.ts` file so they are shared between the `index.ts` and the `item.ts` files
created_at: 2025-03-13T09:59:24Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,121 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+import type { ComponentLike } from '@glint/template';
+import type { HdsLayoutGridItemSignature } from '../grid/item.ts';
+
+import { HdsLayoutGridAlignValues, HdsLayoutGridGapValues } from './types.ts';
+
+import type { HdsLayoutGridAligns, HdsLayoutGridGaps } from './types.ts';
+
+export const ALIGNS: string[] = Object.values(HdsLayoutGridAlignValues);
+export const GAPS: string[] = Object.values(HdsLayoutGridGapValues);
+
+// A list of all existing tag names in the HTMLElementTagNameMap interface
+type AvailableTagNames = keyof HTMLElementTagNameMap;
+// A union of all types in the HTMLElementTagNameMap interface
+type AvailableElements = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+export interface HdsLayoutGridSignature {
+  Args: {
+    tag?: AvailableTagNames;
+    columnMinWidth?: string;
+    align?: HdsLayoutGridAligns;
+    gap?: HdsLayoutGridGaps | [HdsLayoutGridGaps, HdsLayoutGridGaps];
+    isInline?: boolean;
+  };
+  Blocks: {
+    default: [
+      {
+        Item?: ComponentLike<HdsLayoutGridItemSignature>;
+      },
+    ];
+  };
+  Element: AvailableElements;
+}
+
+export default class HdsLayoutGrid extends Component<HdsLayoutGridSignature> {
+  get columnMinWidthStyle(): Record<string, string> {
path: packages/components/src/components/hds/layout/grid/index.ts
user: login: didoo
body: [nit] there's no official rule, but I tend to have these style-related getters just before the `get classNames()` (they are somehow related)
created_at: 2025-03-13T10:01:44Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,81 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as the default col min width
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+
+  // Gap is subtracted from column-min-width to prevent overflow & simplify API for consumers
+  grid-template-columns: 
+    repeat(
+      auto-fit, 
+      minmax( 
+        calc( 
+          var(--hds-layout-grid-column-min-width) - var(--hds-layout-grid-gap, var(--hds-layout-grid-column-gap, 0px)) ), 
path: packages/components/src/styles/components/layout/grid.scss
user: login: didoo
body: [idea] Not sure if it works, but what happens if you use `var(--hds-layout-grid-column-min-width, 0px)` here? in that case, everything is defined in the same place, and you don't need to define a default in the JavaScript side (where you could output the `columnMinWidthStyle` only if the consumer has provided a `@columnMinWidth` argument, otherwise you can return an empty object)
created_at: 2025-03-13T10:05:18Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,121 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+import type { ComponentLike } from '@glint/template';
+import type { HdsLayoutGridItemSignature } from '../grid/item.ts';
+
+import { HdsLayoutGridAlignValues, HdsLayoutGridGapValues } from './types.ts';
+
+import type { HdsLayoutGridAligns, HdsLayoutGridGaps } from './types.ts';
+
+export const ALIGNS: string[] = Object.values(HdsLayoutGridAlignValues);
+export const GAPS: string[] = Object.values(HdsLayoutGridGapValues);
+
+// A list of all existing tag names in the HTMLElementTagNameMap interface
+type AvailableTagNames = keyof HTMLElementTagNameMap;
+// A union of all types in the HTMLElementTagNameMap interface
+type AvailableElements = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+export interface HdsLayoutGridSignature {
+  Args: {
+    tag?: AvailableTagNames;
+    columnMinWidth?: string;
+    align?: HdsLayoutGridAligns;
+    gap?: HdsLayoutGridGaps | [HdsLayoutGridGaps, HdsLayoutGridGaps];
+    isInline?: boolean;
+  };
+  Blocks: {
+    default: [
+      {
+        Item?: ComponentLike<HdsLayoutGridItemSignature>;
+      },
+    ];
+  };
+  Element: AvailableElements;
+}
+
+export default class HdsLayoutGrid extends Component<HdsLayoutGridSignature> {
+  get columnMinWidthStyle(): Record<string, string> {
+    const columnMinWidthStyle: { [key: string]: string } = {};
+
+    // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as the default col min width
+    // https://drafts.csswg.org/css-values/#calc-type-checking
+    columnMinWidthStyle['--hds-layout-grid-column-min-width'] =
+      this.args.columnMinWidth ?? '0px';
path: packages/components/src/components/hds/layout/grid/index.ts
user: login: didoo
body: [idea] see comment below about `--hds-layout-grid-column-min-width` and default value
created_at: 2025-03-13T10:05:48Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,49 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+// A list of all existing tag names in the HTMLElementTagNameMap interface
+type AvailableTagNames = keyof HTMLElementTagNameMap;
+// A union of all types in the HTMLElementTagNameMap interface
+type AvailableElements = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+export interface HdsLayoutGridItemSignature {
+  Args: {
+    tag?: AvailableTagNames;
+    colSpan?: string;
+    rowSpan?: string;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: AvailableElements;
+}
+
+export default class HdsLayoutFlexItem extends Component<HdsLayoutGridItemSignature> {
+  get componentTag(): AvailableTagNames {
+    return this.args.tag ?? 'div';
+  }
+
+  get colSpanStyle(): Record<string, string> {
+    const colSpanStyle: { [key: string]: string } = {};
path: packages/components/src/components/hds/layout/grid/item.ts
user: login: didoo
body: [though] since you know the possible keys, one can be more specific (see how I've done it here: https://github.com/hashicorp/design-system/blob/6a2862eb3ba920131419a28d98a9a4a724de20b3/packages/components/src/components/hds/layout/flex/item.ts#L31-L35)

@alex-ju any preference about this? which approach do you think is "better™"?
created_at: 2025-03-13T10:11:00Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,49 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+// A list of all existing tag names in the HTMLElementTagNameMap interface
+type AvailableTagNames = keyof HTMLElementTagNameMap;
+// A union of all types in the HTMLElementTagNameMap interface
+type AvailableElements = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+export interface HdsLayoutGridItemSignature {
+  Args: {
+    tag?: AvailableTagNames;
+    colSpan?: string;
+    rowSpan?: string;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: AvailableElements;
+}
+
+export default class HdsLayoutFlexItem extends Component<HdsLayoutGridItemSignature> {
+  get componentTag(): AvailableTagNames {
+    return this.args.tag ?? 'div';
+  }
+
+  get colSpanStyle(): Record<string, string> {
+    const colSpanStyle: { [key: string]: string } = {};
+
+    colSpanStyle['--hds-layout-grid-column-span'] = this.args.colSpan ?? '1';
+    return colSpanStyle;
+  }
+
+  get rowSpanStyle(): Record<string, string> {
path: packages/components/src/components/hds/layout/grid/item.ts
user: login: didoo
body: [suggestion] consider unifying the two getter in a single one (possibly called `inlineStyles`) for consistency with the `Flex` implementation:  https://github.com/hashicorp/design-system/blob/6a2862eb3ba920131419a28d98a9a4a724de20b3/packages/components/src/components/hds/layout/flex/item.ts#L30-L59
created_at: 2025-03-13T10:12:37Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,49 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+// A list of all existing tag names in the HTMLElementTagNameMap interface
+type AvailableTagNames = keyof HTMLElementTagNameMap;
+// A union of all types in the HTMLElementTagNameMap interface
+type AvailableElements = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+export interface HdsLayoutGridItemSignature {
+  Args: {
+    tag?: AvailableTagNames;
+    colSpan?: string;
+    rowSpan?: string;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: AvailableElements;
+}
+
+export default class HdsLayoutFlexItem extends Component<HdsLayoutGridItemSignature> {
+  get componentTag(): AvailableTagNames {
+    return this.args.tag ?? 'div';
+  }
+
+  get colSpanStyle(): Record<string, string> {
+    const colSpanStyle: { [key: string]: string } = {};
+
+    colSpanStyle['--hds-layout-grid-column-span'] = this.args.colSpan ?? '1';
+    return colSpanStyle;
+  }
+
+  get rowSpanStyle(): Record<string, string> {
+    const rowSpanStyle: { [key: string]: string } = {};
+
+    rowSpanStyle['--hds-layout-grid-row-span'] = this.args.rowSpan ?? '1';
path: packages/components/src/components/hds/layout/grid/item.ts
user: login: didoo
body: [idea] same consideration as above, about having the default in the CSS and not in JS
created_at: 2025-03-13T10:14:36Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,49 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+// A list of all existing tag names in the HTMLElementTagNameMap interface
+type AvailableTagNames = keyof HTMLElementTagNameMap;
+// A union of all types in the HTMLElementTagNameMap interface
+type AvailableElements = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+export interface HdsLayoutGridItemSignature {
+  Args: {
+    tag?: AvailableTagNames;
+    colSpan?: string;
+    rowSpan?: string;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: AvailableElements;
+}
+
+export default class HdsLayoutFlexItem extends Component<HdsLayoutGridItemSignature> {
+  get componentTag(): AvailableTagNames {
+    return this.args.tag ?? 'div';
+  }
+
+  get colSpanStyle(): Record<string, string> {
+    const colSpanStyle: { [key: string]: string } = {};
+
+    colSpanStyle['--hds-layout-grid-column-span'] = this.args.colSpan ?? '1';
+    return colSpanStyle;
+  }
+
+  get rowSpanStyle(): Record<string, string> {
path: packages/components/src/components/hds/layout/grid/item.ts
user: login: didoo
body: Though I see a potential difference in the sense that in my case they're "classic" inline styles, while in your case you're using an inline style to set the value of a CSS variable. 
Let's think about this a bit more, maybe they are different, in the end.
created_at: 2025-03-13T10:16:06Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,49 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+// A list of all existing tag names in the HTMLElementTagNameMap interface
+type AvailableTagNames = keyof HTMLElementTagNameMap;
+// A union of all types in the HTMLElementTagNameMap interface
+type AvailableElements = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+export interface HdsLayoutGridItemSignature {
+  Args: {
+    tag?: AvailableTagNames;
+    colSpan?: string;
+    rowSpan?: string;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: AvailableElements;
+}
+
+export default class HdsLayoutFlexItem extends Component<HdsLayoutGridItemSignature> {
+  get componentTag(): AvailableTagNames {
+    return this.args.tag ?? 'div';
+  }
+
+  get colSpanStyle(): Record<string, string> {
+    const colSpanStyle: { [key: string]: string } = {};
+
+    colSpanStyle['--hds-layout-grid-column-span'] = this.args.colSpan ?? '1';
+    return colSpanStyle;
+  }
+
+  get rowSpanStyle(): Record<string, string> {
+    const rowSpanStyle: { [key: string]: string } = {};
+
+    rowSpanStyle['--hds-layout-grid-row-span'] = this.args.rowSpan ?? '1';
+    return rowSpanStyle;
+  }
+
+  get classNames(): string {
+    const classes = ['hds-layout-grid-item'];
path: packages/components/src/components/hds/layout/grid/item.ts
user: login: didoo
body: [issue] we tend not to use a getter if there's only one class (but if it's just in case you need it, and you're waiting to see if more arguments are added, I understand)
created_at: 2025-03-13T10:17:02Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,81 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as the default col min width
path: packages/components/src/styles/components/layout/grid.scss
user: login: didoo
body: [question] this comment probably applies here if you define the default here, no?
created_at: 2025-03-13T10:19:30Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,81 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as the default col min width
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+
+  // Gap is subtracted from column-min-width to prevent overflow & simplify API for consumers
+  grid-template-columns: 
+    repeat(
+      auto-fit, 
+      minmax( 
+        calc( 
+          var(--hds-layout-grid-column-min-width) - var(--hds-layout-grid-gap, var(--hds-layout-grid-column-gap, 0px)) ), 
+        1fr 
+      )
+    );
+
+  // gap: rowGap, columnGap
+  gap: 
+    var(--hds-layout-grid-row-gap, var(--hds-layout-grid-gap, 0)) 
+    var(--hds-layout-grid-column-gap, var(--hds-layout-grid-gap, 0));
path: packages/components/src/styles/components/layout/grid.scss
user: login: didoo
body: [though] I know this works, and it's very elegant, but at the same time I think it makes it harder to understand what is going on (and to debug) if you're not a CSS expert; would you consider a much simpler/classic implementation similar to the one used in the `Flex` component? https://github.com/hashicorp/design-system/blob/6a2862eb3ba920131419a28d98a9a4a724de20b3/packages/components/src/styles/components/layout/flex.scss#L86-L106
created_at: 2025-03-13T10:24:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,81 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as the default col min width
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+
+  // Gap is subtracted from column-min-width to prevent overflow & simplify API for consumers
+  grid-template-columns: 
+    repeat(
+      auto-fit, 
+      minmax( 
+        calc( 
+          var(--hds-layout-grid-column-min-width) - var(--hds-layout-grid-gap, var(--hds-layout-grid-column-gap, 0px)) ), 
+        1fr 
+      )
+    );
+
+  // gap: rowGap, columnGap
+  gap: 
+    var(--hds-layout-grid-row-gap, var(--hds-layout-grid-gap, 0)) 
+    var(--hds-layout-grid-column-gap, var(--hds-layout-grid-gap, 0));
path: packages/components/src/styles/components/layout/grid.scss
user: login: didoo
body: [note] if you want to use anyway CSS variables for this (and I see the appeal, I may consider doing the same if we think it's OK) then you can have just two`--hds-layout-grid-[row|column]-gap` local variables, and assign the values depending if it's row/column/both gaps.
created_at: 2025-03-13T10:28:35Z
author_association: CONTRIBUTOR
diff_hunk: @@ -4,3 +4,4 @@
  */
 
 @use "./flex";
path: packages/components/src/styles/components/layout/index.scss
user: login: didoo
body: [note] I've just realized that you're basing your branch off mine, while in theory would be better to base off `main` (or there will be inevitable conflicts). Let's untangle the two, at the next sync.
created_at: 2025-03-13T10:31:04Z
author_association: CONTRIBUTOR
path: showcase/tests/acceptance/components/hds/layout/grid.js
user: login: didoo
body: Let's discuss about this, I am not sure we need a11y tests for layout-only components
created_at: 2025-03-13T10:34:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,81 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as the default col min width
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+
+  // Gap is subtracted from column-min-width to prevent overflow & simplify API for consumers
+  grid-template-columns: 
+    repeat(
+      auto-fit, 
+      minmax( 
+        calc( 
+          var(--hds-layout-grid-column-min-width) - var(--hds-layout-grid-gap, var(--hds-layout-grid-column-gap, 0px)) ), 
+        1fr 
+      )
+    );
+
+  // gap: rowGap, columnGap
+  gap: 
+    var(--hds-layout-grid-row-gap, var(--hds-layout-grid-gap, 0)) 
+    var(--hds-layout-grid-column-gap, var(--hds-layout-grid-gap, 0));
+}
+
+// inline
+
+.hds-layout-grid--is-inline {
+  display: inline-grid;
+  // prevents issue preventing grid columns from lining up in a row
path: packages/components/src/styles/components/layout/grid.scss
user: login: didoo
body: ```suggestion
  // prevents issue where grid columns don't line up in a row
```
created_at: 2025-03-13T10:38:30Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,355 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Text::H3>gap size 0 (default)</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="No min width columns (defaults to 0)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid>
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
path: showcase/app/templates/layouts/grid.hbs
user: login: didoo
body: [note] see how I've implemented (I've updated it yesterday) the "tinting" of the items, to avoid declaring over and over the background colors: https://github.com/hashicorp/design-system/blob/6a2862eb3ba920131419a28d98a9a4a724de20b3/showcase/app/styles/showcase-pages/layout/flex.scss#L25-L34
created_at: 2025-03-13T10:41:53Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,355 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Text::H3>gap size 0 (default)</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="No min width columns (defaults to 0)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid>
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  {{#each @model.GAPS as |gap|}}
path: showcase/app/templates/layouts/grid.hbs
user: login: didoo
body: [thought] I don't think you need - in this context - to test all the possible variants of the gap; what you're doing here is testing the column min width; the gap combinations are tested below; this would remove a lot of "noise" and reduce the page length significantly.
created_at: 2025-03-13T10:44:01Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,355 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Text::H3>gap size 0 (default)</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="No min width columns (defaults to 0)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid>
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  {{#each @model.GAPS as |gap|}}
+    <Shw::Text::H3>gap size {{gap}}</Shw::Text::H3>
+
+    <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+      <SG.Item @label="No min width columns (defaults to 0)">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="250px min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="250px" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="33.33% min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="33.33%" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    </Shw::Grid>
+  {{/each}}
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Align</Shw::Text::H2>
+  <Shw::Text::Body>This is the
+    <code>align-items</code>
+    CSS property of
+    <code>css grid</code>.</Shw::Text::Body>
+
+  <Shw::Grid @columns={{@model.ALIGNS.length}} @gap="2rem" as |SG|>
+    {{#each @model.ALIGNS as |align|}}
+      <SG.Item @label={{(concat "align=" align)}}>
+        <Shw::Outliner {{style width="120px" height="120px"}}>
+          <Hds::Layout::Grid @align={{align}} {{style width="100%" height="100%"}}>
+            <Shw::Placeholder
+              @text="#A"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e4c5f3"
+            />
+            <Shw::Placeholder
+              @text="#B"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e5ffd2"
+            />
+            <Shw::Placeholder
+              @text="#C"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#d2f4ff"
+            />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H3>Gap</Shw::Text::H3>
path: showcase/app/templates/layouts/grid.hbs
user: login: didoo
body: My bad, I had the wrong heading level in my documentation

```suggestion
  <Shw::Text::H2>Gap</Shw::Text::H2>
```
created_at: 2025-03-13T10:55:13Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,355 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Text::H3>gap size 0 (default)</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="No min width columns (defaults to 0)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid>
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  {{#each @model.GAPS as |gap|}}
+    <Shw::Text::H3>gap size {{gap}}</Shw::Text::H3>
+
+    <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+      <SG.Item @label="No min width columns (defaults to 0)">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="250px min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="250px" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="33.33% min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="33.33%" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    </Shw::Grid>
+  {{/each}}
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Align</Shw::Text::H2>
+  <Shw::Text::Body>This is the
+    <code>align-items</code>
+    CSS property of
+    <code>css grid</code>.</Shw::Text::Body>
+
+  <Shw::Grid @columns={{@model.ALIGNS.length}} @gap="2rem" as |SG|>
+    {{#each @model.ALIGNS as |align|}}
+      <SG.Item @label={{(concat "align=" align)}}>
+        <Shw::Outliner {{style width="120px" height="120px"}}>
+          <Hds::Layout::Grid @align={{align}} {{style width="100%" height="100%"}}>
+            <Shw::Placeholder
+              @text="#A"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e4c5f3"
+            />
+            <Shw::Placeholder
+              @text="#B"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e5ffd2"
+            />
+            <Shw::Placeholder
+              @text="#C"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#d2f4ff"
+            />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H3>Gap</Shw::Text::H3>
+
+  <Shw::Text::H4>Single value</Shw::Text::H4>
path: showcase/app/templates/layouts/grid.hbs
user: login: didoo
body: ```suggestion
  <Shw::Text::H4 @tag="h3>Single value</Shw::Text::H4>
```
created_at: 2025-03-13T10:55:38Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,355 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Text::H3>gap size 0 (default)</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="No min width columns (defaults to 0)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid>
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  {{#each @model.GAPS as |gap|}}
+    <Shw::Text::H3>gap size {{gap}}</Shw::Text::H3>
+
+    <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+      <SG.Item @label="No min width columns (defaults to 0)">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="250px min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="250px" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="33.33% min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="33.33%" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    </Shw::Grid>
+  {{/each}}
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Align</Shw::Text::H2>
+  <Shw::Text::Body>This is the
+    <code>align-items</code>
+    CSS property of
+    <code>css grid</code>.</Shw::Text::Body>
+
+  <Shw::Grid @columns={{@model.ALIGNS.length}} @gap="2rem" as |SG|>
+    {{#each @model.ALIGNS as |align|}}
+      <SG.Item @label={{(concat "align=" align)}}>
+        <Shw::Outliner {{style width="120px" height="120px"}}>
+          <Hds::Layout::Grid @align={{align}} {{style width="100%" height="100%"}}>
+            <Shw::Placeholder
+              @text="#A"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e4c5f3"
+            />
+            <Shw::Placeholder
+              @text="#B"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e5ffd2"
+            />
+            <Shw::Placeholder
+              @text="#C"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#d2f4ff"
+            />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H3>Gap</Shw::Text::H3>
+
+  <Shw::Text::H4>Single value</Shw::Text::H4>
+
+  <Shw::Grid @columns="4" @gap="2rem" as |SG|>
+    {{#each @model.GAPS as |gap|}}
+      <SG.Item @label="gap={{gap}}">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}} @columnMinWidth="50%">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Text::H4>Double value (row/column)</Shw::Text::H4>
path: showcase/app/templates/layouts/grid.hbs
user: login: didoo
body: ```suggestion
  <Shw::Text::H4 @tag="h3>Double value (row/column)</Shw::Text::H4>
```
created_at: 2025-03-13T10:55:47Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,355 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Text::H3>gap size 0 (default)</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="No min width columns (defaults to 0)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid>
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  {{#each @model.GAPS as |gap|}}
+    <Shw::Text::H3>gap size {{gap}}</Shw::Text::H3>
+
+    <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+      <SG.Item @label="No min width columns (defaults to 0)">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="250px min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="250px" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="33.33% min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="33.33%" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    </Shw::Grid>
+  {{/each}}
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Align</Shw::Text::H2>
+  <Shw::Text::Body>This is the
+    <code>align-items</code>
+    CSS property of
+    <code>css grid</code>.</Shw::Text::Body>
+
+  <Shw::Grid @columns={{@model.ALIGNS.length}} @gap="2rem" as |SG|>
+    {{#each @model.ALIGNS as |align|}}
+      <SG.Item @label={{(concat "align=" align)}}>
+        <Shw::Outliner {{style width="120px" height="120px"}}>
+          <Hds::Layout::Grid @align={{align}} {{style width="100%" height="100%"}}>
+            <Shw::Placeholder
+              @text="#A"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e4c5f3"
+            />
+            <Shw::Placeholder
+              @text="#B"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e5ffd2"
+            />
+            <Shw::Placeholder
+              @text="#C"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#d2f4ff"
+            />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H3>Gap</Shw::Text::H3>
+
+  <Shw::Text::H4>Single value</Shw::Text::H4>
+
+  <Shw::Grid @columns="4" @gap="2rem" as |SG|>
+    {{#each @model.GAPS as |gap|}}
+      <SG.Item @label="gap={{gap}}">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}} @columnMinWidth="50%">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Text::H4>Double value (row/column)</Shw::Text::H4>
+
+  <Shw::Grid @columns={{2}} @gap="2rem 4rem" as |SG|>
+    {{! we use only a subset of possible combinations, just for testing purposes }}
+    {{#let (array (array "4" "48") (array "8" "32") (array "12" "24") (array "16" "16")) as |gapsList|}}
+      {{#each gapsList as |gapsArray|}}
+        <SG.Item @label="gap=[{{gapsArray}}]">
+          <Shw::Outliner>
+            <Hds::Layout::Grid @gap={{gapsArray}} @columnMinWidth="50%">
+              <Shw::Placeholder @text="item #1" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #2" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #3" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #4" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #5" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #6" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #7" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #8" @width="auto" @height="24" />
+            </Hds::Layout::Grid>
+          </Shw::Outliner>
+        </SG.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H3>Display</Shw::Text::H3>
path: showcase/app/templates/layouts/grid.hbs
user: login: didoo
body: ```suggestion
  <Shw::Text::H2>Display</Shw::Text::H2>
```
created_at: 2025-03-13T10:56:10Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,355 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Text::H3>gap size 0 (default)</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="No min width columns (defaults to 0)">
+      <Shw::Outliner>
path: showcase/app/templates/layouts/grid.hbs
user: login: didoo
body: [note] In my showcase page for `Flex` I have got ridden of all the outliner components, to simplify/streamline a bit the code (see https://github.com/hashicorp/design-system/pull/2751/commits/5079e0cbe2ac1908243c5ff625557a58913f16a0). If you want I can do the same to your page (it's a bit boring/time-consuming)
created_at: 2025-03-13T10:58:34Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,355 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Text::H3>gap size 0 (default)</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="No min width columns (defaults to 0)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid>
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  {{#each @model.GAPS as |gap|}}
+    <Shw::Text::H3>gap size {{gap}}</Shw::Text::H3>
+
+    <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+      <SG.Item @label="No min width columns (defaults to 0)">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="250px min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="250px" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="33.33% min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="33.33%" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    </Shw::Grid>
+  {{/each}}
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Align</Shw::Text::H2>
+  <Shw::Text::Body>This is the
+    <code>align-items</code>
+    CSS property of
+    <code>css grid</code>.</Shw::Text::Body>
+
+  <Shw::Grid @columns={{@model.ALIGNS.length}} @gap="2rem" as |SG|>
+    {{#each @model.ALIGNS as |align|}}
+      <SG.Item @label={{(concat "align=" align)}}>
+        <Shw::Outliner {{style width="120px" height="120px"}}>
+          <Hds::Layout::Grid @align={{align}} {{style width="100%" height="100%"}}>
+            <Shw::Placeholder
+              @text="#A"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e4c5f3"
+            />
+            <Shw::Placeholder
+              @text="#B"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e5ffd2"
+            />
+            <Shw::Placeholder
+              @text="#C"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#d2f4ff"
+            />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H3>Gap</Shw::Text::H3>
+
+  <Shw::Text::H4>Single value</Shw::Text::H4>
+
+  <Shw::Grid @columns="4" @gap="2rem" as |SG|>
+    {{#each @model.GAPS as |gap|}}
+      <SG.Item @label="gap={{gap}}">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}} @columnMinWidth="50%">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Text::H4>Double value (row/column)</Shw::Text::H4>
+
+  <Shw::Grid @columns={{2}} @gap="2rem 4rem" as |SG|>
+    {{! we use only a subset of possible combinations, just for testing purposes }}
+    {{#let (array (array "4" "48") (array "8" "32") (array "12" "24") (array "16" "16")) as |gapsList|}}
+      {{#each gapsList as |gapsArray|}}
+        <SG.Item @label="gap=[{{gapsArray}}]">
+          <Shw::Outliner>
+            <Hds::Layout::Grid @gap={{gapsArray}} @columnMinWidth="50%">
+              <Shw::Placeholder @text="item #1" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #2" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #3" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #4" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #5" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #6" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #7" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #8" @width="auto" @height="24" />
+            </Hds::Layout::Grid>
+          </Shw::Outliner>
+        </SG.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H3>Display</Shw::Text::H3>
+
+  <Shw::Grid @gap="2rem" @columns={{2}} as |SF|>
+    {{#let (array false true) as |booleans|}}
+      {{#each booleans as |isInline|}}
+        <SF.Item @label={{if isInline "inline-grid (isInline=true)" "grid (default)"}}>
+          <Hds::Text::Body @size="200" @tag="div">
+            Lorem
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+              <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+              <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+              <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+            </Hds::Layout::Grid>
+            sit amet
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#A" @height="24" @background="#e4c5f3" />
+              <Shw::Placeholder @text="#B" @height="24" @background="#e5ffd2" />
+              <Shw::Placeholder @text="#C" @height="24" @background="#d2f4ff" />
+              <Shw::Placeholder @text="#D" @height="24" @background="#fff8d2" />
+            </Hds::Layout::Grid>
+            elit.
+          </Hds::Text::Body>
+        </SF.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+</section>
+
+<Shw::Divider />
+
+<section data-test-percy>
+  <Shw::Text::H2>Grid::Item</Shw::Text::H2>
+
+  <Shw::Grid @columns={{1}} as |SG|>
+    <SG.Item @label="used directly or via yielded component">
+      <Shw::Outliner>
+        <Hds::Layout::Grid as |HLG|>
+          <Shw::Placeholder @text="item #1" @height="40" @background="#e4c5f3" />
+
+          <Hds::Layout::Grid::Item>
+            <Shw::Placeholder @text="item #2 within Grid::Item" @height="40" @background="#e5ffd2" />
+          </Hds::Layout::Grid::Item>
+
+          <Shw::Placeholder @text="item #3" @height="40" @background="#d2f4ff" />
+
+          <HLG.Item>
+            <Shw::Placeholder @text="item #4 within HLG.Item" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>colSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="colSpan=2">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="2">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="colSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item @colSpan="3">
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
path: showcase/app/templates/layouts/grid.hbs
user: login: didoo
body: [note] to me in this way it makes it more easy to spot the differences between the tree examples

```suggestion
          <HLG.Item @colSpan="3">
            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
          </HLG.Item>
          <HLG.Item>
            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
          </HLG.Item>
```
created_at: 2025-03-13T11:01:29Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,355 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Text::H3>gap size 0 (default)</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="No min width columns (defaults to 0)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid>
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  {{#each @model.GAPS as |gap|}}
+    <Shw::Text::H3>gap size {{gap}}</Shw::Text::H3>
+
+    <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+      <SG.Item @label="No min width columns (defaults to 0)">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="250px min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="250px" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="33.33% min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="33.33%" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    </Shw::Grid>
+  {{/each}}
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Align</Shw::Text::H2>
+  <Shw::Text::Body>This is the
+    <code>align-items</code>
+    CSS property of
+    <code>css grid</code>.</Shw::Text::Body>
+
+  <Shw::Grid @columns={{@model.ALIGNS.length}} @gap="2rem" as |SG|>
+    {{#each @model.ALIGNS as |align|}}
+      <SG.Item @label={{(concat "align=" align)}}>
+        <Shw::Outliner {{style width="120px" height="120px"}}>
+          <Hds::Layout::Grid @align={{align}} {{style width="100%" height="100%"}}>
+            <Shw::Placeholder
+              @text="#A"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e4c5f3"
+            />
+            <Shw::Placeholder
+              @text="#B"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e5ffd2"
+            />
+            <Shw::Placeholder
+              @text="#C"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#d2f4ff"
+            />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H3>Gap</Shw::Text::H3>
+
+  <Shw::Text::H4>Single value</Shw::Text::H4>
+
+  <Shw::Grid @columns="4" @gap="2rem" as |SG|>
+    {{#each @model.GAPS as |gap|}}
+      <SG.Item @label="gap={{gap}}">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}} @columnMinWidth="50%">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Text::H4>Double value (row/column)</Shw::Text::H4>
+
+  <Shw::Grid @columns={{2}} @gap="2rem 4rem" as |SG|>
+    {{! we use only a subset of possible combinations, just for testing purposes }}
+    {{#let (array (array "4" "48") (array "8" "32") (array "12" "24") (array "16" "16")) as |gapsList|}}
+      {{#each gapsList as |gapsArray|}}
+        <SG.Item @label="gap=[{{gapsArray}}]">
+          <Shw::Outliner>
+            <Hds::Layout::Grid @gap={{gapsArray}} @columnMinWidth="50%">
+              <Shw::Placeholder @text="item #1" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #2" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #3" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #4" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #5" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #6" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #7" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #8" @width="auto" @height="24" />
+            </Hds::Layout::Grid>
+          </Shw::Outliner>
+        </SG.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H3>Display</Shw::Text::H3>
+
+  <Shw::Grid @gap="2rem" @columns={{2}} as |SF|>
+    {{#let (array false true) as |booleans|}}
+      {{#each booleans as |isInline|}}
+        <SF.Item @label={{if isInline "inline-grid (isInline=true)" "grid (default)"}}>
+          <Hds::Text::Body @size="200" @tag="div">
+            Lorem
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+              <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+              <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+              <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+            </Hds::Layout::Grid>
+            sit amet
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#A" @height="24" @background="#e4c5f3" />
+              <Shw::Placeholder @text="#B" @height="24" @background="#e5ffd2" />
+              <Shw::Placeholder @text="#C" @height="24" @background="#d2f4ff" />
+              <Shw::Placeholder @text="#D" @height="24" @background="#fff8d2" />
+            </Hds::Layout::Grid>
+            elit.
+          </Hds::Text::Body>
+        </SF.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+</section>
+
+<Shw::Divider />
+
+<section data-test-percy>
+  <Shw::Text::H2>Grid::Item</Shw::Text::H2>
+
+  <Shw::Grid @columns={{1}} as |SG|>
+    <SG.Item @label="used directly or via yielded component">
+      <Shw::Outliner>
+        <Hds::Layout::Grid as |HLG|>
+          <Shw::Placeholder @text="item #1" @height="40" @background="#e4c5f3" />
+
+          <Hds::Layout::Grid::Item>
+            <Shw::Placeholder @text="item #2 within Grid::Item" @height="40" @background="#e5ffd2" />
+          </Hds::Layout::Grid::Item>
+
+          <Shw::Placeholder @text="item #3" @height="40" @background="#d2f4ff" />
+
+          <HLG.Item>
+            <Shw::Placeholder @text="item #4 within HLG.Item" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>colSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="colSpan=2">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="2">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="colSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item @colSpan="3">
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
path: showcase/app/templates/layouts/grid.hbs
user: login: didoo
body: plus, you can use a loop in that case
created_at: 2025-03-13T11:01:42Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,355 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Text::H3>gap size 0 (default)</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="No min width columns (defaults to 0)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid>
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  {{#each @model.GAPS as |gap|}}
+    <Shw::Text::H3>gap size {{gap}}</Shw::Text::H3>
+
+    <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+      <SG.Item @label="No min width columns (defaults to 0)">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="250px min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="250px" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="33.33% min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="33.33%" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    </Shw::Grid>
+  {{/each}}
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Align</Shw::Text::H2>
+  <Shw::Text::Body>This is the
+    <code>align-items</code>
+    CSS property of
+    <code>css grid</code>.</Shw::Text::Body>
+
+  <Shw::Grid @columns={{@model.ALIGNS.length}} @gap="2rem" as |SG|>
+    {{#each @model.ALIGNS as |align|}}
+      <SG.Item @label={{(concat "align=" align)}}>
+        <Shw::Outliner {{style width="120px" height="120px"}}>
+          <Hds::Layout::Grid @align={{align}} {{style width="100%" height="100%"}}>
+            <Shw::Placeholder
+              @text="#A"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e4c5f3"
+            />
+            <Shw::Placeholder
+              @text="#B"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e5ffd2"
+            />
+            <Shw::Placeholder
+              @text="#C"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#d2f4ff"
+            />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H3>Gap</Shw::Text::H3>
+
+  <Shw::Text::H4>Single value</Shw::Text::H4>
+
+  <Shw::Grid @columns="4" @gap="2rem" as |SG|>
+    {{#each @model.GAPS as |gap|}}
+      <SG.Item @label="gap={{gap}}">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}} @columnMinWidth="50%">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Text::H4>Double value (row/column)</Shw::Text::H4>
+
+  <Shw::Grid @columns={{2}} @gap="2rem 4rem" as |SG|>
+    {{! we use only a subset of possible combinations, just for testing purposes }}
+    {{#let (array (array "4" "48") (array "8" "32") (array "12" "24") (array "16" "16")) as |gapsList|}}
+      {{#each gapsList as |gapsArray|}}
+        <SG.Item @label="gap=[{{gapsArray}}]">
+          <Shw::Outliner>
+            <Hds::Layout::Grid @gap={{gapsArray}} @columnMinWidth="50%">
+              <Shw::Placeholder @text="item #1" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #2" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #3" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #4" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #5" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #6" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #7" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #8" @width="auto" @height="24" />
+            </Hds::Layout::Grid>
+          </Shw::Outliner>
+        </SG.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H3>Display</Shw::Text::H3>
+
+  <Shw::Grid @gap="2rem" @columns={{2}} as |SF|>
+    {{#let (array false true) as |booleans|}}
+      {{#each booleans as |isInline|}}
+        <SF.Item @label={{if isInline "inline-grid (isInline=true)" "grid (default)"}}>
+          <Hds::Text::Body @size="200" @tag="div">
+            Lorem
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+              <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+              <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+              <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+            </Hds::Layout::Grid>
+            sit amet
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#A" @height="24" @background="#e4c5f3" />
+              <Shw::Placeholder @text="#B" @height="24" @background="#e5ffd2" />
+              <Shw::Placeholder @text="#C" @height="24" @background="#d2f4ff" />
+              <Shw::Placeholder @text="#D" @height="24" @background="#fff8d2" />
+            </Hds::Layout::Grid>
+            elit.
+          </Hds::Text::Body>
+        </SF.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+</section>
+
+<Shw::Divider />
+
+<section data-test-percy>
+  <Shw::Text::H2>Grid::Item</Shw::Text::H2>
+
+  <Shw::Grid @columns={{1}} as |SG|>
+    <SG.Item @label="used directly or via yielded component">
+      <Shw::Outliner>
+        <Hds::Layout::Grid as |HLG|>
+          <Shw::Placeholder @text="item #1" @height="40" @background="#e4c5f3" />
+
+          <Hds::Layout::Grid::Item>
+            <Shw::Placeholder @text="item #2 within Grid::Item" @height="40" @background="#e5ffd2" />
+          </Hds::Layout::Grid::Item>
+
+          <Shw::Placeholder @text="item #3" @height="40" @background="#d2f4ff" />
+
+          <HLG.Item>
+            <Shw::Placeholder @text="item #4 within HLG.Item" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>colSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="colSpan=2">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="2">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
path: showcase/app/templates/layouts/grid.hbs
user: login: didoo
body: [note] Let's discuss if we want to always add a `Grid::Item` as a wrapper or not (technically is not needed, no?). This will impact also how we document the component for our consumers.
created_at: 2025-03-13T11:09:47Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,355 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Text::H3>gap size 0 (default)</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="No min width columns (defaults to 0)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid>
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
path: showcase/app/templates/layouts/grid.hbs
user: login: didoo
body: [note] in most of my examples, I've changed these placeholders height to `40px` to make it more easy to spot the different blocks; I can do it for you if you want (it's time consuming/boring)
created_at: 2025-03-13T12:18:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,355 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Text::H3>gap size 0 (default)</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="No min width columns (defaults to 0)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid>
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  {{#each @model.GAPS as |gap|}}
+    <Shw::Text::H3>gap size {{gap}}</Shw::Text::H3>
+
+    <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+      <SG.Item @label="No min width columns (defaults to 0)">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="250px min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="250px" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="33.33% min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="33.33%" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    </Shw::Grid>
+  {{/each}}
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Align</Shw::Text::H2>
+  <Shw::Text::Body>This is the
+    <code>align-items</code>
+    CSS property of
+    <code>css grid</code>.</Shw::Text::Body>
+
+  <Shw::Grid @columns={{@model.ALIGNS.length}} @gap="2rem" as |SG|>
+    {{#each @model.ALIGNS as |align|}}
+      <SG.Item @label={{(concat "align=" align)}}>
+        <Shw::Outliner {{style width="120px" height="120px"}}>
+          <Hds::Layout::Grid @align={{align}} {{style width="100%" height="100%"}}>
+            <Shw::Placeholder
+              @text="#A"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e4c5f3"
+            />
+            <Shw::Placeholder
+              @text="#B"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e5ffd2"
+            />
+            <Shw::Placeholder
+              @text="#C"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#d2f4ff"
+            />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H3>Gap</Shw::Text::H3>
+
+  <Shw::Text::H4>Single value</Shw::Text::H4>
+
+  <Shw::Grid @columns="4" @gap="2rem" as |SG|>
+    {{#each @model.GAPS as |gap|}}
+      <SG.Item @label="gap={{gap}}">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}} @columnMinWidth="50%">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Text::H4>Double value (row/column)</Shw::Text::H4>
+
+  <Shw::Grid @columns={{2}} @gap="2rem 4rem" as |SG|>
+    {{! we use only a subset of possible combinations, just for testing purposes }}
+    {{#let (array (array "4" "48") (array "8" "32") (array "12" "24") (array "16" "16")) as |gapsList|}}
+      {{#each gapsList as |gapsArray|}}
+        <SG.Item @label="gap=[{{gapsArray}}]">
+          <Shw::Outliner>
+            <Hds::Layout::Grid @gap={{gapsArray}} @columnMinWidth="50%">
+              <Shw::Placeholder @text="item #1" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #2" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #3" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #4" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #5" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #6" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #7" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #8" @width="auto" @height="24" />
+            </Hds::Layout::Grid>
+          </Shw::Outliner>
+        </SG.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H3>Display</Shw::Text::H3>
+
+  <Shw::Grid @gap="2rem" @columns={{2}} as |SF|>
+    {{#let (array false true) as |booleans|}}
+      {{#each booleans as |isInline|}}
+        <SF.Item @label={{if isInline "inline-grid (isInline=true)" "grid (default)"}}>
+          <Hds::Text::Body @size="200" @tag="div">
+            Lorem
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+              <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+              <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+              <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+            </Hds::Layout::Grid>
+            sit amet
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#A" @height="24" @background="#e4c5f3" />
+              <Shw::Placeholder @text="#B" @height="24" @background="#e5ffd2" />
+              <Shw::Placeholder @text="#C" @height="24" @background="#d2f4ff" />
+              <Shw::Placeholder @text="#D" @height="24" @background="#fff8d2" />
+            </Hds::Layout::Grid>
+            elit.
+          </Hds::Text::Body>
+        </SF.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+</section>
+
+<Shw::Divider />
+
+<section data-test-percy>
+  <Shw::Text::H2>Grid::Item</Shw::Text::H2>
+
+  <Shw::Grid @columns={{1}} as |SG|>
+    <SG.Item @label="used directly or via yielded component">
+      <Shw::Outliner>
+        <Hds::Layout::Grid as |HLG|>
+          <Shw::Placeholder @text="item #1" @height="40" @background="#e4c5f3" />
+
+          <Hds::Layout::Grid::Item>
+            <Shw::Placeholder @text="item #2 within Grid::Item" @height="40" @background="#e5ffd2" />
+          </Hds::Layout::Grid::Item>
+
+          <Shw::Placeholder @text="item #3" @height="40" @background="#d2f4ff" />
+
+          <HLG.Item>
+            <Shw::Placeholder @text="item #4 within HLG.Item" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>colSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="colSpan=2">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="2">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="colSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item @colSpan="3">
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="colSpan=4">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="4">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>rowSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="rowSpan=2">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="12" as |HLG|>
+          <HLG.Item @rowSpan="2">
+            <Shw::Placeholder @text="#1" @height="100%" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="rowSpan=3">
path: showcase/app/templates/layouts/grid.hbs
user: login: didoo
body: [idea] I would consider having two examples here, that are both interesting: 
- one where it's the first item that has `rowSpan=3`
- one where it's the second item that has `rowSpan=3` 
created_at: 2025-03-13T12:29:13Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,355 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Text::H3>gap size 0 (default)</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="No min width columns (defaults to 0)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid>
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  {{#each @model.GAPS as |gap|}}
+    <Shw::Text::H3>gap size {{gap}}</Shw::Text::H3>
+
+    <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+      <SG.Item @label="No min width columns (defaults to 0)">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="250px min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="250px" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="33.33% min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="33.33%" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    </Shw::Grid>
+  {{/each}}
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Align</Shw::Text::H2>
+  <Shw::Text::Body>This is the
+    <code>align-items</code>
+    CSS property of
+    <code>css grid</code>.</Shw::Text::Body>
+
+  <Shw::Grid @columns={{@model.ALIGNS.length}} @gap="2rem" as |SG|>
+    {{#each @model.ALIGNS as |align|}}
+      <SG.Item @label={{(concat "align=" align)}}>
+        <Shw::Outliner {{style width="120px" height="120px"}}>
+          <Hds::Layout::Grid @align={{align}} {{style width="100%" height="100%"}}>
+            <Shw::Placeholder
+              @text="#A"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e4c5f3"
+            />
+            <Shw::Placeholder
+              @text="#B"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e5ffd2"
+            />
+            <Shw::Placeholder
+              @text="#C"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#d2f4ff"
+            />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H3>Gap</Shw::Text::H3>
+
+  <Shw::Text::H4>Single value</Shw::Text::H4>
+
+  <Shw::Grid @columns="4" @gap="2rem" as |SG|>
+    {{#each @model.GAPS as |gap|}}
+      <SG.Item @label="gap={{gap}}">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}} @columnMinWidth="50%">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Text::H4>Double value (row/column)</Shw::Text::H4>
+
+  <Shw::Grid @columns={{2}} @gap="2rem 4rem" as |SG|>
+    {{! we use only a subset of possible combinations, just for testing purposes }}
+    {{#let (array (array "4" "48") (array "8" "32") (array "12" "24") (array "16" "16")) as |gapsList|}}
+      {{#each gapsList as |gapsArray|}}
+        <SG.Item @label="gap=[{{gapsArray}}]">
+          <Shw::Outliner>
+            <Hds::Layout::Grid @gap={{gapsArray}} @columnMinWidth="50%">
+              <Shw::Placeholder @text="item #1" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #2" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #3" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #4" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #5" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #6" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #7" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #8" @width="auto" @height="24" />
+            </Hds::Layout::Grid>
+          </Shw::Outliner>
+        </SG.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H3>Display</Shw::Text::H3>
+
+  <Shw::Grid @gap="2rem" @columns={{2}} as |SF|>
+    {{#let (array false true) as |booleans|}}
+      {{#each booleans as |isInline|}}
+        <SF.Item @label={{if isInline "inline-grid (isInline=true)" "grid (default)"}}>
+          <Hds::Text::Body @size="200" @tag="div">
+            Lorem
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+              <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+              <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+              <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+            </Hds::Layout::Grid>
+            sit amet
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#A" @height="24" @background="#e4c5f3" />
+              <Shw::Placeholder @text="#B" @height="24" @background="#e5ffd2" />
+              <Shw::Placeholder @text="#C" @height="24" @background="#d2f4ff" />
+              <Shw::Placeholder @text="#D" @height="24" @background="#fff8d2" />
+            </Hds::Layout::Grid>
+            elit.
+          </Hds::Text::Body>
+        </SF.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+</section>
+
+<Shw::Divider />
+
+<section data-test-percy>
+  <Shw::Text::H2>Grid::Item</Shw::Text::H2>
+
+  <Shw::Grid @columns={{1}} as |SG|>
+    <SG.Item @label="used directly or via yielded component">
+      <Shw::Outliner>
+        <Hds::Layout::Grid as |HLG|>
+          <Shw::Placeholder @text="item #1" @height="40" @background="#e4c5f3" />
+
+          <Hds::Layout::Grid::Item>
+            <Shw::Placeholder @text="item #2 within Grid::Item" @height="40" @background="#e5ffd2" />
+          </Hds::Layout::Grid::Item>
+
+          <Shw::Placeholder @text="item #3" @height="40" @background="#d2f4ff" />
+
+          <HLG.Item>
+            <Shw::Placeholder @text="item #4 within HLG.Item" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>colSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="colSpan=2">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="2">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="colSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item @colSpan="3">
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="colSpan=4">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="4">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>rowSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="rowSpan=2">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="12" as |HLG|>
+          <HLG.Item @rowSpan="2">
+            <Shw::Placeholder @text="#1" @height="100%" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="rowSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="50%" @gap="12" as |HLG|>
+          <HLG.Item>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item @rowSpan="3">
+            <Shw::Placeholder @text="#2" @height="100%" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>colSpan & rowSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="colSpan=2, rowSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="12" as |HLG|>
path: showcase/app/templates/layouts/grid.hbs
user: login: didoo
body: [suggestion] What do you think of something like this, to differentiate it from the previous examples and make more explicit how the two `colSpan/rowSpan` are working together? 
<img width="1115" alt="screenshot_4763" src="https://github.com/user-attachments/assets/3bc5da6a-f7f8-4c9e-9f9f-d53551086197" />

created_at: 2025-03-13T12:36:37Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,355 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Text::H3>gap size 0 (default)</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="No min width columns (defaults to 0)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid>
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  {{#each @model.GAPS as |gap|}}
+    <Shw::Text::H3>gap size {{gap}}</Shw::Text::H3>
+
+    <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+      <SG.Item @label="No min width columns (defaults to 0)">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="250px min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="250px" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="33.33% min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="33.33%" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    </Shw::Grid>
+  {{/each}}
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Align</Shw::Text::H2>
+  <Shw::Text::Body>This is the
+    <code>align-items</code>
+    CSS property of
+    <code>css grid</code>.</Shw::Text::Body>
+
+  <Shw::Grid @columns={{@model.ALIGNS.length}} @gap="2rem" as |SG|>
+    {{#each @model.ALIGNS as |align|}}
+      <SG.Item @label={{(concat "align=" align)}}>
+        <Shw::Outliner {{style width="120px" height="120px"}}>
+          <Hds::Layout::Grid @align={{align}} {{style width="100%" height="100%"}}>
+            <Shw::Placeholder
+              @text="#A"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e4c5f3"
+            />
+            <Shw::Placeholder
+              @text="#B"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e5ffd2"
+            />
+            <Shw::Placeholder
+              @text="#C"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#d2f4ff"
+            />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H3>Gap</Shw::Text::H3>
+
+  <Shw::Text::H4>Single value</Shw::Text::H4>
+
+  <Shw::Grid @columns="4" @gap="2rem" as |SG|>
+    {{#each @model.GAPS as |gap|}}
+      <SG.Item @label="gap={{gap}}">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}} @columnMinWidth="50%">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Text::H4>Double value (row/column)</Shw::Text::H4>
+
+  <Shw::Grid @columns={{2}} @gap="2rem 4rem" as |SG|>
+    {{! we use only a subset of possible combinations, just for testing purposes }}
+    {{#let (array (array "4" "48") (array "8" "32") (array "12" "24") (array "16" "16")) as |gapsList|}}
+      {{#each gapsList as |gapsArray|}}
+        <SG.Item @label="gap=[{{gapsArray}}]">
+          <Shw::Outliner>
+            <Hds::Layout::Grid @gap={{gapsArray}} @columnMinWidth="50%">
+              <Shw::Placeholder @text="item #1" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #2" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #3" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #4" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #5" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #6" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #7" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #8" @width="auto" @height="24" />
+            </Hds::Layout::Grid>
+          </Shw::Outliner>
+        </SG.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H3>Display</Shw::Text::H3>
+
+  <Shw::Grid @gap="2rem" @columns={{2}} as |SF|>
+    {{#let (array false true) as |booleans|}}
+      {{#each booleans as |isInline|}}
+        <SF.Item @label={{if isInline "inline-grid (isInline=true)" "grid (default)"}}>
+          <Hds::Text::Body @size="200" @tag="div">
+            Lorem
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+              <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+              <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+              <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+            </Hds::Layout::Grid>
+            sit amet
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#A" @height="24" @background="#e4c5f3" />
+              <Shw::Placeholder @text="#B" @height="24" @background="#e5ffd2" />
+              <Shw::Placeholder @text="#C" @height="24" @background="#d2f4ff" />
+              <Shw::Placeholder @text="#D" @height="24" @background="#fff8d2" />
+            </Hds::Layout::Grid>
+            elit.
+          </Hds::Text::Body>
+        </SF.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+</section>
+
+<Shw::Divider />
+
+<section data-test-percy>
+  <Shw::Text::H2>Grid::Item</Shw::Text::H2>
+
+  <Shw::Grid @columns={{1}} as |SG|>
+    <SG.Item @label="used directly or via yielded component">
+      <Shw::Outliner>
+        <Hds::Layout::Grid as |HLG|>
+          <Shw::Placeholder @text="item #1" @height="40" @background="#e4c5f3" />
+
+          <Hds::Layout::Grid::Item>
+            <Shw::Placeholder @text="item #2 within Grid::Item" @height="40" @background="#e5ffd2" />
+          </Hds::Layout::Grid::Item>
+
+          <Shw::Placeholder @text="item #3" @height="40" @background="#d2f4ff" />
+
+          <HLG.Item>
+            <Shw::Placeholder @text="item #4 within HLG.Item" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>colSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="colSpan=2">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="2">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="colSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item @colSpan="3">
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="colSpan=4">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="4">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>rowSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="rowSpan=2">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="12" as |HLG|>
+          <HLG.Item @rowSpan="2">
+            <Shw::Placeholder @text="#1" @height="100%" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="rowSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="50%" @gap="12" as |HLG|>
+          <HLG.Item>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item @rowSpan="3">
+            <Shw::Placeholder @text="#2" @height="100%" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>colSpan & rowSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="colSpan=2, rowSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="2" @rowSpan="3">
+            <Shw::Placeholder @text="#1" @height="100%" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+</section>
path: showcase/app/templates/layouts/grid.hbs
user: login: didoo
body: [thought] Let's think if makes sense to add also some real(ish) "examples" like I did for the `Flex`: https://hds-showcase-git-flex-component-implementation-hashicorp.vercel.app/layouts/flex#examples

reasons: it's easier for us to spot if the component covers some real(ish) use case, and also it helped me a lot later when writing the documentation.
created_at: 2025-03-13T12:49:18Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,355 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Text::H3>gap size 0 (default)</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="No min width columns (defaults to 0)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid>
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  {{#each @model.GAPS as |gap|}}
path: showcase/app/templates/layouts/grid.hbs
user: login: didoo
body: On a second thought, if the intent is to test that the gap is subtracted from the min-width, then probably I would leave only one example, with the biggest gap possible to show that it works
created_at: 2025-03-13T15:51:00Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,355 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Text::H3>gap size 0 (default)</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="No min width columns (defaults to 0)">
+      <Shw::Outliner>
path: showcase/app/templates/layouts/grid.hbs
user: login: KristinLBradley
body: Thanks, I think I'll leave those alone for now.
created_at: 2025-03-13T21:13:18Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,355 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Text::H3>gap size 0 (default)</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="No min width columns (defaults to 0)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid>
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  {{#each @model.GAPS as |gap|}}
path: showcase/app/templates/layouts/grid.hbs
user: login: KristinLBradley
body: Yes, I wanted to make sure that the column layouts didn't break unexpectedly with the way I'm subtracting the gap size from the column min-width size as you said.
created_at: 2025-03-13T21:20:53Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,355 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Text::H3>gap size 0 (default)</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="No min width columns (defaults to 0)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid>
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  {{#each @model.GAPS as |gap|}}
path: showcase/app/templates/layouts/grid.hbs
user: login: KristinLBradley
body: Updated to remove repetitive examples
created_at: 2025-03-13T21:25:56Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,355 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Text::H3>gap size 0 (default)</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="No min width columns (defaults to 0)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid>
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  {{#each @model.GAPS as |gap|}}
+    <Shw::Text::H3>gap size {{gap}}</Shw::Text::H3>
+
+    <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+      <SG.Item @label="No min width columns (defaults to 0)">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="250px min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="250px" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="33.33% min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="33.33%" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    </Shw::Grid>
+  {{/each}}
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Align</Shw::Text::H2>
+  <Shw::Text::Body>This is the
+    <code>align-items</code>
+    CSS property of
+    <code>css grid</code>.</Shw::Text::Body>
+
+  <Shw::Grid @columns={{@model.ALIGNS.length}} @gap="2rem" as |SG|>
+    {{#each @model.ALIGNS as |align|}}
+      <SG.Item @label={{(concat "align=" align)}}>
+        <Shw::Outliner {{style width="120px" height="120px"}}>
+          <Hds::Layout::Grid @align={{align}} {{style width="100%" height="100%"}}>
+            <Shw::Placeholder
+              @text="#A"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e4c5f3"
+            />
+            <Shw::Placeholder
+              @text="#B"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e5ffd2"
+            />
+            <Shw::Placeholder
+              @text="#C"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#d2f4ff"
+            />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H3>Gap</Shw::Text::H3>
+
+  <Shw::Text::H4>Single value</Shw::Text::H4>
+
+  <Shw::Grid @columns="4" @gap="2rem" as |SG|>
+    {{#each @model.GAPS as |gap|}}
+      <SG.Item @label="gap={{gap}}">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}} @columnMinWidth="50%">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Text::H4>Double value (row/column)</Shw::Text::H4>
+
+  <Shw::Grid @columns={{2}} @gap="2rem 4rem" as |SG|>
+    {{! we use only a subset of possible combinations, just for testing purposes }}
+    {{#let (array (array "4" "48") (array "8" "32") (array "12" "24") (array "16" "16")) as |gapsList|}}
+      {{#each gapsList as |gapsArray|}}
+        <SG.Item @label="gap=[{{gapsArray}}]">
+          <Shw::Outliner>
+            <Hds::Layout::Grid @gap={{gapsArray}} @columnMinWidth="50%">
+              <Shw::Placeholder @text="item #1" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #2" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #3" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #4" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #5" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #6" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #7" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #8" @width="auto" @height="24" />
+            </Hds::Layout::Grid>
+          </Shw::Outliner>
+        </SG.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H3>Display</Shw::Text::H3>
+
+  <Shw::Grid @gap="2rem" @columns={{2}} as |SF|>
+    {{#let (array false true) as |booleans|}}
+      {{#each booleans as |isInline|}}
+        <SF.Item @label={{if isInline "inline-grid (isInline=true)" "grid (default)"}}>
+          <Hds::Text::Body @size="200" @tag="div">
+            Lorem
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+              <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+              <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+              <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+            </Hds::Layout::Grid>
+            sit amet
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#A" @height="24" @background="#e4c5f3" />
+              <Shw::Placeholder @text="#B" @height="24" @background="#e5ffd2" />
+              <Shw::Placeholder @text="#C" @height="24" @background="#d2f4ff" />
+              <Shw::Placeholder @text="#D" @height="24" @background="#fff8d2" />
+            </Hds::Layout::Grid>
+            elit.
+          </Hds::Text::Body>
+        </SF.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+</section>
+
+<Shw::Divider />
+
+<section data-test-percy>
+  <Shw::Text::H2>Grid::Item</Shw::Text::H2>
+
+  <Shw::Grid @columns={{1}} as |SG|>
+    <SG.Item @label="used directly or via yielded component">
+      <Shw::Outliner>
+        <Hds::Layout::Grid as |HLG|>
+          <Shw::Placeholder @text="item #1" @height="40" @background="#e4c5f3" />
+
+          <Hds::Layout::Grid::Item>
+            <Shw::Placeholder @text="item #2 within Grid::Item" @height="40" @background="#e5ffd2" />
+          </Hds::Layout::Grid::Item>
+
+          <Shw::Placeholder @text="item #3" @height="40" @background="#d2f4ff" />
+
+          <HLG.Item>
+            <Shw::Placeholder @text="item #4 within HLG.Item" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>colSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="colSpan=2">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="2">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="colSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item @colSpan="3">
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="colSpan=4">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="4">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>rowSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="rowSpan=2">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="12" as |HLG|>
+          <HLG.Item @rowSpan="2">
+            <Shw::Placeholder @text="#1" @height="100%" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="rowSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="50%" @gap="12" as |HLG|>
+          <HLG.Item>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item @rowSpan="3">
+            <Shw::Placeholder @text="#2" @height="100%" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>colSpan & rowSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="colSpan=2, rowSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="12" as |HLG|>
path: showcase/app/templates/layouts/grid.hbs
user: login: KristinLBradley
body: Adding. (I will adjust colors of placeholders later)
created_at: 2025-03-13T21:34:31Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,49 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+// A list of all existing tag names in the HTMLElementTagNameMap interface
+type AvailableTagNames = keyof HTMLElementTagNameMap;
+// A union of all types in the HTMLElementTagNameMap interface
+type AvailableElements = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+export interface HdsLayoutGridItemSignature {
+  Args: {
+    tag?: AvailableTagNames;
+    colSpan?: string;
+    rowSpan?: string;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: AvailableElements;
+}
+
+export default class HdsLayoutFlexItem extends Component<HdsLayoutGridItemSignature> {
+  get componentTag(): AvailableTagNames {
+    return this.args.tag ?? 'div';
+  }
+
+  get colSpanStyle(): Record<string, string> {
+    const colSpanStyle: { [key: string]: string } = {};
path: packages/components/src/components/hds/layout/grid/item.ts
user: login: KristinLBradley
body: This makes sense to me so I went ahead and updated them.
created_at: 2025-03-13T22:01:59Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,49 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+// A list of all existing tag names in the HTMLElementTagNameMap interface
+type AvailableTagNames = keyof HTMLElementTagNameMap;
+// A union of all types in the HTMLElementTagNameMap interface
+type AvailableElements = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+export interface HdsLayoutGridItemSignature {
+  Args: {
+    tag?: AvailableTagNames;
+    colSpan?: string;
+    rowSpan?: string;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: AvailableElements;
+}
+
+export default class HdsLayoutFlexItem extends Component<HdsLayoutGridItemSignature> {
+  get componentTag(): AvailableTagNames {
+    return this.args.tag ?? 'div';
+  }
+
+  get colSpanStyle(): Record<string, string> {
+    const colSpanStyle: { [key: string]: string } = {};
+
+    colSpanStyle['--hds-layout-grid-column-span'] = this.args.colSpan ?? '1';
+    return colSpanStyle;
+  }
+
+  get rowSpanStyle(): Record<string, string> {
path: packages/components/src/components/hds/layout/grid/item.ts
user: login: KristinLBradley
body: It worked and it makes sense so I went ahead and updated my code.
created_at: 2025-03-13T22:02:58Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,81 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as the default col min width
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+
+  // Gap is subtracted from column-min-width to prevent overflow & simplify API for consumers
+  grid-template-columns: 
+    repeat(
+      auto-fit, 
+      minmax( 
+        calc( 
+          var(--hds-layout-grid-column-min-width) - var(--hds-layout-grid-gap, var(--hds-layout-grid-column-gap, 0px)) ), 
path: packages/components/src/styles/components/layout/grid.scss
user: login: KristinLBradley
body: I was doing something like that initially but during the process of getting everything working I changed it. Will see if makes more sense there after all. Or maybe not exactly but I was trying different combos of where/how to set the default values before I got things working.

Anyway, I'll try this...
created_at: 2025-03-13T22:05:07Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,121 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+import type { ComponentLike } from '@glint/template';
+import type { HdsLayoutGridItemSignature } from '../grid/item.ts';
+
+import { HdsLayoutGridAlignValues, HdsLayoutGridGapValues } from './types.ts';
+
+import type { HdsLayoutGridAligns, HdsLayoutGridGaps } from './types.ts';
+
+export const ALIGNS: string[] = Object.values(HdsLayoutGridAlignValues);
+export const GAPS: string[] = Object.values(HdsLayoutGridGapValues);
+
+// A list of all existing tag names in the HTMLElementTagNameMap interface
+type AvailableTagNames = keyof HTMLElementTagNameMap;
+// A union of all types in the HTMLElementTagNameMap interface
+type AvailableElements = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+export interface HdsLayoutGridSignature {
+  Args: {
+    tag?: AvailableTagNames;
+    columnMinWidth?: string;
+    align?: HdsLayoutGridAligns;
+    gap?: HdsLayoutGridGaps | [HdsLayoutGridGaps, HdsLayoutGridGaps];
+    isInline?: boolean;
+  };
+  Blocks: {
+    default: [
+      {
+        Item?: ComponentLike<HdsLayoutGridItemSignature>;
+      },
+    ];
+  };
+  Element: AvailableElements;
+}
+
+export default class HdsLayoutGrid extends Component<HdsLayoutGridSignature> {
+  get columnMinWidthStyle(): Record<string, string> {
+    const columnMinWidthStyle: { [key: string]: string } = {};
+
+    // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as the default col min width
+    // https://drafts.csswg.org/css-values/#calc-type-checking
+    columnMinWidthStyle['--hds-layout-grid-column-min-width'] =
+      this.args.columnMinWidth ?? '0px';
path: packages/components/src/components/hds/layout/grid/index.ts
user: login: KristinLBradley
body: Updating
created_at: 2025-03-13T22:27:38Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,81 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as the default col min width
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+
+  // Gap is subtracted from column-min-width to prevent overflow & simplify API for consumers
+  grid-template-columns: 
+    repeat(
+      auto-fit, 
+      minmax( 
+        calc( 
+          var(--hds-layout-grid-column-min-width) - var(--hds-layout-grid-gap, var(--hds-layout-grid-column-gap, 0px)) ), 
path: packages/components/src/styles/components/layout/grid.scss
user: login: KristinLBradley
body: I updated all of these to rely on fallback values within the CSS.
created_at: 2025-03-13T22:39:19Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,81 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as the default col min width
path: packages/components/src/styles/components/layout/grid.scss
user: login: KristinLBradley
body: Yes
created_at: 2025-03-13T22:39:47Z
author_association: CONTRIBUTOR
diff_hunk: @@ -4,3 +4,4 @@
  */
 
 @use "./flex";
path: packages/components/src/styles/components/layout/index.scss
user: login: KristinLBradley
body: Originally I thought you had mentioned that I may want to base my branch off yours so that's what I ended up doing.
created_at: 2025-03-13T22:53:31Z
author_association: CONTRIBUTOR
path: showcase/tests/acceptance/components/hds/layout/grid.js
user: login: KristinLBradley
body: Yeah, doesn't seem overly necessary
created_at: 2025-03-13T22:54:11Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,81 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as the default col min width
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+
+  // Gap is subtracted from column-min-width to prevent overflow & simplify API for consumers
+  grid-template-columns: 
+    repeat(
+      auto-fit, 
+      minmax( 
+        calc( 
+          var(--hds-layout-grid-column-min-width) - var(--hds-layout-grid-gap, var(--hds-layout-grid-column-gap, 0px)) ), 
+        1fr 
+      )
+    );
+
+  // gap: rowGap, columnGap
+  gap: 
+    var(--hds-layout-grid-row-gap, var(--hds-layout-grid-gap, 0)) 
+    var(--hds-layout-grid-column-gap, var(--hds-layout-grid-gap, 0));
path: packages/components/src/styles/components/layout/grid.scss
user: login: KristinLBradley
body: I did this partially so I could use the gap values in my calculation for the column min-width. I can add comments explaining/making what's going on clearer...
created_at: 2025-03-13T22:56:32Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,81 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as the default col min width
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+
+  // Gap is subtracted from column-min-width to prevent overflow & simplify API for consumers
+  grid-template-columns: 
+    repeat(
+      auto-fit, 
+      minmax( 
+        calc( 
+          var(--hds-layout-grid-column-min-width) - var(--hds-layout-grid-gap, var(--hds-layout-grid-column-gap, 0px)) ), 
+        1fr 
+      )
+    );
+
+  // gap: rowGap, columnGap
+  gap: 
+    var(--hds-layout-grid-row-gap, var(--hds-layout-grid-gap, 0)) 
+    var(--hds-layout-grid-column-gap, var(--hds-layout-grid-gap, 0));
path: packages/components/src/styles/components/layout/grid.scss
user: login: KristinLBradley
body: I added some comments to try to explain. Let me know if they help. (or not)
created_at: 2025-03-13T23:06:32Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,81 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as the default col min width
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+
+  // Gap is subtracted from column-min-width to prevent overflow & simplify API for consumers
+  grid-template-columns: 
+    repeat(
+      auto-fit, 
+      minmax( 
+        calc( 
+          var(--hds-layout-grid-column-min-width) - var(--hds-layout-grid-gap, var(--hds-layout-grid-column-gap, 0px)) ), 
+        1fr 
+      )
+    );
+
+  // gap: rowGap, columnGap
+  gap: 
+    var(--hds-layout-grid-row-gap, var(--hds-layout-grid-gap, 0)) 
+    var(--hds-layout-grid-column-gap, var(--hds-layout-grid-gap, 0));
path: packages/components/src/styles/components/layout/grid.scss
user: login: KristinLBradley
body: Let me look at refactoring it how you said above next...
created_at: 2025-03-13T23:07:40Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,81 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as the default col min width
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+
+  // Gap is subtracted from column-min-width to prevent overflow & simplify API for consumers
+  grid-template-columns: 
+    repeat(
+      auto-fit, 
+      minmax( 
+        calc( 
+          var(--hds-layout-grid-column-min-width) - var(--hds-layout-grid-gap, var(--hds-layout-grid-column-gap, 0px)) ), 
+        1fr 
+      )
+    );
+
+  // gap: rowGap, columnGap
+  gap: 
+    var(--hds-layout-grid-row-gap, var(--hds-layout-grid-gap, 0)) 
+    var(--hds-layout-grid-column-gap, var(--hds-layout-grid-gap, 0));
path: packages/components/src/styles/components/layout/grid.scss
user: login: KristinLBradley
body: Alright, I refactored now to remove the extra gap custom property.
created_at: 2025-03-13T23:39:53Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,355 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Text::H3>gap size 0 (default)</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="No min width columns (defaults to 0)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid>
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  {{#each @model.GAPS as |gap|}}
+    <Shw::Text::H3>gap size {{gap}}</Shw::Text::H3>
+
+    <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+      <SG.Item @label="No min width columns (defaults to 0)">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="250px min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="250px" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="33.33% min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="33.33%" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    </Shw::Grid>
+  {{/each}}
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Align</Shw::Text::H2>
+  <Shw::Text::Body>This is the
+    <code>align-items</code>
+    CSS property of
+    <code>css grid</code>.</Shw::Text::Body>
+
+  <Shw::Grid @columns={{@model.ALIGNS.length}} @gap="2rem" as |SG|>
+    {{#each @model.ALIGNS as |align|}}
+      <SG.Item @label={{(concat "align=" align)}}>
+        <Shw::Outliner {{style width="120px" height="120px"}}>
+          <Hds::Layout::Grid @align={{align}} {{style width="100%" height="100%"}}>
+            <Shw::Placeholder
+              @text="#A"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e4c5f3"
+            />
+            <Shw::Placeholder
+              @text="#B"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e5ffd2"
+            />
+            <Shw::Placeholder
+              @text="#C"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#d2f4ff"
+            />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H3>Gap</Shw::Text::H3>
+
+  <Shw::Text::H4>Single value</Shw::Text::H4>
+
+  <Shw::Grid @columns="4" @gap="2rem" as |SG|>
+    {{#each @model.GAPS as |gap|}}
+      <SG.Item @label="gap={{gap}}">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}} @columnMinWidth="50%">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Text::H4>Double value (row/column)</Shw::Text::H4>
+
+  <Shw::Grid @columns={{2}} @gap="2rem 4rem" as |SG|>
+    {{! we use only a subset of possible combinations, just for testing purposes }}
+    {{#let (array (array "4" "48") (array "8" "32") (array "12" "24") (array "16" "16")) as |gapsList|}}
+      {{#each gapsList as |gapsArray|}}
+        <SG.Item @label="gap=[{{gapsArray}}]">
+          <Shw::Outliner>
+            <Hds::Layout::Grid @gap={{gapsArray}} @columnMinWidth="50%">
+              <Shw::Placeholder @text="item #1" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #2" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #3" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #4" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #5" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #6" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #7" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #8" @width="auto" @height="24" />
+            </Hds::Layout::Grid>
+          </Shw::Outliner>
+        </SG.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H3>Display</Shw::Text::H3>
+
+  <Shw::Grid @gap="2rem" @columns={{2}} as |SF|>
+    {{#let (array false true) as |booleans|}}
+      {{#each booleans as |isInline|}}
+        <SF.Item @label={{if isInline "inline-grid (isInline=true)" "grid (default)"}}>
+          <Hds::Text::Body @size="200" @tag="div">
+            Lorem
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+              <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+              <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+              <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+            </Hds::Layout::Grid>
+            sit amet
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#A" @height="24" @background="#e4c5f3" />
+              <Shw::Placeholder @text="#B" @height="24" @background="#e5ffd2" />
+              <Shw::Placeholder @text="#C" @height="24" @background="#d2f4ff" />
+              <Shw::Placeholder @text="#D" @height="24" @background="#fff8d2" />
+            </Hds::Layout::Grid>
+            elit.
+          </Hds::Text::Body>
+        </SF.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+</section>
+
+<Shw::Divider />
+
+<section data-test-percy>
+  <Shw::Text::H2>Grid::Item</Shw::Text::H2>
+
+  <Shw::Grid @columns={{1}} as |SG|>
+    <SG.Item @label="used directly or via yielded component">
+      <Shw::Outliner>
+        <Hds::Layout::Grid as |HLG|>
+          <Shw::Placeholder @text="item #1" @height="40" @background="#e4c5f3" />
+
+          <Hds::Layout::Grid::Item>
+            <Shw::Placeholder @text="item #2 within Grid::Item" @height="40" @background="#e5ffd2" />
+          </Hds::Layout::Grid::Item>
+
+          <Shw::Placeholder @text="item #3" @height="40" @background="#d2f4ff" />
+
+          <HLG.Item>
+            <Shw::Placeholder @text="item #4 within HLG.Item" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>colSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="colSpan=2">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="2">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
path: showcase/app/templates/layouts/grid.hbs
user: login: KristinLBradley
body: I don't think it should be necessary to require use of `Item` components but we can discuss.
created_at: 2025-03-14T00:04:52Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,112 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // The column gap value is subtracted from the column-min-width to prevent overflow & simplify API for consumers
+
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as a fallback value within calc()
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+  grid-template-columns: 
+    repeat(
+      auto-fit, 
+      minmax( 
+        calc( 
+          var(--hds-layout-grid-column-min-width, 0px) - var(--hds-layout-grid-column-gap, 0px)
+        ), 
+        1fr 
+      )
+    );
+
+  // Note: The gap style is defined here to avoid setting it repeatedly for the gap size variants defined below.
+  // For the gap size variants, we override the value of the gap custom properties to set the desired sizes.
+  gap: 
+    var(--hds-layout-grid-row-gap, 0)
+    var(--hds-layout-grid-column-gap, 0);
+}
+
+// inline
+
+.hds-layout-grid--is-inline {
+  display: inline-grid;
+  // prevents issue where grid columns don't line up in a row
+  max-width: 100%;
+}
+
+// align
+
+.hds-layout-grid--align-items-start { align-items: start;}
+.hds-layout-grid--align-items-center { align-items: center;}
+.hds-layout-grid--align-items-end { align-items: end; }
+.hds-layout-grid--align-items-stretch { align-items: stretch; }
+
+// gap
+
+// We set the values of the gap custom properties overriding the default value of 0
+
+// set row & column gap size together
+.hds-layout-grid--gap-4 {
+  --hds-layout-grid-row-gap: 4px;
+  --hds-layout-grid-column-gap: 4px;
+}
+
+.hds-layout-grid--gap-8 {
+  --hds-layout-grid-row-gap: 8px;
+  --hds-layout-grid-column-gap: 8px;
+}
+
+.hds-layout-grid--gap-12 {
+  --hds-layout-grid-row-gap: 12px;
+  --hds-layout-grid-column-gap: 12px;
+}
+
+.hds-layout-grid--gap-16 {
+  --hds-layout-grid-row-gap: 16px;
+  --hds-layout-grid-column-gap: 16px;
+}
+
+.hds-layout-grid--gap-24 {
+  --hds-layout-grid-row-gap: 24px;
+  --hds-layout-grid-column-gap: 24px;
+}
+
+.hds-layout-grid--gap-32 {
+  --hds-layout-grid-row-gap: 32px;
+  --hds-layout-grid-column-gap: 32px;
+}
+
+.hds-layout-grid--gap-48 {
+  --hds-layout-grid-row-gap: 48px;
+  --hds-layout-grid-column-gap: 48px;
+}
+
+// set just row gap size
+.hds-layout-grid--row-gap-4 { --hds-layout-grid-row-gap: 4px; }
path: packages/components/src/styles/components/layout/grid.scss
user: login: didoo
body: [💡] now that I think of, that's the escape hatch for our consumers, if they want a non-standard `gap` spacing (in `Flex` too!): they just reassign the CSS variables via a `{{style}}` declaration or a local class!

I am going to do a tests and change my implementation and in case I'll document it too (we can discuss it at our sync later)
created_at: 2025-03-14T11:30:54Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,112 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // The column gap value is subtracted from the column-min-width to prevent overflow & simplify API for consumers
+
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as a fallback value within calc()
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+  grid-template-columns: 
+    repeat(
+      auto-fit, 
+      minmax( 
+        calc( 
+          var(--hds-layout-grid-column-min-width, 0px) - var(--hds-layout-grid-column-gap, 0px)
+        ), 
+        1fr 
+      )
+    );
+
+  // Note: The gap style is defined here to avoid setting it repeatedly for the gap size variants defined below.
+  // For the gap size variants, we override the value of the gap custom properties to set the desired sizes.
+  gap: 
+    var(--hds-layout-grid-row-gap, 0)
+    var(--hds-layout-grid-column-gap, 0);
+}
+
+// inline
+
+.hds-layout-grid--is-inline {
+  display: inline-grid;
+  // prevents issue where grid columns don't line up in a row
+  max-width: 100%;
+}
+
+// align
+
+.hds-layout-grid--align-items-start { align-items: start;}
+.hds-layout-grid--align-items-center { align-items: center;}
+.hds-layout-grid--align-items-end { align-items: end; }
+.hds-layout-grid--align-items-stretch { align-items: stretch; }
+
+// gap
+
+// We set the values of the gap custom properties overriding the default value of 0
+
+// set row & column gap size together
+.hds-layout-grid--gap-4 {
+  --hds-layout-grid-row-gap: 4px;
+  --hds-layout-grid-column-gap: 4px;
+}
+
+.hds-layout-grid--gap-8 {
+  --hds-layout-grid-row-gap: 8px;
+  --hds-layout-grid-column-gap: 8px;
+}
+
+.hds-layout-grid--gap-12 {
+  --hds-layout-grid-row-gap: 12px;
+  --hds-layout-grid-column-gap: 12px;
+}
+
+.hds-layout-grid--gap-16 {
+  --hds-layout-grid-row-gap: 16px;
+  --hds-layout-grid-column-gap: 16px;
+}
+
+.hds-layout-grid--gap-24 {
+  --hds-layout-grid-row-gap: 24px;
+  --hds-layout-grid-column-gap: 24px;
+}
+
+.hds-layout-grid--gap-32 {
+  --hds-layout-grid-row-gap: 32px;
+  --hds-layout-grid-column-gap: 32px;
+}
+
+.hds-layout-grid--gap-48 {
+  --hds-layout-grid-row-gap: 48px;
+  --hds-layout-grid-column-gap: 48px;
+}
+
+// set just row gap size
+.hds-layout-grid--row-gap-4 { --hds-layout-grid-row-gap: 4px; }
path: packages/components/src/styles/components/layout/grid.scss
user: login: didoo
body: Ported your implementation (to `Flex`) here: https://github.com/hashicorp/design-system/pull/2751/commits/9f07f9468bbc9858e38266cfe42200030a22619c
created_at: 2025-03-14T12:18:35Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,112 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // The column gap value is subtracted from the column-min-width to prevent overflow & simplify API for consumers
+
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as a fallback value within calc()
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+  grid-template-columns: 
+    repeat(
+      auto-fit, 
+      minmax( 
+        calc( 
+          var(--hds-layout-grid-column-min-width, 0px) - var(--hds-layout-grid-column-gap, 0px)
+        ), 
+        1fr 
+      )
+    );
+
+  // Note: The gap style is defined here to avoid setting it repeatedly for the gap size variants defined below.
+  // For the gap size variants, we override the value of the gap custom properties to set the desired sizes.
+  gap: 
+    var(--hds-layout-grid-row-gap, 0)
+    var(--hds-layout-grid-column-gap, 0);
+}
+
+// inline
+
+.hds-layout-grid--is-inline {
+  display: inline-grid;
+  // prevents issue where grid columns don't line up in a row
+  max-width: 100%;
+}
+
+// align
+
+.hds-layout-grid--align-items-start { align-items: start;}
+.hds-layout-grid--align-items-center { align-items: center;}
+.hds-layout-grid--align-items-end { align-items: end; }
+.hds-layout-grid--align-items-stretch { align-items: stretch; }
+
+// gap
+
+// We set the values of the gap custom properties overriding the default value of 0
+
+// set row & column gap size together
+.hds-layout-grid--gap-4 {
+  --hds-layout-grid-row-gap: 4px;
+  --hds-layout-grid-column-gap: 4px;
+}
+
+.hds-layout-grid--gap-8 {
+  --hds-layout-grid-row-gap: 8px;
+  --hds-layout-grid-column-gap: 8px;
+}
+
+.hds-layout-grid--gap-12 {
+  --hds-layout-grid-row-gap: 12px;
+  --hds-layout-grid-column-gap: 12px;
+}
+
+.hds-layout-grid--gap-16 {
+  --hds-layout-grid-row-gap: 16px;
+  --hds-layout-grid-column-gap: 16px;
+}
+
+.hds-layout-grid--gap-24 {
+  --hds-layout-grid-row-gap: 24px;
+  --hds-layout-grid-column-gap: 24px;
+}
+
+.hds-layout-grid--gap-32 {
+  --hds-layout-grid-row-gap: 32px;
+  --hds-layout-grid-column-gap: 32px;
+}
+
+.hds-layout-grid--gap-48 {
+  --hds-layout-grid-row-gap: 48px;
+  --hds-layout-grid-column-gap: 48px;
+}
+
+// set just row gap size
+.hds-layout-grid--row-gap-4 { --hds-layout-grid-row-gap: 4px; }
path: packages/components/src/styles/components/layout/grid.scss
user: login: didoo
body: And here's how I've documented it: https://github.com/hashicorp/design-system/pull/2764/commits/8a58a973af9004a4b69c54aa0c97a2c286f13f31

https://hds-website-git-flex-component-documentation-hashicorp.vercel.app/layouts/flex#non-standard-gap-values
created_at: 2025-03-14T13:01:38Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,355 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Text::H3>gap size 0 (default)</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="No min width columns (defaults to 0)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid>
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
path: showcase/app/templates/layouts/grid.hbs
user: login: KristinLBradley
body: I added styling for the ones not using the `Item` components like the above.
created_at: 2025-03-18T05:12:26Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,355 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Text::H3>gap size 0 (default)</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="No min width columns (defaults to 0)">
+      <Shw::Outliner>
path: showcase/app/templates/layouts/grid.hbs
user: login: KristinLBradley
body: I've left these but feel free to remove them if you think it's better. (Or I can work on that if you are busy and you think it should be done.)
created_at: 2025-03-18T05:14:06Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,355 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Text::H3>gap size 0 (default)</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="No min width columns (defaults to 0)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid>
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  {{#each @model.GAPS as |gap|}}
+    <Shw::Text::H3>gap size {{gap}}</Shw::Text::H3>
+
+    <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+      <SG.Item @label="No min width columns (defaults to 0)">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="250px min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="250px" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="33.33% min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="33.33%" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    </Shw::Grid>
+  {{/each}}
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Align</Shw::Text::H2>
+  <Shw::Text::Body>This is the
+    <code>align-items</code>
+    CSS property of
+    <code>css grid</code>.</Shw::Text::Body>
+
+  <Shw::Grid @columns={{@model.ALIGNS.length}} @gap="2rem" as |SG|>
+    {{#each @model.ALIGNS as |align|}}
+      <SG.Item @label={{(concat "align=" align)}}>
+        <Shw::Outliner {{style width="120px" height="120px"}}>
+          <Hds::Layout::Grid @align={{align}} {{style width="100%" height="100%"}}>
+            <Shw::Placeholder
+              @text="#A"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e4c5f3"
+            />
+            <Shw::Placeholder
+              @text="#B"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e5ffd2"
+            />
+            <Shw::Placeholder
+              @text="#C"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#d2f4ff"
+            />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H3>Gap</Shw::Text::H3>
+
+  <Shw::Text::H4>Single value</Shw::Text::H4>
+
+  <Shw::Grid @columns="4" @gap="2rem" as |SG|>
+    {{#each @model.GAPS as |gap|}}
+      <SG.Item @label="gap={{gap}}">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}} @columnMinWidth="50%">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Text::H4>Double value (row/column)</Shw::Text::H4>
+
+  <Shw::Grid @columns={{2}} @gap="2rem 4rem" as |SG|>
+    {{! we use only a subset of possible combinations, just for testing purposes }}
+    {{#let (array (array "4" "48") (array "8" "32") (array "12" "24") (array "16" "16")) as |gapsList|}}
+      {{#each gapsList as |gapsArray|}}
+        <SG.Item @label="gap=[{{gapsArray}}]">
+          <Shw::Outliner>
+            <Hds::Layout::Grid @gap={{gapsArray}} @columnMinWidth="50%">
+              <Shw::Placeholder @text="item #1" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #2" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #3" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #4" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #5" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #6" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #7" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #8" @width="auto" @height="24" />
+            </Hds::Layout::Grid>
+          </Shw::Outliner>
+        </SG.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H3>Display</Shw::Text::H3>
+
+  <Shw::Grid @gap="2rem" @columns={{2}} as |SF|>
+    {{#let (array false true) as |booleans|}}
+      {{#each booleans as |isInline|}}
+        <SF.Item @label={{if isInline "inline-grid (isInline=true)" "grid (default)"}}>
+          <Hds::Text::Body @size="200" @tag="div">
+            Lorem
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+              <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+              <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+              <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+            </Hds::Layout::Grid>
+            sit amet
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#A" @height="24" @background="#e4c5f3" />
+              <Shw::Placeholder @text="#B" @height="24" @background="#e5ffd2" />
+              <Shw::Placeholder @text="#C" @height="24" @background="#d2f4ff" />
+              <Shw::Placeholder @text="#D" @height="24" @background="#fff8d2" />
+            </Hds::Layout::Grid>
+            elit.
+          </Hds::Text::Body>
+        </SF.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+</section>
+
+<Shw::Divider />
+
+<section data-test-percy>
+  <Shw::Text::H2>Grid::Item</Shw::Text::H2>
+
+  <Shw::Grid @columns={{1}} as |SG|>
+    <SG.Item @label="used directly or via yielded component">
+      <Shw::Outliner>
+        <Hds::Layout::Grid as |HLG|>
+          <Shw::Placeholder @text="item #1" @height="40" @background="#e4c5f3" />
+
+          <Hds::Layout::Grid::Item>
+            <Shw::Placeholder @text="item #2 within Grid::Item" @height="40" @background="#e5ffd2" />
+          </Hds::Layout::Grid::Item>
+
+          <Shw::Placeholder @text="item #3" @height="40" @background="#d2f4ff" />
+
+          <HLG.Item>
+            <Shw::Placeholder @text="item #4 within HLG.Item" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>colSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="colSpan=2">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="2">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="colSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item @colSpan="3">
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="colSpan=4">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="4">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>rowSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="rowSpan=2">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="12" as |HLG|>
+          <HLG.Item @rowSpan="2">
+            <Shw::Placeholder @text="#1" @height="100%" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="rowSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="50%" @gap="12" as |HLG|>
+          <HLG.Item>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item @rowSpan="3">
+            <Shw::Placeholder @text="#2" @height="100%" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>colSpan & rowSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="colSpan=2, rowSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="2" @rowSpan="3">
+            <Shw::Placeholder @text="#1" @height="100%" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+</section>
path: showcase/app/templates/layouts/grid.hbs
user: login: KristinLBradley
body: I added a few examples. Let me know what you think.
created_at: 2025-03-18T05:14:31Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,42 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+import type { AvailableTagNames, AvailableElements } from './types.ts';
+
+export interface HdsLayoutGridItemSignature {
+  Args: {
+    tag?: AvailableTagNames;
+    colSpan?: string;
+    rowSpan?: string;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: AvailableElements;
+}
+
+export default class HdsLayoutFlexItem extends Component<HdsLayoutGridItemSignature> {
path: packages/components/src/components/hds/layout/grid/item.ts
user: login: didoo
body: ```suggestion
export default class HdsLayoutGridItem extends Component<HdsLayoutGridItemSignature> {
```
created_at: 2025-03-18T11:55:34Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,42 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+import type { AvailableTagNames, AvailableElements } from './types.ts';
+
+export interface HdsLayoutGridItemSignature {
+  Args: {
+    tag?: AvailableTagNames;
+    colSpan?: string;
+    rowSpan?: string;
path: packages/components/src/components/hds/layout/grid/item.ts
user: login: didoo
body: [question] I just realized that in the `AdvancedTable they're lowercase, and they are numbers, not strings; should we conform to it for consistency? 

https://github.com/hashicorp/design-system/blob/main/packages/components/src/components/hds/advanced-table/td.ts#L24-L25
created_at: 2025-03-18T11:58:35Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,14 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{#if (eq this.componentTag "div")}}
+  <div class="hds-layout-grid-item" {{style this.inlineStyles}} ...attributes>{{yield}}</div>
+{{else}}
+  {{#let (element this.componentTag) as |Tag|}}
+    <Tag class="hds-layout-grid-item" {{style this.inlineStyles}} ...attributes>
+      {{yield}}
+    </Tag>
path: packages/components/src/components/hds/layout/grid/item.hbs
user: login: didoo
body: [suggestion] this may help with strange extra whitespaces in Ember (it should not be an issue in this context, but one never knows :)
```suggestion
    <Tag class="hds-layout-grid-item" {{style this.inlineStyles}} ...attributes>{{yield}}</Tag>
```
created_at: 2025-03-18T12:03:49Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,122 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+import type { ComponentLike } from '@glint/template';
+import type { HdsLayoutGridItemSignature } from '../grid/item.ts';
+
+import { HdsLayoutGridAlignValues, HdsLayoutGridGapValues } from './types.ts';
+
+import type {
+  HdsLayoutGridAligns,
+  HdsLayoutGridGaps,
+  AvailableTagNames,
+  AvailableElements,
+} from './types.ts';
+
+export const ALIGNS: string[] = Object.values(HdsLayoutGridAlignValues);
+export const GAPS: string[] = Object.values(HdsLayoutGridGapValues);
+
+export interface HdsLayoutGridSignature {
+  Args: {
+    tag?: AvailableTagNames;
+    columnMinWidth?: string;
+    align?: HdsLayoutGridAligns;
+    gap?: HdsLayoutGridGaps | [HdsLayoutGridGaps, HdsLayoutGridGaps];
+    isInline?: boolean;
+  };
+  Blocks: {
+    default: [
+      {
+        Item?: ComponentLike<HdsLayoutGridItemSignature>;
+      },
+    ];
+  };
+  Element: AvailableElements;
+}
+
+export default class HdsLayoutGrid extends Component<HdsLayoutGridSignature> {
+  get componentTag(): AvailableTagNames {
+    return this.args.tag ?? 'div';
+  }
+
+  get align(): HdsLayoutGridAligns | undefined {
+    const { align } = this.args;
+
+    if (align) {
+      assert(
+        `@align for "Hds::Layout::Grid" must be one of the following: ${ALIGNS.join(
+          ', '
+        )}; received: ${align}`,
+        ALIGNS.includes(align)
+      );
+    }
+
+    return align;
+  }
+
+  get gap():
+    | [HdsLayoutGridGaps]
+    | [HdsLayoutGridGaps, HdsLayoutGridGaps]
+    | undefined {
+    const { gap } = this.args;
+
+    if (gap) {
+      assert(
+        `@gap for "Hds::Layout::Grid" must be a single value or an array of two values of one of the following: ${GAPS.join(
+          ', '
+        )}; received: ${gap}`,
+        (!Array.isArray(gap) && GAPS.includes(gap)) ||
+          (Array.isArray(gap) &&
+            gap.length === 2 &&
+            GAPS.includes(gap[0]) &&
+            GAPS.includes(gap[1]))
+      );
+      return Array.isArray(gap) ? gap : [gap];
+    } else {
+      return undefined;
+    }
+  }
+
+  get inlineStyles(): Record<string, unknown> {
+    const inlineStyles: {
+      '--hds-layout-grid-column-min-width'?: string;
+    } = {};
+
+    if (this.args.columnMinWidth) {
+      inlineStyles['--hds-layout-grid-column-min-width'] =
+        this.args.columnMinWidth;
+    }
+    return inlineStyles;
+  }
+
+  get classNames(): string {
+    const classes = ['hds-layout-grid'];
+
+    // add a class based on the @align argument
+    if (this.align) {
+      classes.push(`hds-layout-grid--align-items-${this.align}`);
+    }
+
+    // add a class based on the @gap argument
+    if (this.gap) {
+      if (this.gap.length === 2) {
+        classes.push(`hds-layout-grid--row-gap-${this.gap[0]}`);
+        classes.push(`hds-layout-grid--column-gap-${this.gap[1]}`);
+      } else if (this.gap.length === 1) {
+        classes.push(`hds-layout-grid--gap-${this.gap[0]}`);
path: packages/components/src/components/hds/layout/grid/index.ts
user: login: didoo
body: [todo] we agreed to remove the single `--gap` class here, and use the two `--row-gap/--column-gap` classes to simplify things (see how it's done in the `Flex` implementation)
created_at: 2025-03-18T12:09:23Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,16 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{#if (eq this.componentTag "div")}}
+  <div class={{this.classNames}} {{style this.inlineStyles}} ...attributes>
+    {{yield (hash Item=(component "hds/layout/grid/item"))}}
+  </div>
+{{else}}
+  {{#let (element this.componentTag) as |Tag|}}
+    <Tag class={{this.classNames}} {{style this.inlineStyles}} ...attributes>
+      {{yield (hash Item=(component "hds/layout/grid/item"))}}
+    </Tag>
+  {{/let}}
+{{/if}}
path: packages/components/src/components/hds/layout/grid/index.hbs
user: login: didoo
body: [suggestion] consider this syntax to remove whitespaces
```suggestion
{{#if (eq this.componentTag "div")}}
  <div class={{this.classNames}} {{style this.inlineStyles}} ...attributes>{{yield
      (hash Item=(component "hds/layout/grid/item"))
    }}</div>
{{else}}
  {{#let (element this.componentTag) as |Tag|}}
    <Tag class={{this.classNames}} {{style this.inlineStyles}} ...attributes>{{yield
        (hash Item=(component "hds/layout/grid/item"))
      }}</Tag>
  {{/let}}
{{/if}}
```
created_at: 2025-03-18T12:11:10Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,112 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // The column gap value is subtracted from the column-min-width to prevent overflow & simplify API for consumers
+
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as a fallback value within calc()
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+  grid-template-columns: 
+    repeat(
+      auto-fit, 
+      minmax( 
+        calc( 
+          var(--hds-layout-grid-column-min-width, 0px) - var(--hds-layout-grid-column-gap, 0px)
+        ), 
+        1fr 
+      )
+    );
+
+  // Note: The gap style is defined here to avoid setting it repeatedly for the gap size variants defined below.
+  // For the gap size variants, we override the value of the gap custom properties to set the desired sizes.
path: packages/components/src/styles/components/layout/grid.scss
user: login: didoo
body: [suggestion] for consistency with the `Flex` code
```suggestion
  // For the gap size variants, we override the value of the gap custom properties to set the desired sizes.
  // These variables can be used by the consumers as an escape hatch if they need to set non-standard gap values (but adds a bit of friction to it)
```
created_at: 2025-03-18T12:14:53Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,112 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // The column gap value is subtracted from the column-min-width to prevent overflow & simplify API for consumers
+
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as a fallback value within calc()
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+  grid-template-columns: 
+    repeat(
+      auto-fit, 
+      minmax( 
+        calc( 
+          var(--hds-layout-grid-column-min-width, 0px) - var(--hds-layout-grid-column-gap, 0px)
+        ), 
+        1fr 
+      )
+    );
+
+  // Note: The gap style is defined here to avoid setting it repeatedly for the gap size variants defined below.
+  // For the gap size variants, we override the value of the gap custom properties to set the desired sizes.
+  gap: 
+    var(--hds-layout-grid-row-gap, 0)
+    var(--hds-layout-grid-column-gap, 0);
+}
+
+// inline
+
+.hds-layout-grid--is-inline {
+  display: inline-grid;
+  // prevents issue where grid columns don't line up in a row
+  max-width: 100%;
+}
+
+// align
+
+.hds-layout-grid--align-items-start { align-items: start;}
+.hds-layout-grid--align-items-center { align-items: center;}
+.hds-layout-grid--align-items-end { align-items: end; }
+.hds-layout-grid--align-items-stretch { align-items: stretch; }
+
+// gap
+
+// We set the values of the gap custom properties overriding the default value of 0
+
+// set row & column gap size together
path: packages/components/src/styles/components/layout/grid.scss
user: login: didoo
body: [todo] see comment above about removing these `--gap` classes and use only the `--row/column-gap` ones.
created_at: 2025-03-18T12:32:49Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,88 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | hds/layout/grid/item', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it should render the component with a CSS class that matches the component name', async function (assert) {
+    await render(hbs`<Hds::Layout::Grid::Item id="test-layout-grid-item" />`);
+    assert.dom('#test-layout-grid-item').hasClass('hds-layout-grid-item');
+  });
+
+  // CONTENT
+
+  test('it should render the yielded content', async function (assert) {
+    await render(
+      hbs`<Hds::Layout::Grid::Item id="test-layout-grid-item"><pre>test</pre></Hds::Layout::Grid::Item>`
+    );
+    assert.dom('#test-layout-grid-item > pre').exists().hasText('test');
+  });
+
+  test('it should render as yielded contextual component', async function (assert) {
+    await render(
+      hbs`<Hds::Layout::Grid as |LF|><LF.Item id="test-layout-grid-item"><pre>test</pre></LF.Item></Hds::Layout::Grid>`
path: showcase/tests/integration/components/hds/layout/grid/item-test.js
user: login: didoo
body: [nitpick] also in other places
```suggestion
      hbs`<Hds::Layout::Grid as |LG|><LG.Item id="test-layout-grid-item"><pre>test</pre></LG.Item></Hds::Layout::Grid>`
```
created_at: 2025-03-18T12:36:21Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,413 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    <SG.Item @label="No min width columns (min-width defaults to 0px)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="40em min width columns">
path: showcase/app/templates/layouts/grid.hbs
user: login: didoo
body: [suggestion] consider using `30em` or similar, so one can see that they stack when the screen is resized (smaller)
created_at: 2025-03-18T12:46:11Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,413 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    <SG.Item @label="No min width columns (min-width defaults to 0px)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="40em min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="40em">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Align</Shw::Text::H2>
+  <Shw::Text::Body>This is the
+    <code>align-items</code>
+    CSS property of
+    <code>css grid</code>.</Shw::Text::Body>
+
+  <Shw::Grid @columns={{@model.ALIGNS.length}} @gap="2rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    {{#each @model.ALIGNS as |align|}}
+      <SG.Item @label={{(concat "align=" align)}}>
+        <Shw::Outliner {{style width="120px" height="120px"}}>
+          <Hds::Layout::Grid @align={{align}} {{style width="100%" height="100%"}}>
+            <Shw::Placeholder @text="#A" @width="auto" @height="auto" {{style min-width="24px" min-height="24px"}} />
+            <Shw::Placeholder @text="#B" @width="auto" @height="auto" {{style min-width="24px" min-height="24px"}} />
+            <Shw::Placeholder @text="#C" @width="auto" @height="auto" {{style min-width="24px" min-height="24px"}} />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Gap</Shw::Text::H2>
+
+  <Shw::Text::H4 @tag="h3">Single value</Shw::Text::H4>
+
+  <Shw::Grid @columns="4" @gap="2rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    {{#each @model.GAPS as |gap|}}
+      <SG.Item @label="gap={{gap}}">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}} @columnMinWidth="50%">
+            <Shw::Placeholder @text="#1" @height="24" />
+            <Shw::Placeholder @text="#2" @height="24" />
+            <Shw::Placeholder @text="#3" @height="24" />
+            <Shw::Placeholder @text="#4" @height="24" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Text::H4 @tag="h3">Double value (row/column)</Shw::Text::H4>
+
+  <Shw::Grid @columns={{2}} @gap="2rem 4rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    {{! we use only a subset of possible combinations, just for testing purposes }}
+    {{#let (array (array "4" "48") (array "8" "32") (array "12" "24") (array "16" "16")) as |gapsList|}}
+      {{#each gapsList as |gapsArray|}}
+        <SG.Item @label="gap=[{{gapsArray}}]">
+          <Shw::Outliner>
+            <Hds::Layout::Grid @gap={{gapsArray}} @columnMinWidth="50%">
+              <Shw::Placeholder @text="item #1" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #2" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #3" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #4" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #5" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #6" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #7" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #8" @width="auto" @height="24" />
+            </Hds::Layout::Grid>
+          </Shw::Outliner>
+        </SG.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Display</Shw::Text::H2>
+
+  <Shw::Grid @gap="2rem" @columns={{2}} class="shw-layout-grid-example-tint-flex-items" as |SF|>
+    {{#let (array false true) as |booleans|}}
+      {{#each booleans as |isInline|}}
+        <SF.Item @label={{if isInline "inline-grid (isInline=true)" "grid (default)"}}>
+          <Hds::Text::Body @size="200" @tag="div">
+            Lorem
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#1" @height="24" />
+              <Shw::Placeholder @text="#2" @height="24" />
+              <Shw::Placeholder @text="#3" @height="24" />
+              <Shw::Placeholder @text="#4" @height="24" />
+            </Hds::Layout::Grid>
+            sit amet
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#A" @height="24" />
+              <Shw::Placeholder @text="#B" @height="24" />
+              <Shw::Placeholder @text="#C" @height="24" />
+              <Shw::Placeholder @text="#D" @height="24" />
+            </Hds::Layout::Grid>
+            elit.
+          </Hds::Text::Body>
+        </SF.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+</section>
+
+<Shw::Divider />
+
+<section data-test-percy>
+  <Shw::Text::H2>Grid::Item</Shw::Text::H2>
+
+  <Shw::Grid @columns={{1}} as |SG|>
+    <SG.Item @label="used directly or via yielded component">
+      <Shw::Outliner>
+        <Hds::Layout::Grid as |HLG|>
+          <Shw::Placeholder @text="item #1" @height="40" @background="#e4c5f3" />
+
+          <Hds::Layout::Grid::Item>
+            <Shw::Placeholder @text="item #2 within Grid::Item" @height="40" @background="#e5ffd2" />
+          </Hds::Layout::Grid::Item>
+
+          <Shw::Placeholder @text="item #3" @height="40" @background="#d2f4ff" />
+
+          <HLG.Item>
+            <Shw::Placeholder @text="item #4 within HLG.Item" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>colSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="1st item w/ colSpan=2">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="2">
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="1st item w/ colSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="3">
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="1st item w/ colSpan=4">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="4">
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>rowSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="1st item w/ rowSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="12" as |HLG|>
+          <HLG.Item @rowSpan="3">
path: showcase/app/templates/layouts/grid.hbs
user: login: didoo
body: [question] should this be `@rowSpan="2"`?
created_at: 2025-03-18T12:49:29Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,413 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    <SG.Item @label="No min width columns (min-width defaults to 0px)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="40em min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="40em">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Align</Shw::Text::H2>
+  <Shw::Text::Body>This is the
+    <code>align-items</code>
+    CSS property of
+    <code>css grid</code>.</Shw::Text::Body>
+
+  <Shw::Grid @columns={{@model.ALIGNS.length}} @gap="2rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    {{#each @model.ALIGNS as |align|}}
+      <SG.Item @label={{(concat "align=" align)}}>
+        <Shw::Outliner {{style width="120px" height="120px"}}>
+          <Hds::Layout::Grid @align={{align}} {{style width="100%" height="100%"}}>
+            <Shw::Placeholder @text="#A" @width="auto" @height="auto" {{style min-width="24px" min-height="24px"}} />
+            <Shw::Placeholder @text="#B" @width="auto" @height="auto" {{style min-width="24px" min-height="24px"}} />
+            <Shw::Placeholder @text="#C" @width="auto" @height="auto" {{style min-width="24px" min-height="24px"}} />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Gap</Shw::Text::H2>
+
+  <Shw::Text::H4 @tag="h3">Single value</Shw::Text::H4>
+
+  <Shw::Grid @columns="4" @gap="2rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    {{#each @model.GAPS as |gap|}}
+      <SG.Item @label="gap={{gap}}">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}} @columnMinWidth="50%">
+            <Shw::Placeholder @text="#1" @height="24" />
+            <Shw::Placeholder @text="#2" @height="24" />
+            <Shw::Placeholder @text="#3" @height="24" />
+            <Shw::Placeholder @text="#4" @height="24" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Text::H4 @tag="h3">Double value (row/column)</Shw::Text::H4>
+
+  <Shw::Grid @columns={{2}} @gap="2rem 4rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    {{! we use only a subset of possible combinations, just for testing purposes }}
+    {{#let (array (array "4" "48") (array "8" "32") (array "12" "24") (array "16" "16")) as |gapsList|}}
+      {{#each gapsList as |gapsArray|}}
+        <SG.Item @label="gap=[{{gapsArray}}]">
+          <Shw::Outliner>
+            <Hds::Layout::Grid @gap={{gapsArray}} @columnMinWidth="50%">
+              <Shw::Placeholder @text="item #1" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #2" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #3" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #4" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #5" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #6" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #7" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #8" @width="auto" @height="24" />
+            </Hds::Layout::Grid>
+          </Shw::Outliner>
+        </SG.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Display</Shw::Text::H2>
+
+  <Shw::Grid @gap="2rem" @columns={{2}} class="shw-layout-grid-example-tint-flex-items" as |SF|>
+    {{#let (array false true) as |booleans|}}
+      {{#each booleans as |isInline|}}
+        <SF.Item @label={{if isInline "inline-grid (isInline=true)" "grid (default)"}}>
+          <Hds::Text::Body @size="200" @tag="div">
+            Lorem
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#1" @height="24" />
+              <Shw::Placeholder @text="#2" @height="24" />
+              <Shw::Placeholder @text="#3" @height="24" />
+              <Shw::Placeholder @text="#4" @height="24" />
+            </Hds::Layout::Grid>
+            sit amet
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#A" @height="24" />
+              <Shw::Placeholder @text="#B" @height="24" />
+              <Shw::Placeholder @text="#C" @height="24" />
+              <Shw::Placeholder @text="#D" @height="24" />
+            </Hds::Layout::Grid>
+            elit.
+          </Hds::Text::Body>
+        </SF.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+</section>
+
+<Shw::Divider />
+
+<section data-test-percy>
+  <Shw::Text::H2>Grid::Item</Shw::Text::H2>
+
+  <Shw::Grid @columns={{1}} as |SG|>
+    <SG.Item @label="used directly or via yielded component">
+      <Shw::Outliner>
+        <Hds::Layout::Grid as |HLG|>
+          <Shw::Placeholder @text="item #1" @height="40" @background="#e4c5f3" />
+
+          <Hds::Layout::Grid::Item>
+            <Shw::Placeholder @text="item #2 within Grid::Item" @height="40" @background="#e5ffd2" />
+          </Hds::Layout::Grid::Item>
+
+          <Shw::Placeholder @text="item #3" @height="40" @background="#d2f4ff" />
+
+          <HLG.Item>
+            <Shw::Placeholder @text="item #4 within HLG.Item" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>colSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="1st item w/ colSpan=2">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="2">
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="1st item w/ colSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="3">
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="1st item w/ colSpan=4">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="4">
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>rowSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="1st item w/ rowSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="12" as |HLG|>
+          <HLG.Item @rowSpan="3">
+            <Shw::Placeholder @text="#1" @height="100%" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="2nd item w/ rowSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="50%" @gap="12" as |HLG|>
+          <HLG.Item>
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item @rowSpan="3">
+            <Shw::Placeholder @text="#2" @height="100%" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>colSpan & rowSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="1st item w/ colSpan=2 & rowSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="2" @rowSpan="3">
+            <Shw::Placeholder @text="#1" @height="100%" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#5" @height="40" @background="#f3d9c5" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#6" @height="40" @background="#fee1ec" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+</section>
+
+<Shw::Divider />
+
+<section data-test-percy>
+  <Shw::Text::H2>Examples</Shw::Text::H2>
+
+  <Shw::Grid @columns="1" @gap="2rem" as |SG|>
+    <SG.Item @label="3 column layout Card layout">
+      <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="32">
+        <Hds::Card::Container @level="mid" @hasBorder={{true}} {{style padding="24px"}}>
+          <Hds::Layout::Grid @columnMinWidth="100%" @gap="16">
+            <Hds::Layout::Flex @align="center" @gap="8">
+              <Hds::IconTile @icon="cloud" @size="small" />
+              <Hds::Text::Display @tag="h2" @size="300">
+                Active resources
+              </Hds::Text::Display>
+            </Hds::Layout::Flex>
+            <Hds::Layout::Grid @columnMinWidth="100%" @gap="8">
path: showcase/app/templates/layouts/grid.hbs
user: login: didoo
body: [note] by using a `Grid` here, with items width=100%, the badge gets stretched (it's inside a grid)

<img width="376" alt="screenshot_4805" src="https://github.com/user-attachments/assets/bc5d0bff-1d97-4891-8fda-b358567a5a34" />

by applying `justify-items: start;` to the grid fixes it (something that should expose to the consumers? probably not, but think if this is a meaningful "sign")
created_at: 2025-03-18T12:57:49Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,122 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+import type { ComponentLike } from '@glint/template';
+import type { HdsLayoutGridItemSignature } from '../grid/item.ts';
+
+import { HdsLayoutGridAlignValues, HdsLayoutGridGapValues } from './types.ts';
+
+import type {
+  HdsLayoutGridAligns,
+  HdsLayoutGridGaps,
+  AvailableTagNames,
+  AvailableElements,
+} from './types.ts';
+
+export const ALIGNS: string[] = Object.values(HdsLayoutGridAlignValues);
+export const GAPS: string[] = Object.values(HdsLayoutGridGapValues);
+
+export interface HdsLayoutGridSignature {
+  Args: {
+    tag?: AvailableTagNames;
+    columnMinWidth?: string;
+    align?: HdsLayoutGridAligns;
+    gap?: HdsLayoutGridGaps | [HdsLayoutGridGaps, HdsLayoutGridGaps];
+    isInline?: boolean;
+  };
+  Blocks: {
+    default: [
+      {
+        Item?: ComponentLike<HdsLayoutGridItemSignature>;
+      },
+    ];
+  };
+  Element: AvailableElements;
+}
+
+export default class HdsLayoutGrid extends Component<HdsLayoutGridSignature> {
+  get componentTag(): AvailableTagNames {
+    return this.args.tag ?? 'div';
+  }
+
+  get align(): HdsLayoutGridAligns | undefined {
+    const { align } = this.args;
+
+    if (align) {
+      assert(
+        `@align for "Hds::Layout::Grid" must be one of the following: ${ALIGNS.join(
+          ', '
+        )}; received: ${align}`,
+        ALIGNS.includes(align)
+      );
+    }
+
+    return align;
+  }
+
+  get gap():
+    | [HdsLayoutGridGaps]
+    | [HdsLayoutGridGaps, HdsLayoutGridGaps]
+    | undefined {
+    const { gap } = this.args;
+
+    if (gap) {
+      assert(
+        `@gap for "Hds::Layout::Grid" must be a single value or an array of two values of one of the following: ${GAPS.join(
+          ', '
+        )}; received: ${gap}`,
+        (!Array.isArray(gap) && GAPS.includes(gap)) ||
+          (Array.isArray(gap) &&
+            gap.length === 2 &&
+            GAPS.includes(gap[0]) &&
+            GAPS.includes(gap[1]))
+      );
+      return Array.isArray(gap) ? gap : [gap];
+    } else {
+      return undefined;
+    }
+  }
+
+  get inlineStyles(): Record<string, unknown> {
+    const inlineStyles: {
+      '--hds-layout-grid-column-min-width'?: string;
+    } = {};
+
+    if (this.args.columnMinWidth) {
+      inlineStyles['--hds-layout-grid-column-min-width'] =
+        this.args.columnMinWidth;
+    }
+    return inlineStyles;
+  }
+
+  get classNames(): string {
+    const classes = ['hds-layout-grid'];
+
+    // add a class based on the @align argument
+    if (this.align) {
+      classes.push(`hds-layout-grid--align-items-${this.align}`);
+    }
+
+    // add a class based on the @gap argument
+    if (this.gap) {
+      if (this.gap.length === 2) {
+        classes.push(`hds-layout-grid--row-gap-${this.gap[0]}`);
+        classes.push(`hds-layout-grid--column-gap-${this.gap[1]}`);
+      } else if (this.gap.length === 1) {
+        classes.push(`hds-layout-grid--gap-${this.gap[0]}`);
path: packages/components/src/components/hds/layout/grid/index.ts
user: login: KristinLBradley
body: Sorry, I'll make that update
created_at: 2025-03-18T15:30:09Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,42 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+import type { AvailableTagNames, AvailableElements } from './types.ts';
+
+export interface HdsLayoutGridItemSignature {
+  Args: {
+    tag?: AvailableTagNames;
+    colSpan?: string;
+    rowSpan?: string;
path: packages/components/src/components/hds/layout/grid/item.ts
user: login: KristinLBradley
body: Using numbers makes sense. I guess it makes sense to conform to the capitalization of the names too. I'll update it.
created_at: 2025-03-18T15:32:10Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,355 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Text::H3>gap size 0 (default)</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="No min width columns (defaults to 0)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid>
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+          <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+          <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  {{#each @model.GAPS as |gap|}}
+    <Shw::Text::H3>gap size {{gap}}</Shw::Text::H3>
+
+    <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+      <SG.Item @label="No min width columns (defaults to 0)">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="250px min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="250px" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+
+      <SG.Item @label="33.33% min width columns">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @columnMinWidth="33.33%" @gap={{gap}}>
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    </Shw::Grid>
+  {{/each}}
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Align</Shw::Text::H2>
+  <Shw::Text::Body>This is the
+    <code>align-items</code>
+    CSS property of
+    <code>css grid</code>.</Shw::Text::Body>
+
+  <Shw::Grid @columns={{@model.ALIGNS.length}} @gap="2rem" as |SG|>
+    {{#each @model.ALIGNS as |align|}}
+      <SG.Item @label={{(concat "align=" align)}}>
+        <Shw::Outliner {{style width="120px" height="120px"}}>
+          <Hds::Layout::Grid @align={{align}} {{style width="100%" height="100%"}}>
+            <Shw::Placeholder
+              @text="#A"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e4c5f3"
+            />
+            <Shw::Placeholder
+              @text="#B"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#e5ffd2"
+            />
+            <Shw::Placeholder
+              @text="#C"
+              @width="auto"
+              @height="auto"
+              {{style min-width="24px" min-height="24px"}}
+              @background="#d2f4ff"
+            />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H3>Gap</Shw::Text::H3>
+
+  <Shw::Text::H4>Single value</Shw::Text::H4>
+
+  <Shw::Grid @columns="4" @gap="2rem" as |SG|>
+    {{#each @model.GAPS as |gap|}}
+      <SG.Item @label="gap={{gap}}">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}} @columnMinWidth="50%">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+            <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+            <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+            <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Text::H4>Double value (row/column)</Shw::Text::H4>
+
+  <Shw::Grid @columns={{2}} @gap="2rem 4rem" as |SG|>
+    {{! we use only a subset of possible combinations, just for testing purposes }}
+    {{#let (array (array "4" "48") (array "8" "32") (array "12" "24") (array "16" "16")) as |gapsList|}}
+      {{#each gapsList as |gapsArray|}}
+        <SG.Item @label="gap=[{{gapsArray}}]">
+          <Shw::Outliner>
+            <Hds::Layout::Grid @gap={{gapsArray}} @columnMinWidth="50%">
+              <Shw::Placeholder @text="item #1" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #2" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #3" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #4" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #5" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #6" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #7" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #8" @width="auto" @height="24" />
+            </Hds::Layout::Grid>
+          </Shw::Outliner>
+        </SG.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H3>Display</Shw::Text::H3>
+
+  <Shw::Grid @gap="2rem" @columns={{2}} as |SF|>
+    {{#let (array false true) as |booleans|}}
+      {{#each booleans as |isInline|}}
+        <SF.Item @label={{if isInline "inline-grid (isInline=true)" "grid (default)"}}>
+          <Hds::Text::Body @size="200" @tag="div">
+            Lorem
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+              <Shw::Placeholder @text="#2" @height="24" @background="#e5ffd2" />
+              <Shw::Placeholder @text="#3" @height="24" @background="#d2f4ff" />
+              <Shw::Placeholder @text="#4" @height="24" @background="#fff8d2" />
+            </Hds::Layout::Grid>
+            sit amet
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#A" @height="24" @background="#e4c5f3" />
+              <Shw::Placeholder @text="#B" @height="24" @background="#e5ffd2" />
+              <Shw::Placeholder @text="#C" @height="24" @background="#d2f4ff" />
+              <Shw::Placeholder @text="#D" @height="24" @background="#fff8d2" />
+            </Hds::Layout::Grid>
+            elit.
+          </Hds::Text::Body>
+        </SF.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+</section>
+
+<Shw::Divider />
+
+<section data-test-percy>
+  <Shw::Text::H2>Grid::Item</Shw::Text::H2>
+
+  <Shw::Grid @columns={{1}} as |SG|>
+    <SG.Item @label="used directly or via yielded component">
+      <Shw::Outliner>
+        <Hds::Layout::Grid as |HLG|>
+          <Shw::Placeholder @text="item #1" @height="40" @background="#e4c5f3" />
+
+          <Hds::Layout::Grid::Item>
+            <Shw::Placeholder @text="item #2 within Grid::Item" @height="40" @background="#e5ffd2" />
+          </Hds::Layout::Grid::Item>
+
+          <Shw::Placeholder @text="item #3" @height="40" @background="#d2f4ff" />
+
+          <HLG.Item>
+            <Shw::Placeholder @text="item #4 within HLG.Item" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>colSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="colSpan=2">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="2">
+            <Shw::Placeholder @text="#1" @height="24" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
path: showcase/app/templates/layouts/grid.hbs
user: login: KristinLBradley
body: Decision: Use of Item not required
created_at: 2025-03-18T16:25:07Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,413 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    <SG.Item @label="No min width columns (min-width defaults to 0px)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="40em min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="40em">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Align</Shw::Text::H2>
+  <Shw::Text::Body>This is the
+    <code>align-items</code>
+    CSS property of
+    <code>css grid</code>.</Shw::Text::Body>
+
+  <Shw::Grid @columns={{@model.ALIGNS.length}} @gap="2rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    {{#each @model.ALIGNS as |align|}}
+      <SG.Item @label={{(concat "align=" align)}}>
+        <Shw::Outliner {{style width="120px" height="120px"}}>
+          <Hds::Layout::Grid @align={{align}} {{style width="100%" height="100%"}}>
+            <Shw::Placeholder @text="#A" @width="auto" @height="auto" {{style min-width="24px" min-height="24px"}} />
+            <Shw::Placeholder @text="#B" @width="auto" @height="auto" {{style min-width="24px" min-height="24px"}} />
+            <Shw::Placeholder @text="#C" @width="auto" @height="auto" {{style min-width="24px" min-height="24px"}} />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Gap</Shw::Text::H2>
+
+  <Shw::Text::H4 @tag="h3">Single value</Shw::Text::H4>
+
+  <Shw::Grid @columns="4" @gap="2rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    {{#each @model.GAPS as |gap|}}
+      <SG.Item @label="gap={{gap}}">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}} @columnMinWidth="50%">
+            <Shw::Placeholder @text="#1" @height="24" />
+            <Shw::Placeholder @text="#2" @height="24" />
+            <Shw::Placeholder @text="#3" @height="24" />
+            <Shw::Placeholder @text="#4" @height="24" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Text::H4 @tag="h3">Double value (row/column)</Shw::Text::H4>
+
+  <Shw::Grid @columns={{2}} @gap="2rem 4rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    {{! we use only a subset of possible combinations, just for testing purposes }}
+    {{#let (array (array "4" "48") (array "8" "32") (array "12" "24") (array "16" "16")) as |gapsList|}}
+      {{#each gapsList as |gapsArray|}}
+        <SG.Item @label="gap=[{{gapsArray}}]">
+          <Shw::Outliner>
+            <Hds::Layout::Grid @gap={{gapsArray}} @columnMinWidth="50%">
+              <Shw::Placeholder @text="item #1" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #2" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #3" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #4" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #5" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #6" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #7" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #8" @width="auto" @height="24" />
+            </Hds::Layout::Grid>
+          </Shw::Outliner>
+        </SG.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Display</Shw::Text::H2>
+
+  <Shw::Grid @gap="2rem" @columns={{2}} class="shw-layout-grid-example-tint-flex-items" as |SF|>
+    {{#let (array false true) as |booleans|}}
+      {{#each booleans as |isInline|}}
+        <SF.Item @label={{if isInline "inline-grid (isInline=true)" "grid (default)"}}>
+          <Hds::Text::Body @size="200" @tag="div">
+            Lorem
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#1" @height="24" />
+              <Shw::Placeholder @text="#2" @height="24" />
+              <Shw::Placeholder @text="#3" @height="24" />
+              <Shw::Placeholder @text="#4" @height="24" />
+            </Hds::Layout::Grid>
+            sit amet
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#A" @height="24" />
+              <Shw::Placeholder @text="#B" @height="24" />
+              <Shw::Placeholder @text="#C" @height="24" />
+              <Shw::Placeholder @text="#D" @height="24" />
+            </Hds::Layout::Grid>
+            elit.
+          </Hds::Text::Body>
+        </SF.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+</section>
+
+<Shw::Divider />
+
+<section data-test-percy>
+  <Shw::Text::H2>Grid::Item</Shw::Text::H2>
+
+  <Shw::Grid @columns={{1}} as |SG|>
+    <SG.Item @label="used directly or via yielded component">
+      <Shw::Outliner>
+        <Hds::Layout::Grid as |HLG|>
+          <Shw::Placeholder @text="item #1" @height="40" @background="#e4c5f3" />
+
+          <Hds::Layout::Grid::Item>
+            <Shw::Placeholder @text="item #2 within Grid::Item" @height="40" @background="#e5ffd2" />
+          </Hds::Layout::Grid::Item>
+
+          <Shw::Placeholder @text="item #3" @height="40" @background="#d2f4ff" />
+
+          <HLG.Item>
+            <Shw::Placeholder @text="item #4 within HLG.Item" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>colSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="1st item w/ colSpan=2">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="2">
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="1st item w/ colSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="3">
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="1st item w/ colSpan=4">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="4">
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>rowSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="1st item w/ rowSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="12" as |HLG|>
+          <HLG.Item @rowSpan="3">
+            <Shw::Placeholder @text="#1" @height="100%" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="2nd item w/ rowSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="50%" @gap="12" as |HLG|>
+          <HLG.Item>
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item @rowSpan="3">
+            <Shw::Placeholder @text="#2" @height="100%" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>colSpan & rowSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="1st item w/ colSpan=2 & rowSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="2" @rowSpan="3">
+            <Shw::Placeholder @text="#1" @height="100%" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#5" @height="40" @background="#f3d9c5" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#6" @height="40" @background="#fee1ec" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+</section>
+
+<Shw::Divider />
+
+<section data-test-percy>
+  <Shw::Text::H2>Examples</Shw::Text::H2>
+
+  <Shw::Grid @columns="1" @gap="2rem" as |SG|>
+    <SG.Item @label="3 column layout Card layout">
+      <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="32">
+        <Hds::Card::Container @level="mid" @hasBorder={{true}} {{style padding="24px"}}>
+          <Hds::Layout::Grid @columnMinWidth="100%" @gap="16">
+            <Hds::Layout::Flex @align="center" @gap="8">
+              <Hds::IconTile @icon="cloud" @size="small" />
+              <Hds::Text::Display @tag="h2" @size="300">
+                Active resources
+              </Hds::Text::Display>
+            </Hds::Layout::Flex>
+            <Hds::Layout::Grid @columnMinWidth="100%" @gap="8">
path: showcase/app/templates/layouts/grid.hbs
user: login: KristinLBradley
body: Thanks, I'll just wrap it with an `Item` and then mention that issue in the docs.
created_at: 2025-03-18T16:34:15Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,16 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
path: packages/components/src/components/hds/layout/grid/index.hbs
user: login: didoo
body: [suggestion] I added this comment in the `Flex` implementation too ([context](https://github.com/hashicorp/design-system/pull/2751/files#r1991883967))
```suggestion
{{!
  Dynamically generating an HTML tag in Ember creates a dynamic component class (with the corresponding tagName), while rendering
  a plain HTML element requires less computing cycles for Ember (you will notice it doesn't add the `ember-view` class to it).
}}
```
created_at: 2025-03-18T16:35:35Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,12 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
path: packages/components/src/components/hds/layout/grid/item.hbs
user: login: didoo
body: ```suggestion
{{!
  Dynamically generating an HTML tag in Ember creates a dynamic component class (with the corresponding tagName), while rendering
  a plain HTML element requires less computing cycles for Ember (you will notice it doesn't add the `ember-view` class to it).
}}
```
created_at: 2025-03-18T16:40:46Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,413 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    <SG.Item @label="No min width columns (min-width defaults to 0px)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="40em min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="40em">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Align</Shw::Text::H2>
+  <Shw::Text::Body>This is the
+    <code>align-items</code>
+    CSS property of
+    <code>css grid</code>.</Shw::Text::Body>
+
+  <Shw::Grid @columns={{@model.ALIGNS.length}} @gap="2rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    {{#each @model.ALIGNS as |align|}}
+      <SG.Item @label={{(concat "align=" align)}}>
+        <Shw::Outliner {{style width="120px" height="120px"}}>
+          <Hds::Layout::Grid @align={{align}} {{style width="100%" height="100%"}}>
+            <Shw::Placeholder @text="#A" @width="auto" @height="auto" {{style min-width="24px" min-height="24px"}} />
+            <Shw::Placeholder @text="#B" @width="auto" @height="auto" {{style min-width="24px" min-height="24px"}} />
+            <Shw::Placeholder @text="#C" @width="auto" @height="auto" {{style min-width="24px" min-height="24px"}} />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Gap</Shw::Text::H2>
+
+  <Shw::Text::H4 @tag="h3">Single value</Shw::Text::H4>
+
+  <Shw::Grid @columns="4" @gap="2rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    {{#each @model.GAPS as |gap|}}
+      <SG.Item @label="gap={{gap}}">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}} @columnMinWidth="50%">
+            <Shw::Placeholder @text="#1" @height="24" />
+            <Shw::Placeholder @text="#2" @height="24" />
+            <Shw::Placeholder @text="#3" @height="24" />
+            <Shw::Placeholder @text="#4" @height="24" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Text::H4 @tag="h3">Double value (row/column)</Shw::Text::H4>
+
+  <Shw::Grid @columns={{2}} @gap="2rem 4rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    {{! we use only a subset of possible combinations, just for testing purposes }}
+    {{#let (array (array "4" "48") (array "8" "32") (array "12" "24") (array "16" "16")) as |gapsList|}}
+      {{#each gapsList as |gapsArray|}}
+        <SG.Item @label="gap=[{{gapsArray}}]">
+          <Shw::Outliner>
+            <Hds::Layout::Grid @gap={{gapsArray}} @columnMinWidth="50%">
+              <Shw::Placeholder @text="item #1" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #2" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #3" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #4" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #5" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #6" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #7" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #8" @width="auto" @height="24" />
+            </Hds::Layout::Grid>
+          </Shw::Outliner>
+        </SG.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Display</Shw::Text::H2>
+
+  <Shw::Grid @gap="2rem" @columns={{2}} class="shw-layout-grid-example-tint-flex-items" as |SF|>
+    {{#let (array false true) as |booleans|}}
+      {{#each booleans as |isInline|}}
+        <SF.Item @label={{if isInline "inline-grid (isInline=true)" "grid (default)"}}>
+          <Hds::Text::Body @size="200" @tag="div">
+            Lorem
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#1" @height="24" />
+              <Shw::Placeholder @text="#2" @height="24" />
+              <Shw::Placeholder @text="#3" @height="24" />
+              <Shw::Placeholder @text="#4" @height="24" />
+            </Hds::Layout::Grid>
+            sit amet
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#A" @height="24" />
+              <Shw::Placeholder @text="#B" @height="24" />
+              <Shw::Placeholder @text="#C" @height="24" />
+              <Shw::Placeholder @text="#D" @height="24" />
+            </Hds::Layout::Grid>
+            elit.
+          </Hds::Text::Body>
+        </SF.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+</section>
+
+<Shw::Divider />
+
+<section data-test-percy>
+  <Shw::Text::H2>Grid::Item</Shw::Text::H2>
+
+  <Shw::Grid @columns={{1}} as |SG|>
+    <SG.Item @label="used directly or via yielded component">
+      <Shw::Outliner>
+        <Hds::Layout::Grid as |HLG|>
+          <Shw::Placeholder @text="item #1" @height="40" @background="#e4c5f3" />
+
+          <Hds::Layout::Grid::Item>
+            <Shw::Placeholder @text="item #2 within Grid::Item" @height="40" @background="#e5ffd2" />
+          </Hds::Layout::Grid::Item>
+
+          <Shw::Placeholder @text="item #3" @height="40" @background="#d2f4ff" />
+
+          <HLG.Item>
+            <Shw::Placeholder @text="item #4 within HLG.Item" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>colSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="1st item w/ colSpan=2">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="2">
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="1st item w/ colSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="3">
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="1st item w/ colSpan=4">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="4">
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>rowSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="1st item w/ rowSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="12" as |HLG|>
+          <HLG.Item @rowSpan="3">
+            <Shw::Placeholder @text="#1" @height="100%" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="2nd item w/ rowSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="50%" @gap="12" as |HLG|>
+          <HLG.Item>
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item @rowSpan="3">
+            <Shw::Placeholder @text="#2" @height="100%" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>colSpan & rowSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="1st item w/ colSpan=2 & rowSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="2" @rowSpan="3">
+            <Shw::Placeholder @text="#1" @height="100%" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#5" @height="40" @background="#f3d9c5" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#6" @height="40" @background="#fee1ec" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+</section>
+
+<Shw::Divider />
+
+<section data-test-percy>
+  <Shw::Text::H2>Examples</Shw::Text::H2>
+
+  <Shw::Grid @columns="1" @gap="2rem" as |SG|>
+    <SG.Item @label="3 column layout Card layout">
+      <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="32">
+        <Hds::Card::Container @level="mid" @hasBorder={{true}} {{style padding="24px"}}>
+          <Hds::Layout::Grid @columnMinWidth="100%" @gap="16">
+            <Hds::Layout::Flex @align="center" @gap="8">
+              <Hds::IconTile @icon="cloud" @size="small" />
+              <Hds::Text::Display @tag="h2" @size="300">
+                Active resources
+              </Hds::Text::Display>
+            </Hds::Layout::Flex>
+            <Hds::Layout::Grid @columnMinWidth="100%" @gap="8">
path: showcase/app/templates/layouts/grid.hbs
user: login: KristinLBradley
body: Fixed in Showcase & example in docs and added mention of it in docs with a new example
created_at: 2025-03-18T16:56:55Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,77 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
path: packages/components/src/styles/components/layout/grid.scss
user: login: dchyun
body: [Nit] There are a few trailing spaces in this section
<img width="404" alt="Screenshot 2025-03-18 at 2 21 31 PM" src="https://github.com/user-attachments/assets/40edbb99-0795-4b3d-9103-1e98f19953f6" />

created_at: 2025-03-18T18:22:03Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,77 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // The column gap value is subtracted from the column-min-width to prevent overflow & simplify API for consumers
+
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as a fallback value within calc()
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+  grid-template-columns: 
+    repeat(
+      auto-fit, 
+      minmax( 
+        calc( 
+          var(--hds-layout-grid-column-min-width, 0px) - var(--hds-layout-grid-column-gap, 0px)
+        ), 
+        1fr 
+      )
+    );
+
+  // Note: The gap style is defined here to avoid setting it repeatedly for the gap size variants defined below.
+  // For the gap size variants, we override the value of the gap custom properties to set the desired sizes.
+  // These variables can be used by the consumers as an escape hatch if they need to set non-standard gap values (but adds a bit of friction to it)
+  gap: 
+    var(--hds-layout-grid-row-gap, 0)
+    var(--hds-layout-grid-column-gap, 0);
+}
+
+// inline
+
+.hds-layout-grid--is-inline {
+  display: inline-grid;
+  // prevents issue where grid columns don't line up in a row
+  max-width: 100%;
+}
+
+// align
+
+.hds-layout-grid--align-items-start { align-items: start;}
path: packages/components/src/styles/components/layout/grid.scss
user: login: dchyun
body: ```suggestion
.hds-layout-grid--align-items-start { align-items: start; }
```
created_at: 2025-03-18T18:22:26Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,77 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // The column gap value is subtracted from the column-min-width to prevent overflow & simplify API for consumers
+
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as a fallback value within calc()
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+  grid-template-columns: 
+    repeat(
+      auto-fit, 
+      minmax( 
+        calc( 
+          var(--hds-layout-grid-column-min-width, 0px) - var(--hds-layout-grid-column-gap, 0px)
+        ), 
+        1fr 
+      )
+    );
+
+  // Note: The gap style is defined here to avoid setting it repeatedly for the gap size variants defined below.
+  // For the gap size variants, we override the value of the gap custom properties to set the desired sizes.
+  // These variables can be used by the consumers as an escape hatch if they need to set non-standard gap values (but adds a bit of friction to it)
+  gap: 
+    var(--hds-layout-grid-row-gap, 0)
+    var(--hds-layout-grid-column-gap, 0);
+}
+
+// inline
+
+.hds-layout-grid--is-inline {
+  display: inline-grid;
+  // prevents issue where grid columns don't line up in a row
+  max-width: 100%;
+}
+
+// align
+
+.hds-layout-grid--align-items-start { align-items: start;}
+.hds-layout-grid--align-items-center { align-items: center;}
path: packages/components/src/styles/components/layout/grid.scss
user: login: dchyun
body: ```suggestion
.hds-layout-grid--align-items-center { align-items: center; }
```
created_at: 2025-03-18T18:22:32Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,77 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // The column gap value is subtracted from the column-min-width to prevent overflow & simplify API for consumers
+
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as a fallback value within calc()
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+  grid-template-columns: 
+    repeat(
+      auto-fit, 
+      minmax( 
+        calc( 
+          var(--hds-layout-grid-column-min-width, 0px) - var(--hds-layout-grid-column-gap, 0px)
+        ), 
+        1fr 
+      )
+    );
+
+  // Note: The gap style is defined here to avoid setting it repeatedly for the gap size variants defined below.
+  // For the gap size variants, we override the value of the gap custom properties to set the desired sizes.
+  // These variables can be used by the consumers as an escape hatch if they need to set non-standard gap values (but adds a bit of friction to it)
+  gap: 
+    var(--hds-layout-grid-row-gap, 0)
+    var(--hds-layout-grid-column-gap, 0);
+}
+
+// inline
+
+.hds-layout-grid--is-inline {
+  display: inline-grid;
+  // prevents issue where grid columns don't line up in a row
+  max-width: 100%;
+}
+
+// align
+
+.hds-layout-grid--align-items-start { align-items: start;}
+.hds-layout-grid--align-items-center { align-items: center;}
+.hds-layout-grid--align-items-end { align-items: end; }
+.hds-layout-grid--align-items-stretch { align-items: stretch; }
+
+// gap
+
+// We set the values of the gap custom properties overriding the default value of 0
+
+// set the row gap size
+.hds-layout-grid--row-gap-4 { --hds-layout-grid-row-gap: 4px; }
+.hds-layout-grid--row-gap-8 { --hds-layout-grid-row-gap: 8px; }
+.hds-layout-grid--row-gap-12 { --hds-layout-grid-row-gap: 12px; }
+.hds-layout-grid--row-gap-16 { --hds-layout-grid-row-gap: 16px; }
+.hds-layout-grid--row-gap-24 { --hds-layout-grid-row-gap: 24px; }
+.hds-layout-grid--row-gap-32 { --hds-layout-grid-row-gap: 32px; }
+.hds-layout-grid--row-gap-48 { --hds-layout-grid-row-gap: 48px; }
+
+// set the column gap size
+.hds-layout-grid--column-gap-4 { --hds-layout-grid-column-gap: 4px; }
+.hds-layout-grid--column-gap-8 { --hds-layout-grid-column-gap: 8px; }
+.hds-layout-grid--column-gap-12 { --hds-layout-grid-column-gap: 12px; }
+.hds-layout-grid--column-gap-16 { --hds-layout-grid-column-gap: 16px; }
+.hds-layout-grid--column-gap-24 { --hds-layout-grid-column-gap: 24px;  }
path: packages/components/src/styles/components/layout/grid.scss
user: login: dchyun
body: ```suggestion
.hds-layout-grid--column-gap-24 { --hds-layout-grid-column-gap: 24px; }
```
created_at: 2025-03-18T18:22:43Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,77 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // The column gap value is subtracted from the column-min-width to prevent overflow & simplify API for consumers
+
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as a fallback value within calc()
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+  grid-template-columns: 
+    repeat(
+      auto-fit, 
+      minmax( 
+        calc( 
+          var(--hds-layout-grid-column-min-width, 0px) - var(--hds-layout-grid-column-gap, 0px)
+        ), 
+        1fr 
+      )
+    );
+
+  // Note: The gap style is defined here to avoid setting it repeatedly for the gap size variants defined below.
+  // For the gap size variants, we override the value of the gap custom properties to set the desired sizes.
+  // These variables can be used by the consumers as an escape hatch if they need to set non-standard gap values (but adds a bit of friction to it)
+  gap: 
+    var(--hds-layout-grid-row-gap, 0)
+    var(--hds-layout-grid-column-gap, 0);
+}
+
+// inline
+
+.hds-layout-grid--is-inline {
+  display: inline-grid;
+  // prevents issue where grid columns don't line up in a row
+  max-width: 100%;
+}
+
+// align
+
+.hds-layout-grid--align-items-start { align-items: start;}
+.hds-layout-grid--align-items-center { align-items: center;}
+.hds-layout-grid--align-items-end { align-items: end; }
+.hds-layout-grid--align-items-stretch { align-items: stretch; }
+
+// gap
+
+// We set the values of the gap custom properties overriding the default value of 0
+
+// set the row gap size
+.hds-layout-grid--row-gap-4 { --hds-layout-grid-row-gap: 4px; }
+.hds-layout-grid--row-gap-8 { --hds-layout-grid-row-gap: 8px; }
+.hds-layout-grid--row-gap-12 { --hds-layout-grid-row-gap: 12px; }
+.hds-layout-grid--row-gap-16 { --hds-layout-grid-row-gap: 16px; }
+.hds-layout-grid--row-gap-24 { --hds-layout-grid-row-gap: 24px; }
+.hds-layout-grid--row-gap-32 { --hds-layout-grid-row-gap: 32px; }
+.hds-layout-grid--row-gap-48 { --hds-layout-grid-row-gap: 48px; }
+
+// set the column gap size
+.hds-layout-grid--column-gap-4 { --hds-layout-grid-column-gap: 4px; }
+.hds-layout-grid--column-gap-8 { --hds-layout-grid-column-gap: 8px; }
+.hds-layout-grid--column-gap-12 { --hds-layout-grid-column-gap: 12px; }
+.hds-layout-grid--column-gap-16 { --hds-layout-grid-column-gap: 16px; }
+.hds-layout-grid--column-gap-24 { --hds-layout-grid-column-gap: 24px;  }
path: packages/components/src/styles/components/layout/grid.scss
user: login: KristinLBradley
body: Thanks, updating all these together locally
created_at: 2025-03-18T18:47:04Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,77 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // The column gap value is subtracted from the column-min-width to prevent overflow & simplify API for consumers
+
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as a fallback value within calc()
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+  grid-template-columns:
+    repeat(
+      auto-fit,
+      minmax(
+        calc(
+          var(--hds-layout-grid-column-min-width, 0px) - var(--hds-layout-grid-column-gap, 0px)
+        ),
+        1fr
+      )
+    );
+
+  // Note: The gap style is defined here to avoid setting it repeatedly for the gap size variants defined below.
+  // For the gap size variants, we override the value of the gap custom properties to set the desired sizes.
+  // These variables can be used by the consumers as an escape hatch if they need to set non-standard gap values (but adds a bit of friction to it)
+  gap: 
+    var(--hds-layout-grid-row-gap, 0)
+    var(--hds-layout-grid-column-gap, 0);
+}
+
+// inline
+
+.hds-layout-grid--is-inline {
+  display: inline-grid;
+  // prevents issue where grid columns don't line up in a row
+  max-width: 100%;
+}
+
+// align
+
+.hds-layout-grid--align-items-start { align-items: start; }
+.hds-layout-grid--align-items-center { align-items: center; }
+.hds-layout-grid--align-items-end { align-items: end; }
+.hds-layout-grid--align-items-stretch { align-items: stretch; }
+
+// gap
+
+// We set the values of the gap custom properties overriding the default value of 0
+
+// set the row gap size
path: packages/components/src/styles/components/layout/grid.scss
user: login: didoo
body: [suggestion] I have removed this extra comment in the `Flex` implementation (it's redundant, now)
```suggestion
```
created_at: 2025-03-19T09:52:43Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,77 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // The column gap value is subtracted from the column-min-width to prevent overflow & simplify API for consumers
+
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as a fallback value within calc()
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+  grid-template-columns:
+    repeat(
+      auto-fit,
+      minmax(
+        calc(
+          var(--hds-layout-grid-column-min-width, 0px) - var(--hds-layout-grid-column-gap, 0px)
+        ),
+        1fr
+      )
+    );
+
+  // Note: The gap style is defined here to avoid setting it repeatedly for the gap size variants defined below.
+  // For the gap size variants, we override the value of the gap custom properties to set the desired sizes.
+  // These variables can be used by the consumers as an escape hatch if they need to set non-standard gap values (but adds a bit of friction to it)
+  gap: 
+    var(--hds-layout-grid-row-gap, 0)
+    var(--hds-layout-grid-column-gap, 0);
+}
+
+// inline
+
+.hds-layout-grid--is-inline {
+  display: inline-grid;
+  // prevents issue where grid columns don't line up in a row
+  max-width: 100%;
+}
+
+// align
+
+.hds-layout-grid--align-items-start { align-items: start; }
+.hds-layout-grid--align-items-center { align-items: center; }
+.hds-layout-grid--align-items-end { align-items: end; }
+.hds-layout-grid--align-items-stretch { align-items: stretch; }
+
+// gap
+
+// We set the values of the gap custom properties overriding the default value of 0
+
+// set the row gap size
+.hds-layout-grid--row-gap-4 { --hds-layout-grid-row-gap: 4px; }
+.hds-layout-grid--row-gap-8 { --hds-layout-grid-row-gap: 8px; }
+.hds-layout-grid--row-gap-12 { --hds-layout-grid-row-gap: 12px; }
+.hds-layout-grid--row-gap-16 { --hds-layout-grid-row-gap: 16px; }
+.hds-layout-grid--row-gap-24 { --hds-layout-grid-row-gap: 24px; }
+.hds-layout-grid--row-gap-32 { --hds-layout-grid-row-gap: 32px; }
+.hds-layout-grid--row-gap-48 { --hds-layout-grid-row-gap: 48px; }
+
+// set the column gap size
path: packages/components/src/styles/components/layout/grid.scss
user: login: didoo
body: [suggestion] I have removed this extra comment in the `Flex` implementation (it's redundant, now)
```suggestion
```
created_at: 2025-03-19T09:53:21Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,417 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    <SG.Item @label="No min width columns (min-width defaults to 0px)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="30em min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="30em">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Align</Shw::Text::H2>
+  <Shw::Text::Body>This is the
+    <code>align-items</code>
+    CSS property of
+    <code>css grid</code>.</Shw::Text::Body>
+
+  <Shw::Grid @columns={{@model.ALIGNS.length}} @gap="2rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    {{#each @model.ALIGNS as |align|}}
+      <SG.Item @label={{(concat "align=" align)}}>
+        <Shw::Outliner {{style width="120px" height="120px"}}>
+          <Hds::Layout::Grid @align={{align}} {{style width="100%" height="100%"}}>
+            <Shw::Placeholder @text="#A" @width="auto" @height="auto" {{style min-width="24px" min-height="24px"}} />
+            <Shw::Placeholder @text="#B" @width="auto" @height="auto" {{style min-width="24px" min-height="24px"}} />
+            <Shw::Placeholder @text="#C" @width="auto" @height="auto" {{style min-width="24px" min-height="24px"}} />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Gap</Shw::Text::H2>
+
+  <Shw::Text::H4 @tag="h3">Single value</Shw::Text::H4>
+
+  <Shw::Grid @columns="4" @gap="2rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    {{#each @model.GAPS as |gap|}}
+      <SG.Item @label="gap={{gap}}">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}} @columnMinWidth="50%">
+            <Shw::Placeholder @text="#1" @height="24" />
+            <Shw::Placeholder @text="#2" @height="24" />
+            <Shw::Placeholder @text="#3" @height="24" />
+            <Shw::Placeholder @text="#4" @height="24" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Text::H4 @tag="h3">Double value (row/column)</Shw::Text::H4>
+
+  <Shw::Grid @columns={{2}} @gap="2rem 4rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    {{! we use only a subset of possible combinations, just for testing purposes }}
+    {{#let (array (array "4" "48") (array "8" "32") (array "12" "24") (array "16" "16")) as |gapsList|}}
+      {{#each gapsList as |gapsArray|}}
+        <SG.Item @label="gap=[{{gapsArray}}]">
+          <Shw::Outliner>
+            <Hds::Layout::Grid @gap={{gapsArray}} @columnMinWidth="50%">
+              <Shw::Placeholder @text="item #1" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #2" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #3" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #4" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #5" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #6" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #7" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #8" @width="auto" @height="24" />
+            </Hds::Layout::Grid>
+          </Shw::Outliner>
+        </SG.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Display</Shw::Text::H2>
+
+  <Shw::Grid @gap="2rem" @columns={{2}} class="shw-layout-grid-example-tint-flex-items" as |SF|>
+    {{#let (array false true) as |booleans|}}
+      {{#each booleans as |isInline|}}
+        <SF.Item @label={{if isInline "inline-grid (isInline=true)" "grid (default)"}}>
+          <Hds::Text::Body @size="200" @tag="div">
+            Lorem
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#1" @height="24" />
+              <Shw::Placeholder @text="#2" @height="24" />
+              <Shw::Placeholder @text="#3" @height="24" />
+              <Shw::Placeholder @text="#4" @height="24" />
+            </Hds::Layout::Grid>
+            sit amet
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#A" @height="24" />
+              <Shw::Placeholder @text="#B" @height="24" />
+              <Shw::Placeholder @text="#C" @height="24" />
+              <Shw::Placeholder @text="#D" @height="24" />
+            </Hds::Layout::Grid>
+            elit.
+          </Hds::Text::Body>
+        </SF.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+</section>
+
+<Shw::Divider />
+
+<section data-test-percy>
+  <Shw::Text::H2>Grid::Item</Shw::Text::H2>
+
+  <Shw::Grid @columns={{1}} as |SG|>
+    <SG.Item @label="used directly or via yielded component">
+      <Shw::Outliner>
+        <Hds::Layout::Grid as |HLG|>
+          <Shw::Placeholder @text="item #1" @height="40" @background="#e4c5f3" />
+
+          <Hds::Layout::Grid::Item>
+            <Shw::Placeholder @text="item #2 within Grid::Item" @height="40" @background="#e5ffd2" />
+          </Hds::Layout::Grid::Item>
+
+          <Shw::Placeholder @text="item #3" @height="40" @background="#d2f4ff" />
+
+          <HLG.Item>
+            <Shw::Placeholder @text="item #4 within HLG.Item" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>colspan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="1st item w/ colspan=2">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colspan={{2}}>
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="1st item w/ colspan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colspan={{3}}>
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="1st item w/ colspan=4">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colspan={{4}}>
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>rowspan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="1st item w/ rowspan=2">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="12" as |HLG|>
+          <HLG.Item @rowspan={{2}}>
+            <Shw::Placeholder @text="#1" @height="100%" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="2nd item w/ rowspan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="50%" @gap="12" as |HLG|>
+          <HLG.Item>
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item @rowspan={{3}}>
+            <Shw::Placeholder @text="#2" @height="100%" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>colspan & rowspan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="1st item w/ colspan=2 & rowspan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="12" as |HLG|>
+          <HLG.Item @colspan={{2}} @rowspan={{3}}>
+            <Shw::Placeholder @text="#1" @height="100%" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#5" @height="40" @background="#f3d9c5" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#6" @height="40" @background="#fee1ec" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+</section>
+
+<Shw::Divider />
+
+<section data-test-percy>
+  <Shw::Text::H2>Examples</Shw::Text::H2>
+
+  <Shw::Grid @columns="1" @gap="2rem" as |SG|>
+    <SG.Item @label="3 column layout Card layout">
+      <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="32">
+        <Hds::Card::Container @level="mid" @hasBorder={{true}} {{style padding="24px"}}>
+          <Hds::Layout::Grid @columnMinWidth="100%" @gap="16">
+            <Hds::Layout::Flex @align="center" @gap="8">
+              <Hds::IconTile @icon="cloud" @size="small" />
+              <Hds::Text::Display @tag="h2" @size="300">
+                Active resources
+              </Hds::Text::Display>
+            </Hds::Layout::Flex>
+            <Hds::Layout::Grid @columnMinWidth="100%" @gap="8" as |LG|>
+              <LG.Item>
path: showcase/app/templates/layouts/grid.hbs
user: login: didoo
body: Smart fix! 🙌
created_at: 2025-03-19T09:58:20Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,417 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    <SG.Item @label="No min width columns (min-width defaults to 0px)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48">
path: showcase/app/templates/layouts/grid.hbs
user: login: didoo
body: [nit] 48px of gap seems a lot to me (it uses a lot of space in the page)
```suggestion
        <Hds::Layout::Grid @gap="24">
```
created_at: 2025-03-19T10:01:02Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,417 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    <SG.Item @label="No min width columns (min-width defaults to 0px)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="250px">
path: showcase/app/templates/layouts/grid.hbs
user: login: didoo
body: ```suggestion
        <Hds::Layout::Grid @gap="24" @columnMinWidth="250px">
```
created_at: 2025-03-19T10:01:11Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,417 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    <SG.Item @label="No min width columns (min-width defaults to 0px)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="33.33%">
path: showcase/app/templates/layouts/grid.hbs
user: login: didoo
body: ```suggestion
        <Hds::Layout::Grid @gap="24" @columnMinWidth="33.33%">
```
created_at: 2025-03-19T10:01:20Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,417 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    <SG.Item @label="No min width columns (min-width defaults to 0px)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="30em min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="30em">
path: showcase/app/templates/layouts/grid.hbs
user: login: didoo
body: ```suggestion
        <Hds::Layout::Grid @gap="24" @columnMinWidth="30em">
```
created_at: 2025-03-19T10:01:28Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,70 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // The column gap value is subtracted from the column-min-width to prevent overflow & simplify API for consumers
+
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as a fallback value within calc()
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+  grid-template-columns:
+    repeat(
+      auto-fit,
+      minmax(
+        calc(
+          var(--hds-layout-grid-column-min-width, 0px) - var(--hds-layout-grid-column-gap, 0px)
+        ),
+        1fr
+      )
+    );
+
+  // Note: The gap style is defined here to avoid setting it repeatedly for the gap size variants defined below.
+  // For the gap size variants, we override the value of the gap custom properties to set the desired sizes.
+  // These variables can be used by the consumers as an escape hatch if they need to set non-standard gap values (but adds a bit of friction to it)
+  gap: 
+    var(--hds-layout-grid-row-gap, 0)
+    var(--hds-layout-grid-column-gap, 0);
+}
+
+// align
+
+.hds-layout-grid--align-items-start { align-items: start; }
+.hds-layout-grid--align-items-center { align-items: center; }
+.hds-layout-grid--align-items-end { align-items: end; }
+.hds-layout-grid--align-items-stretch { align-items: stretch; }
+
+// gap
+
+// We set the values of the gap custom properties overriding the default value of 0
+
+.hds-layout-grid--row-gap-4 { --hds-layout-grid-row-gap: 4px; }
+.hds-layout-grid--row-gap-8 { --hds-layout-grid-row-gap: 8px; }
+.hds-layout-grid--row-gap-12 { --hds-layout-grid-row-gap: 12px; }
+.hds-layout-grid--row-gap-16 { --hds-layout-grid-row-gap: 16px; }
+.hds-layout-grid--row-gap-24 { --hds-layout-grid-row-gap: 24px; }
+.hds-layout-grid--row-gap-32 { --hds-layout-grid-row-gap: 32px; }
+.hds-layout-grid--row-gap-48 { --hds-layout-grid-row-gap: 48px; }
+
+.hds-layout-grid--column-gap-4 { --hds-layout-grid-column-gap: 4px; }
+.hds-layout-grid--column-gap-8 { --hds-layout-grid-column-gap: 8px; }
+.hds-layout-grid--column-gap-12 { --hds-layout-grid-column-gap: 12px; }
+.hds-layout-grid--column-gap-16 { --hds-layout-grid-column-gap: 16px; }
+.hds-layout-grid--column-gap-24 { --hds-layout-grid-column-gap: 24px; }
+.hds-layout-grid--column-gap-32 { --hds-layout-grid-column-gap: 32px; }
+.hds-layout-grid--column-gap-48 { --hds-layout-grid-column-gap: 48px; }
+
+// LAYOUT > GRID > ITEM
+
+.hds-layout-grid-item {
+  --hds-layout-grid-row-span: 1;
+  --hds-layout-grid-column-span: 1;
path: packages/components/src/styles/components/layout/grid.scss
user: login: KristinLBradley
body: I missed declaring these custom properties on the grid-item before (I was just using fall-back values within the style declarations). Doing this prevents unwanted inheritance in the case of using nested grid & grid-items.
created_at: 2025-03-19T17:58:46Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,70 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // The column gap value is subtracted from the column-min-width to prevent overflow & simplify API for consumers
+
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as a fallback value within calc()
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+  grid-template-columns:
+    repeat(
+      auto-fit,
+      minmax(
+        calc(
+          var(--hds-layout-grid-column-min-width, 0px) - var(--hds-layout-grid-column-gap, 0px)
+        ),
+        1fr
+      )
+    );
+
+  // Note: The gap style is defined here to avoid setting it repeatedly for the gap size variants defined below.
+  // For the gap size variants, we override the value of the gap custom properties to set the desired sizes.
+  // These variables can be used by the consumers as an escape hatch if they need to set non-standard gap values (but adds a bit of friction to it)
+  gap: 
path: packages/components/src/styles/components/layout/grid.scss
user: login: dchyun
body: ```suggestion
  gap:
```
[Nit] trailing space
created_at: 2025-03-19T18:44:40Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,70 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // The column gap value is subtracted from the column-min-width to prevent overflow & simplify API for consumers
+
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as a fallback value within calc()
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+  grid-template-columns:
+    repeat(
+      auto-fit,
+      minmax(
+        calc(
+          var(--hds-layout-grid-column-min-width, 0px) - var(--hds-layout-grid-column-gap, 0px)
+        ),
+        1fr
+      )
+    );
+
+  // Note: The gap style is defined here to avoid setting it repeatedly for the gap size variants defined below.
+  // For the gap size variants, we override the value of the gap custom properties to set the desired sizes.
+  // These variables can be used by the consumers as an escape hatch if they need to set non-standard gap values (but adds a bit of friction to it)
+  gap: 
+    var(--hds-layout-grid-row-gap, 0)
+    var(--hds-layout-grid-column-gap, 0);
+}
+
+// align
+
+.hds-layout-grid--align-items-start { align-items: start; }
+.hds-layout-grid--align-items-center { align-items: center; }
+.hds-layout-grid--align-items-end { align-items: end; }
+.hds-layout-grid--align-items-stretch { align-items: stretch; }
+
+// gap
+
+// We set the values of the gap custom properties overriding the default value of 0
+
+.hds-layout-grid--row-gap-4 { --hds-layout-grid-row-gap: 4px; }
+.hds-layout-grid--row-gap-8 { --hds-layout-grid-row-gap: 8px; }
+.hds-layout-grid--row-gap-12 { --hds-layout-grid-row-gap: 12px; }
+.hds-layout-grid--row-gap-16 { --hds-layout-grid-row-gap: 16px; }
+.hds-layout-grid--row-gap-24 { --hds-layout-grid-row-gap: 24px; }
+.hds-layout-grid--row-gap-32 { --hds-layout-grid-row-gap: 32px; }
+.hds-layout-grid--row-gap-48 { --hds-layout-grid-row-gap: 48px; }
+
+.hds-layout-grid--column-gap-4 { --hds-layout-grid-column-gap: 4px; }
+.hds-layout-grid--column-gap-8 { --hds-layout-grid-column-gap: 8px; }
+.hds-layout-grid--column-gap-12 { --hds-layout-grid-column-gap: 12px; }
+.hds-layout-grid--column-gap-16 { --hds-layout-grid-column-gap: 16px; }
+.hds-layout-grid--column-gap-24 { --hds-layout-grid-column-gap: 24px; }
+.hds-layout-grid--column-gap-32 { --hds-layout-grid-column-gap: 32px; }
+.hds-layout-grid--column-gap-48 { --hds-layout-grid-column-gap: 48px; }
+
+// LAYOUT > GRID > ITEM
+
+.hds-layout-grid-item {
+  --hds-layout-grid-row-span: 1;
+  --hds-layout-grid-column-span: 1;
+  
path: packages/components/src/styles/components/layout/grid.scss
user: login: dchyun
body: ```suggestion
 
```
[Nit] trailing space
created_at: 2025-03-19T18:45:08Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,413 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "Layout::Grid Component"}}
+
+<Shw::Text::H1>Layout::Grid</Shw::Text::H1>
+
+<section data-test-percy>
+  <Shw::Text::H2>Column min width</Shw::Text::H2>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    <SG.Item @label="No min width columns (min-width defaults to 0px)">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="250px min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="250px">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="33.33% min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="33.33%">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="40em min width columns">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @gap="48" @columnMinWidth="40em">
+          <Shw::Placeholder @text="#1" @height="40" />
+          <Shw::Placeholder @text="#2" @height="40" />
+          <Shw::Placeholder @text="#3" @height="40" />
+          <Shw::Placeholder @text="#4" @height="40" />
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Align</Shw::Text::H2>
+  <Shw::Text::Body>This is the
+    <code>align-items</code>
+    CSS property of
+    <code>css grid</code>.</Shw::Text::Body>
+
+  <Shw::Grid @columns={{@model.ALIGNS.length}} @gap="2rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    {{#each @model.ALIGNS as |align|}}
+      <SG.Item @label={{(concat "align=" align)}}>
+        <Shw::Outliner {{style width="120px" height="120px"}}>
+          <Hds::Layout::Grid @align={{align}} {{style width="100%" height="100%"}}>
+            <Shw::Placeholder @text="#A" @width="auto" @height="auto" {{style min-width="24px" min-height="24px"}} />
+            <Shw::Placeholder @text="#B" @width="auto" @height="auto" {{style min-width="24px" min-height="24px"}} />
+            <Shw::Placeholder @text="#C" @width="auto" @height="auto" {{style min-width="24px" min-height="24px"}} />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Gap</Shw::Text::H2>
+
+  <Shw::Text::H4 @tag="h3">Single value</Shw::Text::H4>
+
+  <Shw::Grid @columns="4" @gap="2rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    {{#each @model.GAPS as |gap|}}
+      <SG.Item @label="gap={{gap}}">
+        <Shw::Outliner>
+          <Hds::Layout::Grid @gap={{gap}} @columnMinWidth="50%">
+            <Shw::Placeholder @text="#1" @height="24" />
+            <Shw::Placeholder @text="#2" @height="24" />
+            <Shw::Placeholder @text="#3" @height="24" />
+            <Shw::Placeholder @text="#4" @height="24" />
+          </Hds::Layout::Grid>
+        </Shw::Outliner>
+      </SG.Item>
+    {{/each}}
+  </Shw::Grid>
+
+  <Shw::Text::H4 @tag="h3">Double value (row/column)</Shw::Text::H4>
+
+  <Shw::Grid @columns={{2}} @gap="2rem 4rem" class="shw-layout-grid-example-tint-flex-items" as |SG|>
+    {{! we use only a subset of possible combinations, just for testing purposes }}
+    {{#let (array (array "4" "48") (array "8" "32") (array "12" "24") (array "16" "16")) as |gapsList|}}
+      {{#each gapsList as |gapsArray|}}
+        <SG.Item @label="gap=[{{gapsArray}}]">
+          <Shw::Outliner>
+            <Hds::Layout::Grid @gap={{gapsArray}} @columnMinWidth="50%">
+              <Shw::Placeholder @text="item #1" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #2" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #3" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #4" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #5" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #6" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #7" @width="auto" @height="24" />
+              <Shw::Placeholder @text="item #8" @width="auto" @height="24" />
+            </Hds::Layout::Grid>
+          </Shw::Outliner>
+        </SG.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+
+  <Shw::Divider @level={{2}} />
+
+  <Shw::Text::H2>Display</Shw::Text::H2>
+
+  <Shw::Grid @gap="2rem" @columns={{2}} class="shw-layout-grid-example-tint-flex-items" as |SF|>
+    {{#let (array false true) as |booleans|}}
+      {{#each booleans as |isInline|}}
+        <SF.Item @label={{if isInline "inline-grid (isInline=true)" "grid (default)"}}>
+          <Hds::Text::Body @size="200" @tag="div">
+            Lorem
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#1" @height="24" />
+              <Shw::Placeholder @text="#2" @height="24" />
+              <Shw::Placeholder @text="#3" @height="24" />
+              <Shw::Placeholder @text="#4" @height="24" />
+            </Hds::Layout::Grid>
+            sit amet
+            <Hds::Layout::Grid @isInline={{isInline}} @columnMinWidth="2em">
+              <Shw::Placeholder @text="#A" @height="24" />
+              <Shw::Placeholder @text="#B" @height="24" />
+              <Shw::Placeholder @text="#C" @height="24" />
+              <Shw::Placeholder @text="#D" @height="24" />
+            </Hds::Layout::Grid>
+            elit.
+          </Hds::Text::Body>
+        </SF.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Grid>
+</section>
+
+<Shw::Divider />
+
+<section data-test-percy>
+  <Shw::Text::H2>Grid::Item</Shw::Text::H2>
+
+  <Shw::Grid @columns={{1}} as |SG|>
+    <SG.Item @label="used directly or via yielded component">
+      <Shw::Outliner>
+        <Hds::Layout::Grid as |HLG|>
+          <Shw::Placeholder @text="item #1" @height="40" @background="#e4c5f3" />
+
+          <Hds::Layout::Grid::Item>
+            <Shw::Placeholder @text="item #2 within Grid::Item" @height="40" @background="#e5ffd2" />
+          </Hds::Layout::Grid::Item>
+
+          <Shw::Placeholder @text="item #3" @height="40" @background="#d2f4ff" />
+
+          <HLG.Item>
+            <Shw::Placeholder @text="item #4 within HLG.Item" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>colSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="1st item w/ colSpan=2">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="2">
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="1st item w/ colSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="3">
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+
+    <SG.Item @label="1st item w/ colSpan=4">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="250px" @gap="12" as |HLG|>
+          <HLG.Item @colSpan="4">
+            <Shw::Placeholder @text="#1" @height="40" @background="#e4c5f3" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#2" @height="40" @background="#e5ffd2" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#3" @height="40" @background="#d2f4ff" />
+          </HLG.Item>
+          <HLG.Item>
+            <Shw::Placeholder @text="#4" @height="40" @background="#fff8d2" />
+          </HLG.Item>
+        </Hds::Layout::Grid>
+      </Shw::Outliner>
+    </SG.Item>
+  </Shw::Grid>
+
+  <Shw::Text::H3>rowSpan</Shw::Text::H3>
+
+  <Shw::Grid @columns="1" @gap="1.5rem" as |SG|>
+    <SG.Item @label="1st item w/ rowSpan=3">
+      <Shw::Outliner>
+        <Hds::Layout::Grid @columnMinWidth="33.33%" @gap="12" as |HLG|>
+          <HLG.Item @rowSpan="3">
path: showcase/app/templates/layouts/grid.hbs
user: login: KristinLBradley
body: Fixed this one, thanks
created_at: 2025-03-19T20:51:24Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,70 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // The column gap value is subtracted from the column-min-width to prevent overflow & simplify API for consumers
+
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as a fallback value within calc()
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+  grid-template-columns:
+    repeat(
+      auto-fit,
+      minmax(
+        calc(
+          var(--hds-layout-grid-column-min-width, 0px) - var(--hds-layout-grid-column-gap, 0px)
+        ),
+        1fr
+      )
+    );
+
+  // Note: The gap style is defined here to avoid setting it repeatedly for the gap size variants defined below.
+  // For the gap size variants, we override the value of the gap custom properties to set the desired sizes.
+  // These variables can be used by the consumers as an escape hatch if they need to set non-standard gap values (but adds a bit of friction to it)
+  gap: 
path: packages/components/src/styles/components/layout/grid.scss
user: login: KristinLBradley
body: fixed locally. thanks
created_at: 2025-03-19T20:55:20Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,70 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // The column gap value is subtracted from the column-min-width to prevent overflow & simplify API for consumers
+
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as a fallback value within calc()
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+  grid-template-columns:
+    repeat(
+      auto-fit,
+      minmax(
+        calc(
+          var(--hds-layout-grid-column-min-width, 0px) - var(--hds-layout-grid-column-gap, 0px)
+        ),
+        1fr
+      )
+    );
+
+  // Note: The gap style is defined here to avoid setting it repeatedly for the gap size variants defined below.
+  // For the gap size variants, we override the value of the gap custom properties to set the desired sizes.
+  // These variables can be used by the consumers as an escape hatch if they need to set non-standard gap values (but adds a bit of friction to it)
+  gap: 
path: packages/components/src/styles/components/layout/grid.scss
user: login: KristinLBradley
body: ```suggestion
  gap:
```
created_at: 2025-03-20T21:22:50Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,70 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// LAYOUT > GRID
+//
+
+.hds-layout-grid {
+  display: grid;
+  // The column gap value is subtracted from the column-min-width to prevent overflow & simplify API for consumers
+
+  // Note: "Unitless 0" <length>s aren’t supported in math functions so we use 0px as a fallback value within calc()
+  // https://drafts.csswg.org/css-values/#calc-type-checking
+  grid-template-columns:
+    repeat(
+      auto-fit,
+      minmax(
+        calc(
+          var(--hds-layout-grid-column-min-width, 0px) - var(--hds-layout-grid-column-gap, 0px)
+        ),
+        1fr
+      )
+    );
+
+  // Note: The gap style is defined here to avoid setting it repeatedly for the gap size variants defined below.
+  // For the gap size variants, we override the value of the gap custom properties to set the desired sizes.
+  // These variables can be used by the consumers as an escape hatch if they need to set non-standard gap values (but adds a bit of friction to it)
+  gap: 
+    var(--hds-layout-grid-row-gap, 0)
+    var(--hds-layout-grid-column-gap, 0);
+}
+
+// align
+
+.hds-layout-grid--align-items-start { align-items: start; }
+.hds-layout-grid--align-items-center { align-items: center; }
+.hds-layout-grid--align-items-end { align-items: end; }
+.hds-layout-grid--align-items-stretch { align-items: stretch; }
+
+// gap
+
+// We set the values of the gap custom properties overriding the default value of 0
+
+.hds-layout-grid--row-gap-4 { --hds-layout-grid-row-gap: 4px; }
+.hds-layout-grid--row-gap-8 { --hds-layout-grid-row-gap: 8px; }
+.hds-layout-grid--row-gap-12 { --hds-layout-grid-row-gap: 12px; }
+.hds-layout-grid--row-gap-16 { --hds-layout-grid-row-gap: 16px; }
+.hds-layout-grid--row-gap-24 { --hds-layout-grid-row-gap: 24px; }
+.hds-layout-grid--row-gap-32 { --hds-layout-grid-row-gap: 32px; }
+.hds-layout-grid--row-gap-48 { --hds-layout-grid-row-gap: 48px; }
+
+.hds-layout-grid--column-gap-4 { --hds-layout-grid-column-gap: 4px; }
+.hds-layout-grid--column-gap-8 { --hds-layout-grid-column-gap: 8px; }
+.hds-layout-grid--column-gap-12 { --hds-layout-grid-column-gap: 12px; }
+.hds-layout-grid--column-gap-16 { --hds-layout-grid-column-gap: 16px; }
+.hds-layout-grid--column-gap-24 { --hds-layout-grid-column-gap: 24px; }
+.hds-layout-grid--column-gap-32 { --hds-layout-grid-column-gap: 32px; }
+.hds-layout-grid--column-gap-48 { --hds-layout-grid-column-gap: 48px; }
+
+// LAYOUT > GRID > ITEM
+
+.hds-layout-grid-item {
+  --hds-layout-grid-row-span: 1;
+  --hds-layout-grid-column-span: 1;
+  
path: packages/components/src/styles/components/layout/grid.scss
user: login: KristinLBradley
body: ```suggestion

```
created_at: 2025-03-20T21:23:23Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,31 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export enum HdsLayoutGridAlignValues {
+  Start = 'start',
+  Center = 'center',
+  End = 'end',
+  Stretch = 'stretch',
+}
+
+export type HdsLayoutGridAligns = `${HdsLayoutGridAlignValues}`;
+
+export enum HdsLayoutGridGapValues {
+  'Four' = '4',
+  'Eight' = '8',
+  'Twelve' = '12',
+  'Sixteen' = '16',
+  'Twentyfour' = '24',
path: packages/components/src/components/hds/layout/grid/types.ts
user: login: shleewhite
body: This was changed to camel case in the Flex PR so it should probably match.
```suggestion
  'TwentyFour' = '24',
```
created_at: 2025-03-24T20:12:52Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,31 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export enum HdsLayoutGridAlignValues {
+  Start = 'start',
+  Center = 'center',
+  End = 'end',
+  Stretch = 'stretch',
+}
+
+export type HdsLayoutGridAligns = `${HdsLayoutGridAlignValues}`;
+
+export enum HdsLayoutGridGapValues {
+  'Four' = '4',
+  'Eight' = '8',
+  'Twelve' = '12',
+  'Sixteen' = '16',
+  'Twentyfour' = '24',
path: packages/components/src/components/hds/layout/grid/types.ts
user: login: shleewhite
body: (same for thirty two and forty eight)
created_at: 2025-03-24T20:13:08Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,31 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export enum HdsLayoutGridAlignValues {
+  Start = 'start',
+  Center = 'center',
+  End = 'end',
+  Stretch = 'stretch',
+}
+
+export type HdsLayoutGridAligns = `${HdsLayoutGridAlignValues}`;
+
+export enum HdsLayoutGridGapValues {
+  'Four' = '4',
+  'Eight' = '8',
+  'Twelve' = '12',
+  'Sixteen' = '16',
+  'Twentyfour' = '24',
path: packages/components/src/components/hds/layout/grid/types.ts
user: login: KristinLBradley
body: Thanks! Updating all together locally & pushing up.
created_at: 2025-03-24T22:10:40Z
author_association: CONTRIBUTOR
diff_hunk: @@ -143,6 +143,8 @@ import type HdsIconTileComponent from './components/hds/icon-tile';
 import type HdsInteractiveComponent from './components/hds/interactive';
 import type HdsLayoutFlexComponent from './components/hds/layout/flex';
 import type HdsLayoutFlexItemComponent from './components/hds/layout/flex/item';
+import type HdsLayoutGridComponent from './components/hds/layout/grid';
+import type HdsLayoutGridItemComponent from './components/hds/layout/flex/item';
path: packages/components/src/template-registry.ts
user: login: dchyun
body: ```suggestion
import type HdsLayoutGridItemComponent from './components/hds/layout/grid/item';
```
created_at: 2025-03-25T19:47:12Z
author_association: CONTRIBUTOR
diff_hunk: @@ -143,6 +143,8 @@ import type HdsIconTileComponent from './components/hds/icon-tile';
 import type HdsInteractiveComponent from './components/hds/interactive';
 import type HdsLayoutFlexComponent from './components/hds/layout/flex';
 import type HdsLayoutFlexItemComponent from './components/hds/layout/flex/item';
+import type HdsLayoutGridComponent from './components/hds/layout/grid';
+import type HdsLayoutGridItemComponent from './components/hds/layout/flex/item';
path: packages/components/src/template-registry.ts
user: login: KristinLBradley
body: Thanks for catching!
created_at: 2025-03-25T20:07:34Z
author_association: CONTRIBUTOR

PR comments:
user: login: vercel[bot]
created_at: 2025-03-08T01:15:04Z
body: [vc]: #0Sc8GEUsMZ9qKkRL27GSK1g/9pXvy35B+cIa0COQvBA=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJoZHMtc2hvd2Nhc2UiLCJyb290RGlyZWN0b3J5Ijoic2hvd2Nhc2UiLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vaGFzaGljb3JwL2hkcy1zaG93Y2FzZS9EeThOZFNYZ0dtS3FpdVZkVnh2RWhlU1BNdjdyIiwicHJldmlld1VybCI6Imhkcy1zaG93Y2FzZS1naXQtaGRzLTQ1MzItZ3JpZC1jb21wb25lbnQtaGFzaGljb3JwLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQifSx7Im5hbWUiOiJoZHMtd2Vic2l0ZSIsInJvb3REaXJlY3RvcnkiOiJ3ZWJzaXRlIiwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL2hhc2hpY29ycC9oZHMtd2Vic2l0ZS9EdzcxaFFHTGR5eTlDVG5ROGRKUzloNnQ3NTluIiwicHJldmlld1VybCI6Imhkcy13ZWJzaXRlLWdpdC1oZHMtNDUzMi1ncmlkLWNvbXBvbmVudC1oYXNoaWNvcnAudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCJ9XX0=
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Updated (UTC) |
| :--- | :----- | :------ | :------ |
| **hds-showcase** | ✅ Ready ([Inspect](https://vercel.com/hashicorp/hds-showcase/Dy8NdSXgGmKqiuVdVxvEheSPMv7r)) | [Visit Preview](https://hds-showcase-git-hds-4532-grid-component-hashicorp.vercel.app) | Mar 25, 2025 8:11pm |
| **hds-website** | ✅ Ready ([Inspect](https://vercel.com/hashicorp/hds-website/Dw71hQGLdyy9CTnQ8dJS9h6t759n)) | [Visit Preview](https://hds-website-git-hds-4532-grid-component-hashicorp.vercel.app) | Mar 25, 2025 8:11pm |



author_association: NONE
user: login: KristinLBradley
created_at: 2025-03-19T17:53:40Z
body: Getting an error from Percy failing to fetch snapshots...
author_association: CONTRIBUTOR
user: login: KristinLBradley
created_at: 2025-03-24T22:12:06Z
body: @shleewhite Thanks for reviewing! I updated the gap value keys to use camel casing to match the `Flex` component.
author_association: CONTRIBUTOR
user: login: KristinLBradley
created_at: 2025-03-25T20:09:48Z
body: I rebased this branch off of `main` & fixed merge conflicts after merging in the `Flex` component to `main`. Could you please re-approve?
author_association: CONTRIBUTOR