Minimalist Responsive Grid Layout Plugin For jQuery

A minimal, responsive, dynamic jQuery grid plugin that automatically re-arranges grid items as the window's size changed.

Basic Usage:

1. Load the latest version of jQuery library and the jQuery responsive grid plugin in your project.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="jquery.responsivegrid.js"></script>

2. Build the Html for a grid layout using data-colspan and data-rowspan attributes.

<div class="grid">
  <div class="grid-item" data-colspan="1" data-rowspan="2"></div>
  <div class="grid-item" data-colspan="2" data-rowspan="1"></div>
  <div class="grid-item" data-colspan="1" data-rowspan="1"></div>
  <div class="grid-item" data-colspan="1" data-rowspan="1"></div>
  <div class="grid-item" data-colspan="2" data-rowspan="1"></div>
  <div class="grid-item" data-colspan="2" data-rowspan="1"></div>
  <div class="grid-item" data-colspan="2" data-rowspan="1"></div>
  <div class="grid-item" data-colspan="2" data-rowspan="1"></div>
  <div class="grid-item" data-colspan="1" data-rowspan="1"></div>
</div>

3. Call the plugin on the parent container to generate a basic grid layout.

$('.grid').responsivegrid({
  column : 6,
  gutter : '10px',
  itemHeight : '100%',
  itemSelector : '.grid-item'
});

4. Advance usages. Specify the options for different screen sizes using breakpoints.

$('.grid').responsivegrid({

'breakpoints': {
  'desktop' : {
    'range' : '1200-',
    'options' : {
      'column' : 6,
    }
  },

'tablet-landscape' : {
    'range' : '1000-1200',
    'options' : {
      'column' : 5,
    }
  },

'tablet-portrate' : {
    'range' : '767-1000',
    'options' : {
      'column' : 4,
    }
  },

'mobile' : {
    'range' : '-767',
    'options' : {
      'column' : 3,
    }
  },
}

});

Change logs:

2015-11-20

• small fix

v0.0.3 (2015-07-07)

• bug fix.

v0.0.2 (2015-01-21)

• added itemSelector option

---

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