Grid

Installation

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

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

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

Use asymmetric variants for sidebar/main content layouts.

Control the spacing between grid items with the gap prop.

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

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

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 is a wrapper component for grid children. It accepts standard div props including class and children.