00%
images loaded

Portfolio structure

The portfolio grid

<div id="project-grid" class="masonry-grid"> // The portfolio grid
	<a href="#" grid-item col-4> // The grid item - half size
		// Thumbnail and caption
	</a>
</div>

Set columns

The columns are based on your grid item. A grid item respects the grid values, like col-4 for a half-sized item and col-2 for a fourth size of an item. You can also use col-8 for full size items.

<div id="project-grid" class="masonry-grid"> // The portfolio grid
	<a href="#" grid-item col-4> // The grid item - half size
		// Thumbnail and caption
	</a>
</div>   

Portfolio filters

To use filterds, look for the nav element that has the ID "filters". It contains a list of filters, that each hold a link including the attribute "data-filter", which corresponds the class of the filterable item.

To make it work, add a class to your grid item and add this very class to the data-filter attribute of your filter item.