AutoGrid

Auto-fit/auto-fill responsive grid primitive for card-style listings, switching column density by minimum track width.

Shared

Defaults

Min 11rem

Min 13rem

Min 14rem

Min 15rem

Min 16rem

Min 18rem

Gap sm

Gap md

Gap split

Fill

Source

import { AutoGrid, Card } from "@zudo-composer/ui";

<AutoGrid>
  <Card title="First item">A short description.</Card>
  <Card title="Second item">Another short description.</Card>
</AutoGrid>

Live CSS

Injected into the previews above. AutoGrid

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */