GridWave documentation
GridWave is a small, dependency-free JavaScript library for arranging DOM elements in animated grids. It supports fixed or dynamic columns, filtering, sorting, responsive layouts, equal-height rows, and an experimental masonry mode.
GridWave is in early development. Review its current limitations before using it in production.
Start here
- Getting started — install GridWave and create a responsive grid.
- Layouts and responsive grids — choose a layout mode and configure breakpoints.
- Filtering and sorting — add interactive controls to a grid.
- Dynamic content and animation — update content, configuration, and transitions.
Reference
- Configuration — all supported options and accepted values.
- API — constructor and public method reference.
Project documentation
- Architecture — implementation model, DOM effects, and constraints.
- Contributing — repository workflow and change checklist.
Common use cases
GridWave is a good fit for browser interfaces that need:
- filterable portfolios, galleries, or catalog cards;
- sortable result grids;
- responsive columns without a framework dependency;
- animated rearrangement after filtering, sorting, or adding content; or
- a custom layout renderer built on GridWave's filtering and sorting pipeline.
GridWave directly controls inline positioning and dimensions on the container and its items. It is not a virtualized list, data-fetching layer, or CSS Grid wrapper.
Package
npm install gridwave
import GridWave from "gridwave";
GridWave is licensed under the MIT License.