Responsive Flexible Grid Layout JavaScript Library – Awesome Grid

Category: Javascript , Layout | June 18, 2017
Author: kamalkhan
Views Total: 1,756
Official Page: Go to website
Last Update: June 18, 2017
License: MIT

Preview:

Responsive Flexible Grid Layout JavaScript Library – Awesome Grid

Description:

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

You Might Be Interested In:


Leave a Reply