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

File Size: 7.91 KB
Views Total: 5354
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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>

3. The required CSS rules for the grid items.

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

4. Initialize the grid layout.


5. Default plugin options.


  //  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

// destroy the plugin

Change log:


  • bugfix

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