Introduction

gridwave is an extremely lightweight and easy-to-use frontend library to filter, sort, and animate ✨ grids!

The example above shows gridwave in action with 100 elements to filter and sort.

Minimal Example

gridwave requires exactly two things:

• A container element that contains all the child elements that make up the grid

• All the child elements directly inside the container element.

gridwave takes care of the rest:

Copy<script src="https://www.unpkg.com/gridwave@1.0.x"></script>

<div id="grid">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
</div>

<script>
    const grid = new GridWave("#grid");
    grid.init({
        columns: "dynamic",
        columnMinWidth: 200,
        gap: 16,
    });
</script>

This gives us a basic grid, where every column is at least 200 pixels wide:

Filters

With a gridwave grid in place, we can now interact with our grid to filter, sort, and animate it!

Copy<script src="https://www.unpkg.com/gridwave@1.0.x"></script>

<!-- Buttons to filter the grid, the CSS selector to
filter is stored in the `data-filter` attribute -->
<button data-filter="">All</button>
<button data-filter=".category1">Category 1</button>
<button data-filter=".category2">Category 2</button>
<button data-filter=".category3">Category 3</button>

<div id="grid">
    <!-- The category for each item is stored as class -->
    <div class="grid-item category1">Item 1</div>
    <div class="grid-item category2">Item 2</div>
    <div class="grid-item category1">Item 3</div>
    <div class="grid-item category3">Item 4</div>
    <div class="grid-item category2">Item 5</div>
    <div class="grid-item category3">Item 6</div>
</div>

<script>
    const grid = new GridWave("#grid");
    grid.init({
        columns: "dynamic",
        columnMinWidth: 200,
        gap: 16,
    });

    // Add an event listener for the click event...
    document.querySelectorAll("button").forEach((button) => {
        button.addEventListener("click", () => {
            // ...and call the `filter` method to filter
            // by the CSS selector stored in `data-filter`
            grid.filter(button.dataset.filter);
        });
    });
</script>

And gridwave can do more!