Grid

A CSS Grid container component with props for columns, rows, and gap. Use with GridItem for advanced spanning and positioning.

Anatomy

<script>
  import { Grid, GridItem } from "@saas-ui/svelte/layout/grid";
</script>

<Grid columns={3} gap={4}>
  <GridItem>Item 1</GridItem>
  <GridItem colSpan={2}>Spans 2 columns</GridItem>
  <GridItem>Item 3</GridItem>
</Grid>

Examples

Basic Accessibility

Basic grid layout with configurable number of equal-width columns and gap.

<Grid>
	<DecorativeBox class="h-20" />
	<DecorativeBox class="h-20" />
	<DecorativeBox class="h-20" />
</Grid>

Custom Gap Accessibility

Use gapX and gapY to set different horizontal and vertical gaps between grid items.

<Grid columns={3} gapX={8} gapY={2}>
	<DecorativeBox class="h-20" />
	<DecorativeBox class="h-20" />
	<DecorativeBox class="h-20" />
	<DecorativeBox class="h-20" />
	<DecorativeBox class="h-20" />
	<DecorativeBox class="h-20" />
</Grid>

Spanning Accessibility

Use GridItem with colSpan and rowSpan props to create items that span multiple columns or rows.

<Grid rows={2} columns={5} gap={4} class="h-[200px]">
	<GridItem rowSpan={2} colSpan={1}>
		<DecorativeBox class="h-full w-full">rowSpan=2</DecorativeBox>
	</GridItem>
	<GridItem colSpan={2}>
		<DecorativeBox class="h-full w-full">colSpan=2</DecorativeBox>
	</GridItem>
	<GridItem colSpan={2}>
		<DecorativeBox class="h-full w-full">colSpan=2</DecorativeBox>
	</GridItem>
	<GridItem colSpan={4}>
		<DecorativeBox class="h-full w-full">colSpan=4</DecorativeBox>
	</GridItem>
</Grid>

Props

Prop	Type	Default	Description
`columns`	`number`	-	The number of columns in the grid template.
`rows`	`number`	-	The number of rows in the grid template.
`gap`	`number`	`4`	The gap between grid items.
`gapX`	`number`	-	The column gap between grid items.
`gapY`	`number`	-	The row gap between grid items.
`children`	`any`	-	The content to be rendered inside the component.
`class`	`text`	-	Additional CSS classes to apply.