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.
cement.min.js(or its unminified version)
- Include jQuery :
- Include CementJS :
For a basic usage, you need to wrap your elements in a container :
<section id="container"> <article>...</article> <article>...</article> <article>...</article> </section>
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 :
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 :
||Number of columns in your grid.|
||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.
||Target elements inside the container.|
||Size of horizontal gutters.|
||Size of vertical gutters.|