Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE Initial commit Jun 10, 2014
README.md Remove comparison section Jul 27, 2014
cement.js Fix padding issue Jul 27, 2014
cement.min.js Fix padding issue Jul 27, 2014
cementjs.png Update README Jul 27, 2014



CementJS is a jQuery plugin, which will allow you to quickly present a list of elements under a grid layout. It is a Masonry alternative.

Unlike Masonry, CementJS create a real grid : every row has the same height, and every column has the same width. This doesn't mean your elements can't span over several columns and/or rows.


  1. Download cement.min.js (or its unminified version)
  2. Include jQuery : <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  3. Include CementJS : <script src="cement.min.js"></script>

Basic usage

For a basic usage, you need to wrap your elements in a container :

<section id="container">

Then, initialize CementJS :


That's all. CementJS will automatically calculate your elements position, trying to take as less space as possible.

Span over columns and rows

If you want an element to span over 2 columns, use this HTML :

<article data-w="2">...</article>

In the same manner, you can span over rows (or combine both) :

<article data-w="2" data-h="3">...</article>

Both data attributes are initialized to 1 if they're not specified


CementJS provides a few options, to be more flexible :

Option Default value Description
columns 4 Number of columns in your grid.
columnMinWidth 0 Minimum width the columns can have. Under this width, a column is removed.
Set to 0 to keep the same number of columns, whatever their width.
brickSelector > * Target elements inside the container.
horizontalGutter 5 Size of horizontal gutters.
verticalGutter 5 Size of vertical gutters.
transitionDuration .2s Transition duration.



Buy me a coffee !