A lightweight masonry-like, responsive grid for AngularJS.
8 people use it
Author: 5ee5cd89f7ed6895e80400156211fdbb? akoenig


A lightweight masonry-like, responsive grid for AngularJS.

Website / Demo


  1. bower install --save angular-deckgrid
  2. Include angular-deckgrid in your HTML.

  3. Inject the angular-deckgrid module in your application.


The directive does not depend on the visual representation. All the responsiveness and beauty comes from your CSS file. But wait a second. Let's take a look how the directive will be integrated. An example:

Okay, we assume that you have a collection of photos and you want to display these in a deckgrid, where every photo provides a name and a source URL. The internal structure of this collection is completely up to you. You can use any collection structure you want. No restrictions at all.

The attributes

  • source: The collection of objects that should be passed into your deckgrid (by reference. Object change will be reflected in the grid).
  • cardTemplate: The URL to the template which represents one single card in the deckgrid.

A complete example: Photogrid

Okay, you have your controller ready and your template is fine so far. The only thing what is missing is a flexible grid. Let's start!

Your possible data structure

Your possible card template (it is completely up to you)

That's all! Ehm, no. If you run your application now you will notice that there is only one column. What is missing? Well, we have to define the configuration for the visual representation. And what is the best place for something like this? Yes, for sure! Your CSS file(s).

The grid configuration

The grid items will be distributed by your configured CSS selectors. An example:

The responsiveness

In order to support different grid representations for different screen sizes, you can define the respective media queries like:

This will define that for a device with a maximum screen width of 480px, only one column should be used. As I mentioned before. It is completely up to you how to define the column sizes. Go crazy.


Version 0.1.1 (20131122)

  • [Feature] Added log message for the case when the CSS configuration is not available (#1)

Version 0.1.0 (20131121)

  • Initial release. Functionality for rendering grids.



Copyright 2013, André König (

comments powered by Disqus
This page was last updated almost 5 years ago.