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 12
Item 23
Item 34
Item 45
Item 56
Item 67
Item 78
Item 89
Item 910
Item 10Rounded
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