Traditional web applications or portals have navigation in the form of menus (with dropdown options), toolbars or accordion etc. While each have their own pros and cons, none of them provide an UI similar to desktop.

Imagine showcasing the navigation options in one massive gird based gallery? Impress the visitors with a unique UI where the content is laid out creatively. Enter Gridster and all this becomes a reality where the UI is tile based (similar to Windows 8) and users can play with each widget/tile. Users can reposition the tiles/widgets to suit their preference using Gridster’s drag-and-drop feature.



Gridster is a jQuery plugin, hence jQuery (preferably latest version) has to be included in the HEAD section. Gridster is implemented in a single file and uses custom CSS which can be downloaded from here:

<meta charset="utf-8" />
<title>Gridster Demo</title>
    <link rel="stylesheet" type="text/css" href="/css/jquery.gridster.css">
<script type="text/javascript" src="assets/jquery.js"></script>
<script src="/assets/jquery.gridster.js" type="text/javascript" charset="utf-8"></script>


Normal HTML Div can be converted to Gridster by providing the CSS class: gridtster. Each such DIV can have the required number of List Items (LI), which will be converted to individual tiles.

<div class="gridster">
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
    <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
    <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
    <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
    <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>
    <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
    <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
    <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>
    <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
    <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>
    <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
    <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>

In the document ready event, each DIV can be converted to Gridtser by specifying one or more configuration options.

<script type="text/javascript" language="javacript">
$(document).ready(function () {
var gridster;
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [80, 55],
widget_margins: [5, 5

In the example above various configuration options are specified:

 widget_base_dimensions: [80, 55]

Base widget’s dimensions in pixels, where Width is 80 px and Height is 55 px.


widget_margins: [5, 5]

Horizontal and vertical margins between widgets.

Manage Gridster

Add a new Widget

    <li class="new">New Widget</li>
', 2, 1);

Remove a Widget


Number of widgets in row

Below code will set the number of widgets in a row based on the end user’s screen resolution.

if ($(window).width() <= 800 && $(window).width() >= 500) {
var cols = 1;
var offset = 40;
} else if ($(window).width() < 1200 && $(window).width() > 800) {
var cols = 2;
var offset = 30;
} else if ($(window).width() >= 1200 && $(window).width() < 1750) {
var cols = 3;
var offset = 30;
} else if ($(window).width() >= 1750) {
var cols = 4;
var offset = 30;

To see Gridster in action, please check this:

And for more details consult Gridster’s documentation at:

Are you interested? follow us and get notified of new posts

Leave A Reply

thirteen + 1 =