Theme

Grid

layout @dryui/ui

CSS grid layout with uniform column control

layoutgridcolumnsresponsive

Start Here

Start from the smallest working snippet, then move to interactive examples and the full API contract below.

Styled quick start

Copy this entrypoint first. It includes the imports required to get the component on screen.

svelte
<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { Grid } from '@dryui/ui';
</script>

<Grid template="minmax(0, 2fr) minmax(18rem, 1fr)" gap="lg">
  <Card.Root><Card.Content>Main</Card.Content></Card.Root>
  <Card.Root><Card.Content>Sidebar</Card.Content></Card.Root>
</Grid>

Import options

Root package

ts
import { Grid } from '@dryui/ui'

Per-component subpath

ts
import { Grid } from '@dryui/ui/grid'

Customize

Use the interactive examples to see common variants, states, and composition patterns before building your own.

2-Column Grid

Column 1
Column 2
Column 3
Column 4
svelte
<Grid columns={2} gap="md">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
  <div>Column 4</div>
</Grid>

3-Column Grid

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
svelte
<Grid columns={3} gap="md">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</Grid>

4-Column Grid

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
svelte
<Grid columns={4} gap="sm">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</Grid>

Template grid

Main content
svelte
<Grid template="minmax(0, 2fr) minmax(18rem, 1fr)" gap="lg">
  <div>Main content</div>
  <aside>Sidebar</aside>
</Grid>

Compose

The full API contract lives here: props, CSS variables, and the public data attributes you can target when styling.

Prop Type Default Required Bindable
columns
123456789101112
Fixed integer column count for evenly sized columns. Use template when you need uneven widths.
 12 — —
template
string Custom CSS grid-template-columns value for uneven or mixed-width columns.
 — — —
gap
smmdlgxl
Uses DryUI spacing scale tokens, not raw CSS units.
 'md' — —
align
startcenterendstretch
Maps to align-items for the grid container.
 'stretch' — —
children
Snippet
— ✓ —

Forwards <div> attributes via rest props. Common examples: id, style, role.