Grid—A—Licious

Back in mid 2008, I created a jQuery plugin. I named it Grid-A-Licious and described it as, "Divs are placed in chronological order with a special grid" because I had no clue how to explain it better. I used this script a lot and designed many sites with it during 2008. At first, people were very skeptic and confused on how to read the grid, and thought this kind of layout belonged in real papers. This reaction slowly faded away once the layout became more and more popular when different developers and designers started to create their own script's interpretation of the floating grid layout effect. Not saying it was based on my work or script, because there were a few others that brought a similar layout effect to our attention, but not necessarily distributed as a plugin.

In Dec 2008, I decided to wrap the script into a Wordpress theme and release it as a christmas gift to the world. This gained quite a following and the theme was heavily used in 2009 and 2010. This got me really motivated and in 2010, I released a commercial version of the theme called "Grid-A-Licious 2". After only half a year, I was literally drowned in support tickets and questions on how to do this and how to do that, so I decided to stop selling the theme.

Today this floating grid layout effect is heavily used around the net and there are tons of different variations of the script to download and use. Some more popular than the other, but all does a better job than Grid-A-Licious.

So, why am I continuing developing this? After some quick research, I could not find what I was looking for in any of the existing plugins out there. None of them are responsive or adapts to different screens the way I want. I need the grid to be exact, fluid and float perfectly regardless of the screen size or device. This is exactly what "Grid-A-Licious 3" does.

The plugin is totally rewritten and the biggest change since the previous versions of Grid-A-Licious (and other similar plugins) is that the items in the grid aren’t using absolute positioning any more. They’re all floating. This will help many of you who are struggling with the grid content overlapping each other while loading. Also, this will probably speed up things as well.

If this is something you’ve been looking for, go ahead and download the plugin and use it. "But what happened to the Wordpress theme?" you may ask. I want to continue to release Grid-A-Licious as it once was - a simple jQuery plugin, not a theme.

width

$("#container").gridalicious({width: 225});

gutter

$("#container").gridalicious({gutter: 20});

selector

$("#container").gridalicious({selector: '.item'});

animate

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

animationOption

$("#container").gridalicious({
  animate: true,
  animationOptions: { […] }
});

$("#container").gridalicious({
  animate: true,
  animationOptions: {
    queue: true,
    speed: 200,
    duration: 300,
    effect: 'fadeInOnAppear',
    complete: onComplete
  }
});

$("#example1").gridalicious({
  width: 50
});

$("#example2").gridalicious({
  gutter: 1,
  width: 100
});

Example 03

Prepending and appending items

Prepend Append

itur.

Dasdasmdhaj hajsdoat.

Wxercquinsequat.

Quisnsequat.

Lorem odo consequat.

Ut enim

Lorem ctetur.

Dolor snsequat.

Wxeat.

Quis at.

Lored do.

Ut t.

$("#example3").gridalicious({
  gutter: 1, 
  width: 75, 
  animate: true, 
  animationOptions: { 
    speed: 200, 
    duration: 300, 
    complete: 
    onComplete
    },
});

Prepend and Append buttons

$('#prepend').click(function(){
  $("#example3").gridalicious('prepend', makeboxes());
});
  
$('#append').click(function(){
  $("#example3").gridalicious('append', makeboxes());
});

Like and share, please?

Tweet

Get the plugin

Current version: 3.01

Available at Github