--- title: Gridster.js - Drag-and-Drop Multi-Column Grid description: Always on the lookout for the next great trend in Web design leads us down some rather interesting p... image: https://www.websitemagazine.com/hubfs/Imported_Blog_Media/gridster-mini-2-1-1-1.png --- [Log In](https://www.websitemagazine.com/_hcms/mem/login) [Subscribe](https://websitemagazine.tradepub.com/free/w_webk05/prgm.cgi) [![Website Magazine Logo](https://www.websitemagazine.com/hs-fs/hubfs/gradient-regular@3x-1.png?width=586&height=145&name=gradient-regular@3x-1.png "Website Magazine Logo")](http://Website%20Services,%20Inc.) - [About](https://www.websitemagazine.com/about) - [FAQs](https://www.websitemagazine.com/about/faq) - [Advertise](https://www.websitemagazine.com/about/advertise) - [Editorial Staff](https://www.websitemagazine.com/about/editorial-publishing-staff) - [Resources](https://websitemagazine.tradepub.com) - [Newsletter](https://www.websitemagazine.com/newsletter-sign-up) - More - [Contact Us](https://www.websitemagazine.com/contact) [Log In](https://www.websitemagazine.com/_hcms/mem/login) [Subscribe](https://websitemagazine.tradepub.com/free/w_webk05/prgm.cgi) Search - [Latest](https://www.websitemagazine.com) - [Design](https://www.websitemagazine.com/web-design) - [Development](https://www.websitemagazine.com/web-development) - [SEO](https://www.websitemagazine.com/seo) - [Ecommerce](https://www.websitemagazine.com/ecommerce) - [Content](https://www.websitemagazine.com/content) - [Marketing](https://www.websitemagazine.com/marketing) - [Advertising](https://www.websitemagazine.com/advertising) - [Email](https://www.websitemagazine.com/email) - [Infographics](https://www.websitemagazine.com/infographics) - [View All Topics](https://www.websitemagazine.com/channels) # Gridster.js - Drag-and-Drop Multi-Column Grid ![Pete Prestipino](https://www.websitemagazine.com/hubfs/Pete%20Prestipino.jpeg) [by Pete Prestipino](https://www.websitemagazine.com/web-development/author/pete-prestipino) 04 Sep, 2012 - - - [mailto:?Body=https://www.websitemagazine.com/web-development/gridster-js-drag-and-drop-multi-column-grid](mailto:?Body=https://www.websitemagazine.com/web-development/gridster-js-drag-and-drop-multi-column-grid) - Link Copied! ![Gridster.js - Drag-and-Drop Multi-Column Grid](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/gridster-mini-2-1-1-1.png) **Always on the lookout for the next great trend in Web design leads us down some rather interesting paths.** Our most recent discovery will likely be the coolest thing you'll see today - [**Gridster.js**](https://gridster.net) - a drag-and-drop multi-column grid. Created by [Ducksboard](https://ducksboard.com), Gridster is a jQuery plugin that enables designers and developers to build intuitive "draggable" layouts from elements spanning multiple columns. Instead of trying to explain it, check out the demo on the official site. Several customization features and options are available that are definitely worth of a review. Designers can leverage the API object to add a new widget to the grid, remove a widget or create a serialized array with the elements positions. Again, this is definitely going to be the coolest thing you see today.  ![](https://www.websitemagazine.com/hs-fs/hubfs/Imported_Blog_Media/gridsterjs-2-1-1-1.png?width=500&height=245&name=gridsterjs-2-1-1-1.png) ![Pete Prestipino](https://www.websitemagazine.com/hubfs/Pete%20Prestipino.jpeg) [Pete Prestipino](https://www.websitemagazine.com/web-development/author/pete-prestipino) Digital marketing executive with proven experience in all aspects of search engine optimization (SEO), performance-based advertising, consumer-generated/social media, email marketing, lead generation, Web design, usability, and analytics. - 20-year Internet marketing veteran, currently serving as the Digital Marketing Campaign Manager at Antenna Group (formerly Chicago Digital). - Former Editor-In-Chief of Website Magazine, and a regular speaker on Web technology digital marketing strategy - Author of several books on digital marketing Including Web 360: The Fundamentals of Web Success; Affiliate 360: The Fundamentals of Performance Marketing; Domains 360: The Fundamentals of Buying & Selling Domain Names, and SEO 360: The Fundamentals of Search Engine Optimization. - - - [mailto:peter@websitemagazine.com](mailto:peter@websitemagazine.com) #### Popular Post ### [How to Embed AI in your Enterprise App ![How to Embed AI in your Enterprise App](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/unsplash-41618c-2-1-1-1.gif)](https://www.websitemagazine.com/web-development/how-to-embed-ai-in-your-enterprise-app) ### [How to Use Plugins in WordPress ![How to Use Plugins in WordPress](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/WordPress-Logo-1.png)](https://www.websitemagazine.com/web-development/how-to-use-plugins-in-wordpress) ### [Top 10 Tips to Build a Google-Friendly Site ![Top 10 Tips to Build a Google-Friendly Site](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/pexels-photo-1015568-1-1.jpg)](https://www.websitemagazine.com/web-development/top-10-tips-to-build-a-google-friendly-site) #### Subscribe to Our Newsletter! [![](https://a.impactradius-go.com/display-ad/13053-1438301)](https://semrush.sjv.io/c/3976891/1438301/13053)![](https://imp.pxf.io/i/3976891/1438301/13053) #### Latest in Web Development [![How to Use Plugins in WordPress](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/WordPress-Logo-1.png) How to Use Plugins in WordPress](https://www.websitemagazine.com/web-development/how-to-use-plugins-in-wordpress) [![Top 10 Tips to Build a Google-Friendly Site](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/pexels-photo-1015568-1-1.jpg) Top 10 Tips to Build a Google-Friendly Site](https://www.websitemagazine.com/web-development/top-10-tips-to-build-a-google-friendly-site) [![STAT WATCH: The Shift to Cloud](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/cloud-icon-Jan-23-2023-02-15-00-5888-PM-3-2-2.png) STAT WATCH: The Shift to Cloud" is Nearly Complete"](https://www.websitemagazine.com/web-development/stat-watch-the-shift-to-cloud-is-nearly-complete) [![Amazon Enhances Alexa Skills Kit Developer Console](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/amazon_200x200-Jan-23-2023-02-23-45-6129-PM-1-1-1.png) Amazon Enhances Alexa Skills Kit Developer Console](https://www.websitemagazine.com/web-development/amazon-enhances-alexa-skills-kit-developer-console) [![How Serverless and ReactJS are Changing the Rules of Web Development](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/unsplash122117-Jan-23-2023-02-14-59-5570-PM-1-1-1.png) How Serverless and ReactJS are Changing the Rules of Web Development](https://www.websitemagazine.com/web-development/how-serverless-and-reactjs-are-changing-the-rules-of-modern-web-development) [![How to Embed AI in your Enterprise App](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/unsplash-41618c-2-1-1-1.gif) How to Embed AI in your Enterprise App](https://www.websitemagazine.com/web-development/how-to-embed-ai-in-your-enterprise-app) [![gradient-regular@3x](https://www.websitemagazine.com/hs-fs/hubfs/gradient-regular@3x.png?width=128&height=128&name=gradient-regular@3x.png)](https://www.websitemagazine.com/) 999 E Touhy Ave, Des Plaines, IL 60018   [info@websitemagazine.com](mailto:info@websitemagazine.com) [(888) 7WEBMAG](tel:18887932624) [(312) 313-6576](tel:13123136576) About - [Advertise](https://www.websitemagazine.com/about/advertise) - [Editorial](https://www.websitemagazine.com/about/editorial-publishing-staff) - [Contact Us](https://www.websitemagazine.com/contact) Resources Membership - Login - Subscribe Signup for our newsletter © 2026 Website Magazine. All Rights Reserved - [Privacy Policy](https://www.websitemagazine.com/about/privacy) ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Pete Prestipino", "url" : "https://www.websitemagazine.com/web-development/author/pete-prestipino" }, "dateModified" : "2023-05-01T22:17:26.631Z", "datePublished" : "2012-09-04T05:00:00.000Z", "headline" : "Gridster.js - Drag-and-Drop Multi-Column Grid ", "image" : [ "https://www.websitemagazine.com/hubfs/Imported_Blog_Media/gridster-mini-2-1-1-1.png" ], "mainEntityOfPage" : { "@id" : "https://www.websitemagazine.com/web-development/gridster-js-drag-and-drop-multi-column-grid", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.websitemagazine.com/hubfs/gradient-regular@3x-1.png" }, "name" : "Website Services, Inc." } } ``` ```json { "@context" : "https://schema.org", "@type" : "NewsArticle", "author" : [ { "@type" : "Person", "name" : "Pete Prestipino" } ], "headline" : "Gridster.js - Drag-and-Drop Multi-Column Grid", "publisher" : { "name" : "Website Magazine", "url" : "https://www.websitemagazine.com/" } } ```