Auto fit iPad portrait iPad landscape iPhone portrait iPhone landscape


Grid—A—Licious

Making grids sexier on the net since —08.
Now fully responsive.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur.
Dolor sit amet enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Wxercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Quis nostrud exercitation ullamco laboris no consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur.
Dolor sit amet enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Wxercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Quis nostrud exercitation ullamco laboris no consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur.
Dolor sit amet enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Wxercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Quis nostrud exercitation ullamco laboris no consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur.
Dolor sit amet enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Wxercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Quis nostrud exercitation ullamco laboris no consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur.
Dolor sit amet enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Wxercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Quis nostrud exercitation ullamco laboris no consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur.
Dolor sit amet enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Wxercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Quis nostrud exercitation ullamco laboris no consequat.

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.

2012-10-13

width

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

gutter

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

selector

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

animate

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

animationOption

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

queue

Queued objects or not.
Default true

speed

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

duration

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

effect

Built in effects. At the moment, there is only ’fadeInOnAppear’. More effects will be added.
Default 'fadeInOnAppear'

complete

A function to be executed whenever the animation completes.
Default function()
$("#container").gridalicious({
  animate: true,
  animationOptions: {
    queue: true,
    speed: 200,
    duration: 300,
    effect: 'fadeInOnAppear',
    complete: onComplete
  }
});

Example 01

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

Ut asdsade.
itur.
Dasdasmdhaj hajsdoat.
Wxercquinsequat.
Quisnsequat.
Lorem odo consequat.
Ut enim
Lorem ctetur.
Dolor snsequat.
Wxeat.
Quis at.
Lored do.
Ut t.
$("#example1").gridalicious({
  width: 50
});

Example 02

This example uses custom width and gutter

Ut asdsade.
itur.
Dasdasmdhaj hajsdoat.
Wxercquinsequat.
Quisnsequat.
Lorem odo consequat.
Ut enim
Lorem ctetur.
Dolor snsequat.
Wxeat.
Quis at.
Lored do.
Ut t.
$("#example2").gridalicious({
  gutter: 1,
  width: 100
});

Example 03

Prepending and appending items

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());
});