icorradi / lightgrid

jQuery lightweight plugin to draw a grid based on (i) x, y coordinates and (ii) rows and cols dimensions for each element

Lightgrid

Usage Example

<div id="#my-grid">
  <div data-rows="1" data-cols="1" data-x="0" data-y="0">#1</div>
  <div data-rows="1" data-cols="2" data-x="0" data-y="1">#2</div>
  <div data-rows="2" data-cols="1" data-x="0" data-y="3">#3</div>
  <div data-rows="1" data-cols="3" data-x="1" data-y="0">#4</div>
</div>

<script type="text/javascript">
  $('#mygrid').lightgrid({'cols': 4})
</script>

The above example will generate a 4-column grid with the following format:

┌──────────────────┐
| #1 |   #2   |    |
|─────────────| #3 |
|      #4     |    |
└──────────────────┘

Default options

cols: 3            Number of columns
hSpacing: 10       Horizontal spacing from border to sep line
vSpacing: 10       Vertical spacing from element border to sep line
selector: div      Selector for elements in grid
aspectRatio        Number of times box height should be bigger than
                   width.
hBox               Overrides automatic box height calculation via
                   aspectRatio