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.

Install:

# NPM
$ 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">
    <li>01</li>
    <li>02</li>
    <li>03</li>
    <li>04</li>
    <li>05</li>
    ...
</ul>

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
    
})