Griddle.js
Programmable, fluid, shift-able grids.

Griddle is a small JavaScript tool that lets you build and manipulate fluid, programmable grids. It requires no dependencies and should work with all major browsers. (Systematic tests forthcoming.) The source code is fairly straightforward, but full documentation isn't quite ready. In the meantime, a few demos should help:

Demo #1: A basic grid.
Here, we set container to the div we want the grid to appear in. We set data to an array of numbers, strings, or objects. Each element of the array represents a tile in the grid. So we'll have eight tiles in this grid.

We set tile_height and tile_width to the desired dimensions (in pixels) of each tile in the grid. The property n_col indicates the number of columns the grid should have. (Behind the scenes, Griddle is setting the grid's width to n_col * tile_width. All tiles get float: left styling.) Implicitly, this means our 8-tile grid will have two rows.

Finally, we set render to a function. This function is called as a pseudo-method of the tile object, whose most important properties are el (the tile's HTML element) and data (the string, number, or object you passed along in Griddle.create's data array).

Demo #2: A basic slide-able grid.
(Though Griddle.js has no dependencies, the following demos use jQuery for concision's sake.)


[TK] Demo #3: Making each tile's content more interesting.

[TK] Demo #4: Adding and removing tiles.

[TK] Demo #5: Adjusting grid dimensions.