Minimal Responsive Grid Layout Plugin For jQuery - Elements Grid

Elements Grid is a simple, lightweight and responsive jQuery grid layout plugin that dynamically resizes and arranges a collection of html elements to fit within your viewport.

How to use it:

1. Link to the latest version of jQuery library and the jQuery Elements Grid plugin like this:

<script src="jquery.min.js"></script>
<script src="src/jquery.elgrid.js"></script>

2. Add the CSS class 'item' to your grid items and use data-prio to set the priorities.

<div id="mygrid">
  <div class="item"></div>
  <div data-prio="-5" class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div data-prio="50" class="item"></div>
  <div class="item"></div>
  <div data-prio="100" class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div data-prio="0" class="item"></div>
  ...
</div>

3. Initialize the plugin to generate a default grid layout.

$("#mygrid").jqElGrid();

4. Available default configuration options.

$("#mygrid").jqElGrid({

  // CSS class for child elements
  child             :   '.item',

  // size of grid items
  elSize            :   200,

  // space between grid items
  elPadding         :   5,

  // maximum number of rows to show
  rowsShow          :   9999,

  // CSS class for hidden elements
  hidedClass        :   'jqElGrid-hided',

  // delay time to re-init the plugin on window resize
  waitTime          :   250,

  oneColumnHeight   :   0.6,

  // name of data attribute
  prioAttr          :   'prio',

  // number of columns
  columns           :   0
  
});

---

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