Installation
npm install svelte-cairnUsage
The components in their simplest form look like this:
<script>
import Cairn from 'svelte-cairn';
</script>
<Cairn.Layout>
<Cairn.Item>Your content here</Cairn.Item>
</Cairn.Layout>Components
Cairn.Layout
The container component that manages the masonry layout. It automatically arranges child items into an optimal grid pattern based on their dimensions.
Cairn.Item
A wrapper component for individual grid items. Each piece of content in the masonry layout must be wrapped in a Cairn.Item component.
Examples
Here are some examples to help you get started:
Basic Example
Gap
Set the gap between items in the Cairn.Layout component using the gap prop.
<Cairn.Layout gap={10}>
...
</Cairn.Layout>
Todo: support different gaps for columns and rows
<Cairn.Layout gap={{column: 10, row: 20}}>
...
</Cairn.Layout>Gap Interactive Example
Gap: 10
Responsive Layout
The Layout component provides an intuitive responsive design system based on its container width using ResizeObserver. Similar to mobile-first breakpoints in CSS, you can define how the layout adapts as it grows.
How It Works
The Layout component uses two types of props to control its behavior:
- Default props that apply at all screen sizes
- Breakpoint-specific props that override the defaults at specified screen widths
Breakpoints Configuration
The breakpoints prop accepts an object where:
- Keys are numbers representing minimum container widths (in pixels)
- Values are objects containing props to apply at that breakpoint
For example, this configuration starts with 1 column on mobile and progressively increases columns as the screen width grows:
<Cairn.Layout
columns={1}
breakpoints={{
200: { columns: 2 },
300: { columns: 3 },
400: { columns: 4 },
500: { columns: 5 },
600: { columns: 6 },
700: { columns: 7 },
800: { columns: 8 }
}}
> ... </Cairn.Layout>