Inline-block Based Fluid Grid Layout Plugin For jQuery - tightgrid.js

tightgrid.js is a very small jQuery layout plugin that generates a compact, fluid grid layout from inline-block and vertical-align: top elements while keeping original order.

How to use it:

1. Load jQuery library and the jQuery tightgrid.js plugin at the end of the html document so the page loads faster.

<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="dist/jquery.tightgrid.js"></script>

2. Add items to the grid.

<div class="grid js-grid">
  <div class="grid__item js-item">1</div>
  <div class="grid__item js-item">2</div>
  <div class="grid__item js-item">3</div>
  <div class="grid__item js-item">4</div>
  <div class="grid__item js-item">5</div>
  <div class="grid__item js-item">6</div>
  <div class="grid__item js-item">7</div>
  <div class="grid__item js-item">8</div>
  <div class="grid__item js-item">9</div>
</div>

3. The required CSS rules for the grid items.

.grid__item {
  display: inline-block;
  vertical-align: top;
  ...
}

4. Initialize the grid layout.

$('.js-grid').tightGrid();

5. Default plugin options.

$('.js-grid').tightGrid({

  //  CSS selector for grid items
  itemSelector: '.js-item',

  // width of the grid item
  // null = takes the first item width
  columnWidth: null,

  // re-init the grid layout on resize event
  // good for responsive design
  resize: true
  
});

6. Public methods.

// re-init the plugin
$('.js-grid').data('tightGrid').rebuild()

// destroy the plugin
$('.js-grid').data('tightGrid').destroy()

Change log:

2016-03-13

• bugfix

---

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