Grid A responsive CSS Grid container for laying out child `<ed-grid-item>` elements. Supports multiple responsive...

Grid A responsive CSS Grid container for laying out child `<ed-grid-item>` elements. Supports multiple responsive column variants (2up, 3up, 4up, etc.), gap sizing (none, sm, lg), and breakpoint control (faster, slower). Grid automatically adapts from a single column on mobile to multiple columns on larger screens. Use the `variant` prop to control the column layout pattern, `gap` to adjust spacing, and `break` to fine-tune responsive breakpoints.

<ed-grid></ed-grid>

Properties

Name Type Default Description
variant String 'side-by-side' | '2up' | '3up' | '1-3up' | '4up' | '1-4up' | '1-2-4up' | '2-4-6up' Grid A responsive CSS Grid container for laying out child `<ed-grid-item>` elements. Supports multiple responsive column variants (2up, 3up, 4up, etc.), gap sizing (none, sm, lg), and breakpoint control (faster, slower). Grid automatically adapts from a single column on mobile to multiple columns on larger screens. Use the `variant` prop to control the column layout pattern, `gap` to adjust spacing, and `break` to fine-tune responsive breakpoints. / export class EdGrid extends EdElement { static get styles() { return unsafeCSS(styles); } /** Column layout variant Defines how items break across columns at different screen sizes: - `"side-by-side"` — 2 columns on all screen sizes - `"2up"` — 1 column (mobile) → 2 columns (tablet+) - `"3up"` — 1 column (mobile) → 2 columns (tablet) → 3 columns (desktop) - `"1-3up"` — 1 column (mobile) → 3 columns (desktop) - `"4up"` — 1 column (mobile) → 2 columns (tablet) → 3 columns (mid) → 4 columns (desktop) - `"1-2-4up"` — 1 column (mobile) → 2 columns (tablet) → 4 columns (desktop) - `"1-4up"` — 1 column (mobile) → 4 columns (medium+) - `"2-4-6up"` — 2 columns (mobile) → 4 columns (tablet) → 6 columns (desktop)
gap String 'none' | 'sm' | 'lg' Gutter spacing between grid items Controls the gap/gutter between grid items: - `"none"` — No gap between items - `"sm"` — Smaller gap than the default - `"lg"` — Larger gap than the default
break String 'faster' | 'slower' Responsive breakpoint adjustment Fine-tunes when the grid breaks to the next column count: - `"faster"` — Items break to multiple columns at narrower widths (earlier breakpoint) - `"slower"` — Items break to multiple columns at wider widths (later breakpoint)

Slots

Name Description
- The grid items (typically `<ed-grid-item>` components)

Interactive Documentation

Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.

Source

packages/eddie-web-components/components/grid/grid.ts