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:
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.
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.
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).