Grid List — cinder playground

Overview

GridList lays out homogeneous card-like list items in responsive auto-fit columns.

Usage

GridList is a compound component. Import the parent and compose GridList.Item via the namespace API.

<script lang="ts">
  import { GridList } from '@lostgradient/cinder/grid-list';
</script>

<GridList minColumnWidth="14rem" aria-label="Projects">
  <GridList.Item>
    {#snippet title()}<strong>Phoenix</strong>{/snippet}
    {#snippet subtitle()}<span>Reactive runtime experiments.</span>{/snippet}
  </GridList.Item>
  <GridList.Item href="/projects/atlas">
    {#snippet title()}Atlas{/snippet}
  </GridList.Item>
</GridList>

The leaf remains importable individually for à-la-carte builds — see @lostgradient/cinder/grid-list-item.

Live preview

When to use

Use when

Presenting a homogenous collection of cards that should reflow into multiple columns.
Constraining tile minimum widths per breakpoint via the minColumnWidth prop.

Avoid when

Comparing rows of structured data — use table instead.
Stacking dense list rows vertically — use stacked-list-item instead.

Examples

Basic grid list

A responsive grid of items. Uses the GridList namespace API: GridList.Item composes inside the parent GridList.

Props

Props for grid-list
Name	Type	Default	Required	Bindable	Description
`minColumnWidth`	`text`				Minimum width of each grid cell, expressed as a CSS `<length>` value (e.g. `"16rem"`, `"240px"`, `"min(20rem, 100%)"`). Used as the first argument to `minmax()` inside a `repeat(auto-fill, ...)` track. Default: `"16rem"`. Empty string is treated as unset.
`children`	`snippet`		req		Items — typically `GridListItem` instances.