Gridly.js
A simple jQuery plugin for arranging div elements into a grid.
Create a simple grid layout that is either
- fixed width (generally 1920x1080 for use on a HDTV layout)
- relative (scales in size, best suited for desktop)
demo pages
usage
-
Include
gridly.jsin your page. Ensure you havejqueryloaded before as well. -
Create a html structure like:
<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> - Initialize your grid with:
$('#mygrid').gridly(); options
| option | default | notes |
|---|---|---|
| width | 1920 | Width of grid in px |
| height | 1080 | Height of grid in px |
| orientation | horizontal | 'horizontal' or 'vertical' |
| rows | 4 | number of rows in the grid |
| cols | 6 | number of columns in the grid |
| fixed | true | true|false - if true, the grid is a fixed size in px. If false, the grid will fix in the browser window and will resize as the window resizes, but keeping it's original ratio. |
| gutter | 0 | Gutter width between cells. If 0, no gutter. Otherwise gutter values > 0 will create a Xpx width around each cell. The outside border will be the 2xgutter value (ie: there will be each gutter around each cell). For example, if you specify gutter=2, then there is going to be a 4px border around the entire dashboard, and a 4px between each cell. |
You can specify the options in either a hash when you initialize the grid
$('#mygrid').gridly({width:1920, rows:4, cols:6}) or you can specify data- attributes in the div element of the grid.
