Salvattore

![Gitter](https://badges.gitter.im/Join Chat.svg)

Salvattore is a library agnostic JS script that will help you organize your HTML elements according to the number of columns you specify, like jQuery Masonry.

Features

No requirements: Salvattore is a standalone script, it will work right away after being referenced in your HTML page.
Extremely lightweight: about 2.7KB (minified and gzipped.)
CSS-driven configuration: the number of columns is defined in CSS and the styling is left to the user.
Media queries ready: the same parameters can be used inside media queries for better results on different devices.
Wide browser support: modern browsers and IE9+

Upcoming

Balanced columns: to keep all columns about the same height.

To find out more and see it in action, please visit our website.

You can also follow us on Twitter.

Methods

Methods can be called on the globally exposed salvattore object for advanced usage.

var grid = document.querySelector('#grid');
var item = document.createElement('article');

salvattore.appendElements(grid, [item]);
item.outerHTML = 'I’ve been appended!';

Method	Argument	Description
appendElements	grid : DOM object, elements: Array of DOM objects	Adds elements to the end of a grid.
prependElements	grid : DOM object, elements: Array of DOM objects	Adds elements to a beginning of a grid. Adds multiple elements one by one before each other, so note the order.
registerGrid	grid : DOM object	Adds a new grid to salvattore. Which is initialized automatically then.
recreateColumns	grid : DOM object	Removes all the columns from the grid, and adds them again.
rescanMediaQueries		Checks stylesheets and selectors for media queries again. Recreates the columns for all grids afterwards.

How to contribute

We use Gulp to add polyfills and minify the script in the dist/ folder. To make changes to the script itself, please edit src/salvattore.js and send us a pull request.

Share feedback & ideas

You can even contribute by using Salvattore and sharing bugs, ideas or solutions on the Issues page. Protip: if you're posting a bug please share all the relevant data and ideally a live URL so that we can debug (yeah we do that!)

Project Name	Stars	Repos Using This	Packages Using This	Most Recent Commit	Total Releases	Latest Release	Open Issues	License	Language
Masonry	15,477	1,999	206	2 years ago	13	July 04, 2018	50		HTML
:love_hotel: Cascading grid layout plugin
Bricks.js	4,461	138	34	4 years ago	13	March 22, 2017	12		JavaScript
A blazing fast masonry layout generator for fixed width elements.
Shuffle	2,274	95	13	6 months ago	27	July 07, 2022	16	mit	JavaScript
Categorize, sort, and filter a responsive grid of items
Salvattore	2,218	34	5	6 years ago	2	November 05, 2015	119	mit	JavaScript
A jQuery Masonry alternative with CSS-driven configuration.
Freewall	1,845	58		3 years ago		April 26, 2016	114	mit	HTML
Freewall is a cross-browser and responsive jQuery plugin to help you create grid, image and masonry layouts for desktop, mobile, and tablet...
Egjs Infinitegrid	1,675	5	13	2 months ago	135	August 04, 2023	21	mit	TypeScript
A module used to arrange card elements including content infinitely on a grid layout.
Angular Deckgrid	1,118	7	3	5 years ago	1	February 14, 2017	58	mit	JavaScript
A lightweight masonry-like grid for AngularJS.
Mauerwerk	802	7		5 years ago	8	September 11, 2018	10	mit	JavaScript
⚒ A react-spring driven masonry-like grid with enter/exit and shared element transitions
Masonic	419	1	4	a year ago	94	September 16, 2022	21	mit	TypeScript
🧱 High-performance masonry layouts for React
Angulargrid	280	32	2	2 years ago	5	February 08, 2017	65	mit	JavaScript
Pinterest like responsive masonry grid system for angular