A task to build a grid for a website’s layout is not the easiest one, but there are a lot tools that can help with it. One of the most popular solutions is Gridster.js. It is a jQuery plugin developed by Ducksboard that allows to design intuitive drag-and-drop layouts. Gridster is written in JavaScript and compatible with Internet Explorer 9+, Mozilla, Chrome, Opera, and Safari. It is released under the MIT License. The only dependency Gridster requires is jQuery (but not jQuery UI).
Since Gridster is based around data attributes, any element can be used. Elements can span multiple columns and are not limited with those loaded initially. Elements can be both re-ordered, added and/or removed from the grid dynamically and at anytime to suit the particular layout. Additionally, the plugin can convert any given HTML structure into grid widgets.
Use Drag & Drop Multi-Column Grid with Plone
This jQuery plugin is a user-friendly web development tool with which you can easily create grids, rearrange elements by drag-and-drop method, dynamically add and remove elements and convert HTML structures into grid widgets. Moreover, there are callbacks on every level and a .serialize command that returns the positions of all the widgets anytime there is a need. So it is no surprise that it is popular and widely used.
With a help of collective.gridlets package Gridster can be easily integrated into Plone. This add-on implements Gridster interface and a dexterity content type Homepage. Simply add Homepage, use the traditional add portlet dropdown and Gridster widget to place portlets anywhere on the page (there are 6 columns in the grid) and change their width. Unlike other Plone packages with similar functionalities, collective.gridlets uses Plone core technologies and works with much less overhead (no tiles, no blocks). View screencast on collective.gridlets.