Item 1

First grid item

Item 2

Second grid item

<script lang="ts">
  import { Grid, GridItem } from "kumo-svelte/components/grid";
  import { Surface } from "kumo-svelte/components/surface";
  import { Text } from "kumo-svelte/components/text";
</script>

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

Import

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

Usage

<script lang="ts">
  import { Grid, GridItem } from "kumo-svelte/components/grid";
</script>

<Grid variant="2up" gap="base">
  <GridItem>Item 1</GridItem>
  <GridItem>Item 2</GridItem>
</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, GridItem } from "kumo-svelte/components/grid";
  import { Surface } from "kumo-svelte/components/surface";
  import { Text } from "kumo-svelte/components/text";
  const variants = [
    { name: "2up", count: 2 },
    { name: "3up", count: 3 },
    { name: "4up", count: 4 },
  ] as const;
</script>

<div class="flex flex-col gap-8">
  {#each variants as variant}
    <div>
      <p class="mb-2 text-kumo-subtle">variant="{variant.name}"</p>
      <Grid variant={variant.name} gap="sm">
        {#each Array.from({ length: variant.count }, (_, index) => index + 1) as item}
          <GridItem>
            <Surface class="rounded-lg p-4 text-center">
              <Text>{item}</Text>
            </Surface>
          </GridItem>
        {/each}
      </Grid>
    </div>
  {/each}
</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, GridItem } from "kumo-svelte/components/grid";
  import { Surface } from "kumo-svelte/components/surface";
  import { Text } from "kumo-svelte/components/text";
</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">
      <GridItem>
        <Surface class="rounded-lg p-4">
          <Text bold>Main Content</Text>
          <div class="mt-1"><Text variant="secondary">Two-thirds width</Text></div>
        </Surface>
      </GridItem>
      <GridItem>
        <Surface class="rounded-lg p-4">
          <Text bold>Sidebar</Text>
          <div class="mt-1"><Text variant="secondary">One-third width</Text></div>
        </Surface>
      </GridItem>
    </Grid>
  </div>
  <div>
    <p class="mb-2 text-kumo-subtle">variant="1-2" (33% / 66%)</p>
    <Grid variant="1-2" gap="sm">
      <GridItem>
        <Surface class="rounded-lg p-4">
          <Text bold>Sidebar</Text>
          <div class="mt-1"><Text variant="secondary">One-third width</Text></div>
        </Surface>
      </GridItem>
      <GridItem>
        <Surface class="rounded-lg p-4">
          <Text bold>Main Content</Text>
          <div class="mt-1"><Text variant="secondary">Two-thirds width</Text></div>
        </Surface>
      </GridItem>
    </Grid>
  </div>
</div>

Gap Sizes

Control the spacing between grid items with the gap prop.

gap="none"

gap="sm"

gap="base"

gap="lg"

<script lang="ts">
  import { Grid, GridItem } from "kumo-svelte/components/grid";
  import { Surface } from "kumo-svelte/components/surface";
  import { Text } from "kumo-svelte/components/text";
  const gaps = ["none", "sm", "base", "lg"] as const;
</script>

<div class="flex flex-col gap-8">
  {#each gaps as gap}
    <div>
      <p class="mb-2 text-kumo-subtle">gap="{gap}"</p>
      <Grid variant="side-by-side" {gap}>
        <GridItem>
          <Surface class="rounded-lg p-4 text-center"><Text>1</Text></Surface>
        </GridItem>
        <GridItem>
          <Surface class="rounded-lg p-4 text-center"><Text>2</Text></Surface>
        </GridItem>
      </Grid>
    </div>
  {/each}
</div>

Mobile Dividers

Add dividers between items on mobile with the mobileDivider prop. Mobile dividers only apply to 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, GridItem } from "kumo-svelte/components/grid";
  import { Surface } from "kumo-svelte/components/surface";
  import { Text } from "kumo-svelte/components/text";
</script>

<Grid variant="4up" gap="base" mobileDivider>
  {#each [1, 2, 3, 4] as item}
    <GridItem>
      <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>
    </GridItem>
  {/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

Grid

Prop	Type	Default
children	`Snippet`	—
class	`string`	—
gap	`KumoGridGap`	`KUMO_GRID_DEFAULT_VARIANTS.gap`
mobileDivider	`boolean`	`false`
variant	`KumoGridVariant`	—

GridItem

Prop	Type	Default
children	`Snippet`	—
class	`string`	—