The act of converting content from its original format into a format capable of being displayed on the web
Manage Multiple WordPress Sites

Grid

Grid Category

Awesome Grid With Drag and Drop Functionality — Shapeshift

Shapeshift is a jQuery grid with a drag’n'drop functionality.

It’s similar to Masonry but differs in that it can deliver a precise grid more often.

shapeshift Awesome Grid With Drag and Drop Functionality    ShapeshiftShapeshift is great for Pinterest-like layouts where you want to keep the item order as intact as possible when users are moving content around. The grid works on mobile devices and is responsive — just how we like it.

 

A Flexible & Powerful Grid Framework — Ivory

Ivory is a simple and flexible responsive grid framework.

It operates on the front end and handles layouts from 1200 to 320 pixels.

ivory A Flexible & Powerful Grid Framework    Ivory

 

The framework doesn’t aspire to create something new, but instead of reinventing the wheel it offers a back-to-basics grid framework with few extra features but great extendability.

It has a 12-column grid and ships with many features, such as styles for UI elements and cross-browser support.

Super Responsive Grids — Photoset Grid

Photoset Grid is a jQuery plugin for creating responsive photo grids.photosetgrid Super Responsive Grids    Photoset Grid

Photoset Grid is a responsive image grid originally meant for Tumblr themes. It can be easily integrated with Tumblr and fixed up with a lightbox plugin.

Besides that the functions are limited to a minimum, but especially useful is that you can automatically set it to use higher resolution pictures once a certain width has been reached.

An Extra-fluid CSS Grid — Extra Strength Responsive Grids

Extra Strength Responsive Grids is a CSS framework that addresses common issues developers come by when dealing with responsive layouts.

responsive An Extra fluid CSS Grid    Extra Strength Responsive GridsThe framework has only a grid system — i.e., it doesn’t have anything superfluous, — and uses percentage-based widths.

It supports nested grids and media queries; the framework also has an easy to remember class structure.

You’d use a framework like this to avoid common pitfalls of other responsive grid frameworks, such as the grid automatically collapsing into one column on mobile browsers.

Who Says the Web is Just for Squares? — Diamond grid

Who Says the Web is Just for Squares? is a walkthrough that focuses on building a diamond-based grid.

webdiamonds Who Says the Web is Just for Squares?    Diamond gridThe idea is that while the web has different varieties of content — videos, text, images and interactive content — the basic look of a website always stays the same.

A client of Trevor Davis apparently thought the same thing and requested a grid made of diamond-like shapes. He uses Modernizr to detect CSS3 transform support, and SASS and Compass for the CSS. Check it out, it’s really interesting!

Gap-free Grid Layouts With Style — Nested

Nested is a neat little jQuery plugin for creating multi-column grid layouts without gaps.

nested Gap free Grid Layouts With Style    NestedNested features a layout algorithm that works amazingly well; furthermore, the plugin also sports a responsive design.

If plugins like Grid-A-Licious or Masonry don’t do the trick for you, it looks like Nested’s Tetris-like algorithm will help you with creating fluid and awesome grids.