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

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>
...
</div>

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src='../src/gridly.js'></script>

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

<script>
$(function(){
$('#mygrid').gridly();
})
</script>

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.