Skip to content


Folders and files

Last commit message
Last commit date

Latest commit



16 Commits

Repository files navigation


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="//"></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 !