Grid

An adaptive grid layout with fixed or breakpoint-specific column counts.

Grid arranges arbitrary content into an adaptive CSS grid without requiring page-specific layout CSS. It is useful for dashboards, galleries, feature lists, and card collections.

Variants and behaviour

Use a fixed column count for a simple layout, or provide base, small, medium, and large breakpoints for responsive column changes. minColumnWidth enables content-led, auto-fitting grids.

Customization

Adjust gap, the column configuration, or minColumnWidth at the call site. Grid only owns arrangement; every child remains fully responsible for its own visual treatment.

Examples

Installation

Install Fractalsvelte, then import the block from the dedicated blocks entry point.

Install

pnpm add fractalsvelte

Import

<script lang="ts">
	import { Grid } from 'fractalsvelte/blocks';
</script>

Usage

<script lang="ts">
	import { Grid } from 'fractalsvelte/blocks';
</script>

<Grid columns={{ base: 1, md: 2, lg: 3 }}>
	<!-- grid items -->
</Grid>

Props

Prop	Type	Default	Description
`columns`	`number \| GridColumns`	`1`	Fixed or responsive column count.
`gap`	`number`	`16`	Gap between grid items, in pixels.
`minColumnWidth`	`string`	`-`	Minimum width for auto-fitting columns.

Source

Block source is published with the package and can be inspected here.

Grid.svelte

<script lang="ts">
	import type { Snippet } from 'svelte';
	type Columns = number | { base?: number; sm?: number; md?: number; lg?: number };
	interface Props { columns?: Columns; gap?: number; minColumnWidth?: string; children: Snippet; }
	let { columns = { base: 1, sm: 2, lg: 3 }, gap = 16, minColumnWidth, children }: Props = $props();
	let values = $derived(typeof columns === 'number' ? { base: columns } : columns);
</script>
<div class="block-grid" style={`--grid-base: ${values.base ?? 1}; --grid-sm: ${values.sm ?? values.base ?? 1}; --grid-md: ${values.md ?? values.sm ?? values.base ?? 1}; --grid-lg: ${values.lg ?? values.md ?? values.sm ?? values.base ?? 1}; --grid-gap: ${gap}px; ${minColumnWidth ? `--grid-min: ${minColumnWidth};` : ''}`}>{@render children()}</div>
<style lang="sass">
	.block-grid
		display: grid
		gap: var(--grid-gap)
		grid-template-columns: repeat(var(--grid-base), minmax(0, 1fr))
		grid-template-columns: repeat(var(--grid-base), minmax(var(--grid-min, 0), 1fr))
		transition: grid-template-columns 200ms ease, gap 200ms ease
	@media (min-width: 640px)
		.block-grid
			grid-template-columns: repeat(var(--grid-sm), minmax(var(--grid-min, 0), 1fr))
	@media (min-width: 960px)
		.block-grid
			grid-template-columns: repeat(var(--grid-md), minmax(var(--grid-min, 0), 1fr))
	@media (min-width: 1200px)
		.block-grid
			grid-template-columns: repeat(var(--grid-lg), minmax(var(--grid-min, 0), 1fr))
	@media (prefers-reduced-motion: reduce)
		.block-grid
			transition: none
</style>