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

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

Babylon Grid is a lightweight and customizable jQuery plugin to create the Pinterest-like responsive fluid grid layout for your website. JavaScript is setting up column grid and organize articles. 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="stylesheets/jquery.babylongrid.css">
<script src=""></script>
<script src="javascript/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 scheme.


4. Available parameters.

scheme: [ // custom grid scheme
minWidth: 960,
columns: 4
minWidth: 720,
columns: 3
minWidth: 550,
columns: 2
minWidth: 0,
columns: 1
display: null, // 'tower' or 'city'. Set vertical align to bottom or center
firstToRight: false, // Move first article to last column
heightDivisor: 25, // Article height divisor. For disable set 1
afterRender: null

Change log:


  • 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.