Layout
Grid Fill
A grid fill component
Loading playground
Overview
Grid Fill lays out items in a flex row and lets one cell grow to absorb the remaining space. Set the --cols CSS custom property (per breakpoint if needed) so the component knows how many columns to size against; --gap (or the explicit --gap-x and --gap-y) controls spacing. Pick the sizing mode by which item should claim the slack:
sizing | When to use |
|---|---|
'fixed' | Default. Every cell gets the same width based on --cols. |
'greedy-first' | First-row items expand via flex-grow with order reversal. Hard cap of 20 items. |
'greedy-last' | Last item expands. Useful when the trailing tile is a "view all" or summary. |
greedy-first is the special case: it flips flex order so the first row of items expands instead of the last, but the CSS hard-caps at 20 items. Beyond that, extra items fall outside the order chain and the visual layout breaks.
Key Business & UX Benefits
- Greedy sizing lets the hero or "view all" tile take visual priority without bespoke CSS for every grid variant.
- Three sizing modes cover the common merchandising patterns: even grid, feature-led, and summary-led, without flexbox math at the call site.
- One layout primitive replaces dozens of hand-rolled grids, so brand refreshes update spacing once instead of touching each section.
Pro-Tip from Larry: Use
greedy-first or greedy-last so the hero or featured item gets the extra space, instead of distributing whitespace evenly across cells.Usage
GridFill Greedy First
<GridFill sizing="greedy-first" />
GridFill Greedy Last
<GridFill sizing="greedy-last" />
Feature List
- Three sizing modes ('fixed', 'greedy-first', 'greedy-last') cover even grids, hero-led grids, and trailing summary tiles from one component
- Requires a `--cols` CSS custom property (per-breakpoint via utility classes) to drive the flex-basis math
- `gapX` and `gapY` numeric props bind to `--gap-x` and `--gap-y` CSS custom properties so consumers can also override with utility classes per breakpoint
- `--cols` and `--gap` custom-property layering lets templates set defaults on a parent and override per breakpoint without prop drilling
- Greedy modes use `flex-grow` to pull slack into the first or last cell; `greedy-first` flips `order` with a hard cap of 20 items
- Single layout primitive replaces hand-rolled grids, so brand refreshes update spacing in one place
API Reference
| Prop | Default | Type |
|---|---|---|
sizing | fixed | "fixed" | "greedy-first" | "greedy-last" |
cols | number | |
gapX | number | |
gapY | number |
| Slot | Type |
|---|---|
default | {} |