Grid

Item 1

First grid item

Item 2

Second grid item

<script lang="ts">
  import { Grid, Surface, Text } from 'kumo-svelte';
</script>

<Grid variant="2up" gap="base">
  <Grid.Item>
    <Surface class="rounded-lg p-4">
      <Text bold>Item 1</Text>
      <div class="mt-1">
        <Text variant="secondary">First grid item</Text>
      </div>
    </Surface>
  </Grid.Item>
  <Grid.Item>
    <Surface class="rounded-lg p-4">
      <Text bold>Item 2</Text>
      <div class="mt-1">
        <Text variant="secondary">Second grid item</Text>
      </div>
    </Surface>
  </Grid.Item>
</Grid>

Installation

Barrel

import { Grid, GridItem } from 'kumo-svelte';

Granular

import { Grid, GridItem } from 'kumo-svelte/components/grid';

Grid Variants

The Grid component supports multiple column layouts that adapt responsively across breakpoints.

variant="2up"

variant="3up"

variant="4up"

<script lang="ts">
  import { Grid, Surface, Text } from 'kumo-svelte';
</script>

<div class="flex flex-col gap-8">
  <div>
    <p class="mb-2 text-kumo-subtle">variant="2up"</p>
    <Grid variant="2up" gap="sm">
      <Grid.Item>
        <Surface class="rounded-lg p-4 text-center">
          <Text>1</Text>
        </Surface>
      </Grid.Item>
      <Grid.Item>
        <Surface class="rounded-lg p-4 text-center">
          <Text>2</Text>
        </Surface>
      </Grid.Item>
    </Grid>
  </div>

  <div>
    <p class="mb-2 text-kumo-subtle">variant="3up"</p>
    <Grid variant="3up" gap="sm">
      <Grid.Item>
        <Surface class="rounded-lg p-4 text-center">
          <Text>1</Text>
        </Surface>
      </Grid.Item>
      <Grid.Item>
        <Surface class="rounded-lg p-4 text-center">
          <Text>2</Text>
        </Surface>
      </Grid.Item>
      <Grid.Item>
        <Surface class="rounded-lg p-4 text-center">
          <Text>3</Text>
        </Surface>
      </Grid.Item>
    </Grid>
  </div>

  <div>
    <p class="mb-2 text-kumo-subtle">variant="4up"</p>
    <Grid variant="4up" gap="sm">
      <Grid.Item>
        <Surface class="rounded-lg p-4 text-center">
          <Text>1</Text>
        </Surface>
      </Grid.Item>
      <Grid.Item>
        <Surface class="rounded-lg p-4 text-center">
          <Text>2</Text>
        </Surface>
      </Grid.Item>
      <Grid.Item>
        <Surface class="rounded-lg p-4 text-center">
          <Text>3</Text>
        </Surface>
      </Grid.Item>
      <Grid.Item>
        <Surface class="rounded-lg p-4 text-center">
          <Text>4</Text>
        </Surface>
      </Grid.Item>
    </Grid>
  </div>
</div>

Asymmetric Layouts

Use asymmetric variants for sidebar/main content layouts.

variant="2-1" (66% / 33%)

Main Content

Two-thirds width

Sidebar

One-third width

variant="1-2" (33% / 66%)

Sidebar

One-third width

Main Content

Two-thirds width

<script lang="ts">
  import { Grid, Surface, Text } from 'kumo-svelte';
</script>

<div class="flex flex-col gap-8">
  <div>
    <p class="mb-2 text-kumo-subtle">variant="2-1" (66% / 33%)</p>
    <Grid variant="2-1" gap="sm">
      <Grid.Item>
        <Surface class="rounded-lg p-4">
          <Text bold>Main Content</Text>
          <div class="mt-1">
            <Text variant="secondary">Two-thirds width</Text>
          </div>
        </Surface>
      </Grid.Item>
      <Grid.Item>
        <Surface class="rounded-lg p-4">
          <Text bold>Sidebar</Text>
          <div class="mt-1">
            <Text variant="secondary">One-third width</Text>
          </div>
        </Surface>
      </Grid.Item>
    </Grid>
  </div>

  <div>
    <p class="mb-2 text-kumo-subtle">variant="1-2" (33% / 66%)</p>
    <Grid variant="1-2" gap="sm">
      <Grid.Item>
        <Surface class="rounded-lg p-4">
          <Text bold>Sidebar</Text>
          <div class="mt-1">
            <Text variant="secondary">One-third width</Text>
          </div>
        </Surface>
      </Grid.Item>
      <Grid.Item>
        <Surface class="rounded-lg p-4">
          <Text bold>Main Content</Text>
          <div class="mt-1">
            <Text variant="secondary">Two-thirds width</Text>
          </div>
        </Surface>
      </Grid.Item>
    </Grid>
  </div>
