Sample 1: Resizable grid using 1x1 tiles

Let's start with a a simple resizable grid of 1x1 tiles. We'll create a Tiles.js grid and provide a parent div which will hold our tiles. The parent div should use relative positioning and tile divs should be absolutely positioned. When the grid is drawn, the library looks at the width of the element and determines the number of cell columns that will fit given a minimum cell width. Once we have a grid of cells, the next step is to determine how to lay out the tiles on the grid.

The simple, default template factory is named UniformTemplates. All of the tiles in the templates produced by this factory are the same size: 1x1s which each cover a single cell in the grid.

Adjust the slider below to change the number of tiles displayed by the grid. Try resizing the browser window and watch the grid adjust the size and layout of the tiles. View the page source to see the code.

Number of Tiles

Sample 2: Variable sized tiles using fixed templates

The grid uses a pluggable template factory, which makes it possible to generate templates at run time. The grid will provide the factory with the number of columns and the target number of tiles. The template factory is expected to return a rectangular template defined by the number of columns, rows, and the set of rectangles specifying where each tile goes.

The tile count is only a target because it may not be possible for some template factories to create a rectangular layout for a particular column + tile combination. If that happens, the factory should add extra tiles so that the template remains rectangular.

For this example, we'll bypass the factory by setting the template directly. We've predefined 5 templates using JSON. Select any of the templates below to update the layout of the grid.

Sample 3: Updating Tiles During Resize

In the previous sample we customized our grid by overriding tile creation and adding the tile number to the div. In this example, we'll create a custom Tile that can update content when the tile size changes.

The size of a tile may change for several reasons:

The grid determines the location and size of each tile based on the template and current set of tiles. However, it delegates the element changes by calling Tile.resize(). There are 5 parameters:

In this example, we'll override the resize method and render the cell size for each tile. Try switching between the following fixed templates and observe that the dimensions are updated when tiles are resized.