s-m-r-t

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''auto'Number of columns or auto-fill with minmax
gap 'sm' | 'md' | 'lg' | 'xl''md'Gap between grid items

TypeScript

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

type GapSize = 'sm' | 'md' | 'lg' | 'xl';

interface Props {
  columns?: number | 'auto';
  gap?: GapSize;
  children?: Snippet;
}