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. In Dec 2008, I decided to wrap the script into a Wordpress theme and release it as a christmas gift to the world. 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. So, why am I continuing developing this? If this is something you’ve been looking for, go ahead and download the plugin and use it.
15 Best jQuery Grid Plugins for Developers Todays requirement when designing and developing a website is based on Responsiveness, where ones website must be able to adapt and resize across all handheld devices – thus: our thinking towards a tablet – like approach must incorporate fluid and adaptive as well as responsive layouts in developing a website. Most website design today seems to rely on the Grid system and layout, which allows designers a way by which to organize content on a page, using any combination of margins, guides, rows and columns. Grid design is most commonly seen in newspaper and magazine layouts which consist of columns of text and images. The amount of grid layouts which can be created is basically limitless and can be arranged in a myriad of ways, such as : equally sized two, three and four-column grids with a header across the top, as well as a full-page grid of squares with a consistent look and feel. 1. 2. S Gallery is a jQuery image gallery plugin that displays images in a responsive grid. 3. 6. 7. 9.
jQuery Gridly Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grids. In the example below try tapping or dragging any of the bricks. Example Add Installation To install download one of these packages and include the jquery.gridly.js and jquery.gridly.css files in your head with the following: Setting up a gridly is easy. Copyright (c) 2013 - 2014 Kevin Sylvestre Packery Masonry gridster.js A gridster configuration object. Define which elements are the widgets. Can be a CSS Selector string or a jQuery collection of HTMLElements. Horizontal and vertical margins respectively for widgets. Base widget dimensions in pixels. extra_rows: 0 Add more rows to the grid in addition to those that have been calculated. extra_cols: 0 max_cols: null The maximum number of columns to create. min_cols: 1 The minimum number of columns to create. min_rows: 15 The minimum number of rows to create. max_size_x: false The maximum number of columns that a widget can span. autogenerate_stylesheet: true Don't allow widgets loaded from the DOM to overlap. A function to return serialized data for each each widget, used when calling the serialize method. draggable.start: function(event, ui){} A callback for when dragging starts. draggable.drag: function(event, ui){} A callback for when the mouse is moved during the dragging. draggable.stop: function(event, ui){} A callback for when dragging stops. resize.enabled: false