Layout
Grid Fill
A grid fill component
Overview
The Grid Fill component lays out items in a grid and lets one or more cells grow to fill remaining space. Sizing modes control whether the first or last item expands, so product grids and dashboards stay aligned.
Key Business & UX Benefits
- Fills available space so grids look balanced on any viewport.
- Keeps one primary item (e.g. hero or featured) flexible while others stay fixed.
- Reduces custom CSS for common fill patterns.
- Works for product grids, dashboards, and card layouts.
Pro-Tip from Larry: Use greedy-first or greedy-last so the hero or featured item gets the extra space.
Usage
GridFill Fixed
<GridFill />
GridFill Greedy First
<GridFill sizing="greedy-first" />
GridFill Greedy Last
<GridFill sizing="greedy-last" />
Feature List
- Fixed grid with equal cell sizing
- Greedy-first: first item expands to fill remaining space
- Greedy-last: last item expands to fill remaining space
- Configurable columns and gap for responsive layouts
API Reference
| Prop | Default | Type |
|---|---|---|
sizing | fixed | "fixed" | "greedy-first" | "greedy-last" |
cols | number | |
gapX | number | |
gapY | number |
| Slot | Type |
|---|---|
default | {} |