Simple jQuery Plugin For Matrix Style Grid Layout - Gridly.js

Simple jQuery Plugin For Matrix Style Grid Layout - Gridly.js
File Size: 6.69 KB
Views Total: 4882
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Gridly.js is a simple jQuery plugin used to create a matrix style grid layout that can be customized via data-* attributes in the div elements.

How to use it:

1. Create the html structure for your grid layout.

<div class='gridly' id='mygrid' data-rows='4' data-cols='6' data-width='1920' data-height='1080' data-orientation='horizontal'> 
<!-- cell in row 1, col 1, width of 1x and height of 1x -->
<div class='cell' data-col='1' data-row='1' data-width='1' data-height='1'> your content </div>

<!-- cell in row 1, cols 2-3, width of 2x and heigh of 1 -->
<div class='cell' data-col='2' data-row='1' data-width='2' data-height='1'> your content </div>

<!-- a 2x2 cell in row 1, col 4 -->
<div class='cell' data-col='4' data-row='1' data-width='2' data-height='2'> your content </div>

3. Load the jQuery library and jQuery gridly.js script at the bottom of your page.

<script src=""></script>
<script src='../src/gridly.js'></script>

4. Call the plugin with one line of javascript and you're done.


5. Style the grids via CSS as you prefer.

This awesome jQuery plugin is developed by redronin. For more Advanced Usages, please check the demo page or visit the official website.