Grid Fill

Responsive grid that auto-fills empty cells with a placeholder pattern, so the last row always looks complete. Use for galleries, masonry-style lists, or stat tiles.

Default

Pass count and let GridFill add fillers to complete the last row.

Usage

Import the parts you need from the component's folder.

import { GridFill } from "@/components/ui/grid-fill";

Custom filler slot

Use the #filler slot to render your own placeholder. Receives { index }.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

and many more

Rounded

The rounded prop applies consistent corners with overflow hidden.

rounded="lg"

rounded="xl"

rounded="2xl"

Non-square items

GridFill does not force aspect-square; items and fillers can be any height.

Card item 1

Flexible height, not square.

Card item 2

Flexible height, not square.

Card item 3

Flexible height, not square.

Card item 4

Flexible height, not square.

Card item 5

Flexible height, not square.

Fixed columns

Set :min-col-width="false" to disable auto-fit and lock the column count.

API Reference

GridFill

Prop	Type	Default	Description
`count`	`number`	—	Number of items rendered in the default slot.
`cols`	`number`	`2`	Base column count below the responsive breakpoint.
`breakpoint`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl"`	`"sm"`	Breakpoint where auto-fit takes over.
`minColWidth`	`string \| false`	`"180px"`	Min column width for auto-fit. Set false to disable auto-fit.
`rounded`	`"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl"`	—	Rounded corners + overflow hidden.
`fillerClass`	`string`	`"bg-pattern-diagonal"`	Class applied to each filler cell.

Slot	Description
`default`	Grid items.
`filler`	Custom filler cell. Receives { index }.

Frame Lane Board