Grid

Responsive grid layout with configurable columns and gaps. Uses CSS Grid with smart auto-fill behavior by default.

Installation

typescript 
import { Grid } from '@happyvertical/smrt-svelte';

Auto Columns (Default)

By default, columns auto-fill with a minimum width of 300px.

Item 1

Item 2

Item 3

Item 4

svelte 
<Grid>
  <Card>Item 1</Card>
  <Card>Item 2</Card>
  <Card>Item 3</Card>
  <Card>Item 4</Card>
</Grid>

Fixed Columns

Specify exact number of columns.

Item 1

Item 2

Item 3

Item 4

Item 1

Item 2

Item 3

svelte 
<Grid columns={2}>
  <Card>Item 1</Card>
  <Card>Item 2</Card>
  <Card>Item 3</Card>
  <Card>Item 4</Card>
</Grid>

<Grid columns={3}>
  <Card>Item 1</Card>
  <Card>Item 2</Card>
  <Card>Item 3</Card>
</Grid>

Gap Sizes

Control spacing between grid items.

Small gap:

A

B

C

Large gap:

A

B

C

svelte 
<Grid columns={3} gap="sm">Small gap</Grid>
<Grid columns={3} gap="md">Medium gap (default)</Grid>
<Grid columns={3} gap="lg">Large gap</Grid>
<Grid columns={3} gap="xl">Extra large gap</Grid>

Dashboard Example

Common pattern for metric cards.

Users

1,234

Revenue

$45,678

Orders

567

Conversion

3.2%

svelte 
<Grid columns={4}>
  <Card>
    <h3>Users</h3>
    <p class="metric">1,234</p>
  </Card>
  <Card>
    <h3>Revenue</h3>
    <p class="metric">$45,678</p>
  </Card>
  <Card>
    <h3>Orders</h3>
    <p class="metric">567</p>
  </Card>
  <Card>
    <h3>Conversion</h3>
    <p class="metric">3.2%</p>
  </Card>
</Grid>

Props

PropTypeDefaultDescription
columns number | 'auto' | ResponsiveColumns'auto'Number of columns, auto-fill with minmax, or responsive object ({ sm, md, lg, xl })
gap GapSize | { row?: GapSize; column?: GapSize }'md'Gap between grid items (single size, or separate row/column gaps)
header Snippet-Header snippet rendered above the grid
alignItems 'start' | 'center' | 'end' | 'stretch'-Vertical alignment of grid items
justifyItems 'start' | 'center' | 'end' | 'stretch'-Horizontal alignment of grid items
autoFlow 'row' | 'column' | 'row dense' | 'column dense'-Grid auto-flow direction

TypeScript

typescript 
import { Grid } from '@happyvertical/smrt-svelte';

type GapSize = 'sm' | 'md' | 'lg' | 'xl';
type GapConfig = GapSize | { row?: GapSize; column?: GapSize };
type AlignItems = 'start' | 'center' | 'end' | 'stretch';
type JustifyItems = 'start' | 'center' | 'end' | 'stretch';
type AutoFlow = 'row' | 'column' | 'row dense' | 'column dense';

interface ResponsiveColumns {
  sm?: number;
  md?: number;
  lg?: number;
  xl?: number;
}

interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
  columns?: number | 'auto' | ResponsiveColumns;
  gap?: GapConfig;
  header?: Snippet;
  children?: Snippet;
  alignItems?: AlignItems;
  justifyItems?: JustifyItems;
  autoFlow?: AutoFlow;
}