</div>

Gap Sizes

Control the spacing between grid items with the gap prop.

gap="none"

gap="sm"

gap="base" (default, responsive)

gap="lg"

<script lang="ts">
  import { Grid, Surface, Text } from 'kumo-svelte';
</script>

<div class="flex flex-col gap-8">
  <div>
    <p class="mb-2 text-kumo-subtle">gap="none"</p>
    <Grid variant="side-by-side" gap="none">
      <Grid.Item>
        <Surface class="rounded-lg p-4 text-center">
          <Text>1</Text>
        </Surface>
      </Grid.Item>
      <Grid.Item>
        <Surface class="rounded-lg p-4 text-center">
          <Text>2</Text>
        </Surface>
      </Grid.Item>
    </Grid>
  </div>

  <div>
    <p class="mb-2 text-kumo-subtle">gap="sm"</p>
    <Grid variant="side-by-side" gap="sm">
      <Grid.Item>
        <Surface class="rounded-lg p-4 text-center">
          <Text>1</Text>
        </Surface>
      </Grid.Item>
      <Grid.Item>
        <Surface class="rounded-lg p-4 text-center">
          <Text>2</Text>
        </Surface>
      </Grid.Item>
    </Grid>
  </div>

  <div>
    <p class="mb-2 text-kumo-subtle">gap="base" (default, responsive)</p>
    <Grid variant="side-by-side" gap="base">
      <Grid.Item>
        <Surface class="rounded-lg p-4 text-center">
          <Text>1</Text>
        </Surface>
      </Grid.Item>
      <Grid.Item>
        <Surface class="rounded-lg p-4 text-center">
          <Text>2</Text>
        </Surface>
      </Grid.Item>
    </Grid>
  </div>

  <div>
    <p class="mb-2 text-kumo-subtle">gap="lg"</p>
    <Grid variant="side-by-side" gap="lg">
      <Grid.Item>
        <Surface class="rounded-lg p-4 text-center">
          <Text>1</Text>
        </Surface>
      </Grid.Item>
      <Grid.Item>
        <Surface class="rounded-lg p-4 text-center">
          <Text>2</Text>
        </Surface>
      </Grid.Item>
    </Grid>
  </div>
</div>

Mobile Dividers

Add dividers between items on mobile with the mobileDivider prop (only works with the 4up variant).

Item 1

Has divider on mobile

Item 2

Has divider on mobile

Item 3

Has divider on mobile

Item 4

Has divider on mobile

<script lang="ts">
  import { Grid, Surface, Text } from 'kumo-svelte';
</script>

<Grid variant="4up" gap="base" mobileDivider>
  {#each [1, 2, 3, 4] as item}
    <Grid.Item>
      <Surface class="rounded-lg p-4">
        <Text bold>Item {item}</Text>
        <div class="mt-1"><Text variant="secondary">Has divider on mobile</Text></div>
      </Surface>
    </Grid.Item>
  {/each}
</Grid>

All Variants

Reference for all available grid variants:

Variant	Description
`2up`	1 column mobile, 2 columns medium+
`side-by-side`	Always 2 columns
`2-1`	66%/33% split on medium+
`1-2`	33%/66% split on medium+
`1-3up`	1 column mobile, 3 columns large+
`3up`	1 mobile, 2 medium, 3 large
`4up`	Progressive: 1 → 2 → 3 → 4 columns
`6up`	2 mobile, up to 6 on XL
`1-2-4up`	1 mobile, 2 medium, 4 large

API Reference

Prop	Type	Default	Description
children	`Snippet`	-	Grid items to render.
class	`string`	-	Additional classes merged onto the root element.
mobileDivider	`boolean`	-	Show dividers between grid items on mobile. Only applies with the 4up variant.
gap	`'none' \| 'sm' \| 'base' \| 'lg'`	`"base"`	Gap size between grid items.
variant	`'2up' \| 'side-by-side' \| '2-1' \| '1-2' \| '1-3up' \| '3up' \| '4up' \| '6up' \| '1-2-4up'`	-	Responsive column layout variant.

Grid.Item

Grid.Item is a wrapper component for grid children. It accepts standard div props including class and children.