jQuery Plugin For Responsive Resizable Grid Layout - Resizeable.js

A tiny jQuery plugin used for creating responsive, resizable grid layouts where the grid will auto resize to within the browser window while preserving the original aspect ratio. Currently works on medium and large screens. The support of small and extra-small screens (mobile) is coming soon.

How to use it:

1. Load the style sheet resizeable.css in the header, and the JavaScript file resizeable.js after jQuery library.

<link rel="stylesheet" href="resizeable.css">
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="resizeable.js"></script>

2. Add the CSS class '.resizeable-container' to a container element and insert grids into the container as follows:

<div class="resizeable-container" >
  <div class="resizeable-row resizeable-aspect-1">
    <a href="#" class="resizeable-item resizeable-col-xs-4 resizeable-col-sm-4 resizeable-col-md-1 resizeable-col-lg-1 resizeable-col-xl-3 has-background">
    </a>
    <a href="#" class="resizeable-item resizeable-col-xs-4 resizeable-col-sm-4 resizeable-col-md-1 resizeable-col-lg-1 resizeable-col-xl-1 has-background">
    </a>
  </div>
  <div class="resizeable-row resizeable-aspect-1">
    <a href="#" class="resizeable-item resizeable-col-xs-4 resizeable-col-sm-4 resizeable-col-md-1 resizeable-col-lg-1 resizeable-col-xl-2 has-background">
    </a>
    <a href="#" class="resizeable-item resizeable-col-xs-4 resizeable-col-sm-4 resizeable-col-md-1 resizeable-col-lg-1 resizeable-col-xl-1 has-background">
    </a>
    <a href="#" class="resizeable-item resizeable-col-xs-4 resizeable-col-sm-4 resizeable-col-md-1 resizeable-col-lg-1 resizeable-col-xl-1 has-background">
    </a>
  </div>
  <div class="resizeable-row resizeable-aspect-1">
    <a href="#" class="resizeable-item resizeable-col-xs-4 resizeable-col-sm-4 resizeable-col-md-1 resizeable-col-lg-1 resizeable-col-xl-1 has-background">
    </a>
    <a href="#" class="resizeable-item resizeable-col-xs-4 resizeable-col-sm-4 resizeable-col-md-1 resizeable-col-lg-1 resizeable-col-xl-1 has-background">
    </a>
    <a href="#" class="resizeable-item resizeable-col-xs-4 resizeable-col-sm-4 resizeable-col-md-1 resizeable-col-lg-1 resizeable-col-xl-1 has-background">
    </a>
    <a href="#" class="resizeable-item resizeable-col-xs-4 resizeable-col-sm-4 resizeable-col-md-1 resizeable-col-lg-1 resizeable-col-xl-1 has-background">
    </a>
  </div>
</div>

3. You can pass the following options as an object to the Resizeable function using data-resizeable attribute as follow:

<div class="resizeable-container" data-resizeable='{"gutter": 2, "columns": 4}'>

Change log:

2016-10-22

• compatibility updates

---

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