Svelte Masonry

Overview

svelte-masonry is an implementation of Masonry, a layout library, that is based on an article by Ana Tudor on CSS Tricks. It is a lightweight and efficient solution that does not require any external dependencies. The library is wrapped in the Svelte framework, making it a reusable component. It provides a REPL demo and is compatible with Sveltekit and Svelte Package.

Features

• No external dependencies
• Lightweight
• Compatible with Sveltekit and Svelte Package
• Reusable component
• Provides a REPL demo
• Allows manual refreshing of grid calculations
• Offers customizable options

Installation

To install svelte-masonry, you can use either npm or yarn:

Using npm:

npm install svelte-masonry

Using yarn:

yarn add svelte-masonry

Then, import the masonry component into your project. The method mentioned in the article is used:

import Masonry from 'svelte-masonry';

Now, you can use the Masonry component as a wrapper around your repeating {#each} blocks.

If you have any implementation questions, you can reach out on Twitter (@yawnxyz) or create an issue.

Summary

svelte-masonry is a lightweight and efficient implementation of Masonry layout in the Svelte framework. It does not rely on external dependencies and offers a range of features and options for customization. The library can be easily installed and integrated into your Svelte project.