Grid Fill

Responsive grid that auto-detects column count and fills remaining cells in the last row with a diagonal pattern. Supports configurable breakpoints, custom filler slots, and flexible column sizing.

Basic

Default configuration: cols=2, min-col-width="180px", breakpoint="sm". The last row is filled with diagonal pattern.

1
Item 1
2
Item 2
3
Item 3
4
Item 4
5
Item 5
6
Item 6
7
Item 7

Custom Filler Slot

Use the #filler slot to customize filler content. The first filler shows "and many more", the rest use the default pattern.

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

Breakpoints

The breakpoint prop controls when auto-fit kicks in. Below that breakpoint, the grid uses fixed cols.

1
2
3
4
5
6
7
8

Playground

Adjust all props interactively to see how the grid responds.

<GridFill :count="15" :cols="2" min-col-width="180px" breakpoint="sm" />
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
11
Item 11
12
Item 12
13
Item 13
14
Item 14
15
Item 15

Rounded

Use the rounded prop to apply consistent rounded corners. Accepts: sm, md, lg, xl, 2xl, 3xl.

rounded-lg
1
Item 1
2
Item 2
3
Item 3
4
Item 4
5
Item 5
rounded-xl
1
Item 1
2
Item 2
3
Item 3
4
Item 4
5
Item 5
rounded-2xl
1
Item 1
2
Item 2
3
Item 3
4
Item 4
5
Item 5
no rounding (default)
1
Item 1
2
Item 2
3
Item 3
4
Item 4
5
Item 5

Non-square Items

GridFill doesn't enforce aspect-square. Items and fillers can have any dimensions.

1

Card item 1

Non-square layout with flexible height

2

Card item 2

Non-square layout with flexible height

3

Card item 3

Non-square layout with flexible height

4

Card item 4

Non-square layout with flexible height

5

Card item 5

Non-square layout with flexible height

Fixed Columns

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

1
Item 1
2
Item 2
3
Item 3
4
Item 4
5
Item 5