Responsive Flexible Grid Layout JavaScript Library – Awesome Grid

Category: Javascript , Layout | June 18, 2017
Views Total:470 views
Official Page:Go to website
Last Update:June 18, 2017


Responsive Flexible Grid Layout JavaScript Library – Awesome Grid


This is the pure JavaScript version of the jquery Awesome Grid plugin which helps you dynamically render a responsive, customizable, mobile-friendly, Pinterest-like grid layout from a regular HTML list.


$ npm install awesome-grid
# Bower
$ bower install awesome-grid

Basic usage:

Insert the minified version of the Awesome Grid into the html page.

<script src="awesome-grid.min.js"></script>

The basic HTML structure for the awesome grid.

<ul class="grid">

Create a new AwesomeGrid instance and specify the number of columns to render.

new AwesomeGrid('ul.grid').grid(5);

Config the awesome grid via ‘data’ attributes:

  • data-ag-gutters-column: adding spacing between columns
  • data-ag-gutters-row: adding spacing between rows
  • data-ag-gutters: adding spacing between rows and columns
  • data-ag-x=”3″: the list item will stretch/widen itself thrice than normal (one).

All default configuration options.

new AwesomeGrid('ul.grid', {
    // or 'self'
    context: 'window', 
    // custom breakpoints
    mobile: 420,
    tablet: 768,
    desktop: 992,
    tv: 1200

You Might Be Interested In:

Leave a Reply