Viewport Relative Responsive Grid Plugin - columns

columns is a responsive grid plugin that  provides a method to quickly create reponsive layouts using the native jQuery css method.

How to use it:

1. Include jQuery library and columns.js

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.columns.js"></script>

2. Include columns css

<link rel="stylesheet" href="jquery.columns.css" type="text/css" />

3. Markup

<header class="row-1">
  <div class="col">
    <!-- content -->
  </div>
</header>

<article class="row-3">
  <div class='col'> 
    <!-- content -->
  </div>
  <div class='col'>
    <!-- content -->
  </div>
  <div class="col">
    <!-- content -->
  </div>
  <div class='col'> 
    <!-- content -->
  </div>
  <div class='col'>
    <!-- content -->
  </div>
  <div class="col">
    <!-- content -->
  </div>
</article>

<footer class="row-3">
  <div class="col">
    <!-- content -->  
  </div>
  <div class="col push-1">
    <!-- content -->  
  </div>
</footer>

4. Call the plugin

<script type="text/javascript" charset="utf-8">

$.columns.quickSetup()

// Slider:
setInterval(function() {
  $('#slider img').attr('src', 'http://lorempixel.com/1344/450?'+ new Date().getTime())
}, 2500 )

$.columns.setCols({

// set 2 columns per row on #mycontainer when window is less than 1280,
// and 1 column per row when it's less than 1024

  'content-1': [ [1024, 1] ],
  'content-2': [ [1024, 2] ]
});

</script>

---

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