Auto fit iPad portrait iPad landscape iPhone portrait iPhone landscape

jQuery Nested

For a complete gap free,
multi column grid layout experience.

Nested is a jQuery plugin which allows you to create multi-column, dynamic grid layouts. Unlike other libraries and jQuery plugins similar to Nested, this is (as far I as I’ve know) the first script out there that allows you a complete gap-free layout. How is this done? Nested does three things. It creates a matrix of all elements and creates a multi column grid, similar to other libraries and scripts out there. Then it scans the maxtric for gaps and tries to fill them by reordering the elements. This is exactly how I’ve seen other newer libraries, scripts and modifications behave but if you stop here, the result will sometime leave unwanted gaps as well. That is why I added the last step, an option to resize any element at the bottom of the grid that is bigger (or smaller if you prefer) than the gap to make the grid completely gap-free.


Use a container element with a group of child items that use the chosen option selector setting (default: .box).

<div id="container">
  <div class="box size11"></div>
  <div class="box size12"></div>
  <div class="box size21"></div>
  <div class="box size22"></div>
Sizing of items are handled by adding sizeWH where W is the number of columns the box shall use and H is the number of rows the box shall use. E.g size15 equals width: 1 column and height: 5 rows The base column and row size is set by the minWidth option.


Default .box
$("#container").nested({selector: '.box'});


Default 50
$("#container").nested({minWidth: 100});


Default 1
$("#container").nested({minColumn: 1});


Default 1
$("#container").nested({gutter: 1});


Default true
If true, any box bigger than the gap will be resized to fill the gap.
$("#container").nested({resizeToFit: true});


Default option below


If true, any box bigger or smaller than the gap will be resized to fill the gap.
Default true
  resizeToFit: true,
  resizeToFitOptions: { 
    resizeAny: true


Default false
$("#container").nested({animate: false});


Default options below


A number of milliseconds to render each object (e.g. 200).
Default 20


A number of milliseconds to run the animation (e.g. 300).
Default 100


Queued objects or not.
Default true


A function to be executed whenever the animation completes.
Default function()
  animate: true,
  animationOptions: {
    speed: 100,
    duration: 200,
    queue: true,
    complete: onComplete

Example 01

This example uses a custom width and the default gutter 20px

  minWidth: 20

Example 02

This example uses custom width and gutter

  minWidth: 100,
  gutter: 10

Example 03

Prepending and appending items

  minWidth: 25,
  gutter: 1,
  animate: true,
  animationOptions: {
    speed: 10,
    duration: 20,
    complete: onComplete

Prepend and Append buttons

  var boxes = makeBoxes();
  $("#example3").prepend(boxes).nested('prepend', boxes);
  var boxes = makeBoxes();
  $("#example3").append(boxes).nested('append', boxes);