6 Flexible jQuery Plugins To Control Webpage Layouts Easily

Controlling layouts with CSS is a big subject these days as after dropping the table support, it is clear that the current capabilities of CSS is not enough to develop complex & flexible layouts with ease.

There is CSS Template Layout Module which offers exciting features but it is in a draft status.

Until we get those new features, there are various solutions that are developed with jQuery to manipulate page layouts for faster & cross-browser results.

Here is a collection of 6 jQuery plugins to manage page layouts easily:

jQuery Masonry

jQuery Layout Plugin

Masonry is like the flip side of CSS floats. Floats arrange elements horizontally then vertically, Masonry arranges them vertically then horizontally. And the result is no vertical gaps between elements of varying height.

The plugin is almost totally managed with CSS rules. It uses jQuery’s outerWidth() and innerWidth() methods to calculate the margins & paddings of elements.


jQuery UI Layout Plugin

This is a plugin to create desktop-like layouts. It can b used to create any UI look from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms & more.



The library provides three layout algorithms:

  • border, which lays out components in five different regions
  • grid, which lays out components in a user defined grid
  • flex-grid which offers a grid with flexible column and row sizes.


jQuery CSS Layout

The plugin aims to offer a similar functionality with the CSS Template Layout Module (which is currently in a draft status).

The script simply parses the mentioned CSS rules & displays the content accordingly.


jQuery Column Plugin

The plugin automatically converts any content into a newspaper-like column format.

A default clumn widt or a static number of columns can be defined & the rest is almost done by itself.


jQuery Equal Heights

Creating equal height boxes or content holders is mostly a challenge with CSS. The plugin makes this process easy by simply calling a function.

  1. Reply ncj May 18, 2009 at 9:05 AM

    I have a heavily javascripted site. I noticed when I tried to use any type of equal heights whether it was javascript or jquery. It interfered with the other javascripts on the page.

    Would that happen with either of these?

  2. Reply Sam May 18, 2009 at 12:45 PM

    Good list of plugins, thanks.

  3. Reply art2code May 20, 2009 at 4:45 PM

    Nice ! thx

  4. Reply Colin July 27, 2009 at 11:27 PM

    I used equal heights yesterday for a row of div boxes. Worked brilliantly.

  5. Reply Rudi February 19, 2010 at 1:48 AM

    Nice script bro, i think it will be easier and faster to create template layout with this

    great stuff, simple but cool

  6. Reply Ilian Konchev February 20, 2010 at 2:45 AM

    I’ve created a prototype.js port of jQuery Masonry. You can find it here: http://www.sthoughts.com/prototype-masonry/

  7. Reply Dolido April 7, 2010 at 3:03 AM

    Thanks for this great post

  8. Reply Jason Day May 14, 2010 at 12:48 PM

    I really like masonry – I also figured out (with some help) how to filter /sort the divs – http://jasondaydesign.com/masonry_demo/

  9. Reply Css Collector June 13, 2010 at 3:42 AM

    Thanks! I’m using EqualHeights from Flament Group, It works everywhere except IE6.

  10. Reply Don Jordan April 8, 2016 at 11:30 PM

    I would like to add the jQuery Masonry style to my posted comments page, so when someone leaves a comment on my page it is displayed in this haphazard grid style. Is this possible?

Leave a reply