Toggle Sidebar B
header.lightDarkMode D

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.

1
2
3
4
5

Custom filler slot

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

1
Item 1
2
Item 2
3
Item 3
4
Item 4
5
Item 5
6
Item 6
7
Item 7
8
Item 8
9
Item 9
10
Item 10

Rounded

The rounded prop applies consistent corners with overflow hidden.

rounded="lg"
1
2
3
4
5
rounded="xl"
1
2
3
4
5
rounded="2xl"
1
2
3
4
5

Non-square items

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

1

Card item 1

Flexible height, not square.

2

Card item 2

Flexible height, not square.

3

Card item 3

Flexible height, not square.

4

Card item 4

Flexible height, not square.

5

Card item 5

Flexible height, not square.

Fixed columns

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

1
2
3
4
5

API Reference

Props, events, and slots for each sub-component.

GridFill

Props

PropTypeDefaultDescription
countnumber—Number of items rendered in the default slot.
colsnumber2Base column count below the responsive breakpoint.
breakpoint"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl""sm"Breakpoint where auto-fit takes over.
minColWidthstring | 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.
fillerClassstring"bg-pattern-diagonal"Class applied to each filler cell.

Slots

SlotDescription
defaultGrid items.
fillerCustom filler cell. Receives { index }.
FormHover Card