Lightweight jQuery Pinterest-Like Fluid Grid Layout Plugin - Babylon Grid

File Size: 246 KB
Views Total: 7971
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Lightweight jQuery Pinterest-Like Fluid Grid Layout Plugin - Babylon Grid

Babylon Grid is a lightweight and customizable jQuery plugin to create the Pinterest-like responsive fluid grid layout for your website. 

The whole layout is define in CSS so it's pretty fast and easy customizable.


  • Fully responsive and customizable via Javascript and CSS3.
  • Ultra-lightweight. Only 3kb minified.
  • Custom grid schemes via javascipt.
  • Custom columns sizes via CSS or SASS.
  • Custom vertical align (bottom or center).

Basic Usage:

1. Include the jQuery Babylon Grid plugin and other resources in the document.

<link rel="stylesheet" href="jquery.babylongrid.css">
<script src="jquery.min.js"></script>
<script src="jquery.babylongrid.min.js"></script>

2. Create the Html for a grid layout following the markup structure like this.

<div id="babylongrid">

    <div class="h3 title"> Title 1 </div>
    <div class="desc"> Description 1 </div>

    <div class="h3 title"> Title 2 </div>
    <div class="desc"> Description 2 </div>

    <div class="h3 title"> Title 3 </div>
    <div class="desc"> Description 3 </div>


3. Initialize the grid layout with default settings.


4. Available parameters to customize the layout.


  // specify the number of columns for different screens
  scheme: [
      minWidth: 960,
      columns: 4
      minWidth: 720,
      columns: 3
      minWidth: 550,
      columns: 2
      minWidth: 0,
      columns: 1

  // 'tower' or 'city'
  display: null,

  // moves the first article to the last column
  firstToRight: false,

  // height divisor
  heightDivisor: 25,

  // callback
  afterRender: null

5. Dynamically adds more content to the grid layout via AJAX.

// This should be done in AJAX callback
$('#babylongrid').append('<article>New Item Here</atricle>');

// trigger event to load new article to grid
// This should also be done in AJAX callback right after new elements are added to DOM

// or



  • v2.4: Changed check marks design


  • v2.2



  • Update.

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