Grid Stack

Our proprietary grid system has extremely concise settings, yet is still the most advanced grid layout system to date.

Simple breakpoints : We made it as fast as possible to set-up, by simply adding 4 dropdown select controls in the settings, one for each device size. Simply select the number of columns you’d like the grid to have on each device size.

Re-definable : By default the grid will re-arrange its self at screen sizes that equate to iPad (landscape), iPad(portrait), and iPhone. You can re-define the screen sizes for these device breakpoints if you wish.

Vertical alignment : It’s rare that the content you add to each cell in your grid will be of equal height. We added a vertical alignment option. It can automatically align the contents of the cells to top, middle or bottom, on a row by row basis.

Tiny footprint : There is no javascript involved in the grid, it’s pure CSS, and has a minuscule footprint of just 4kb on disk. This does not increase as the number of cells you add to the grid increases.

You can see live examples of the stack in action below.

Try resizing the browser window to simulate different device sizes. Note we have left the settings to the defaults (4 columns on desktop, 3 columns on iPad Landscape, 2 columns on iPad portrait, and 1 column on an iPhone).

Uneven heights example.

There may be many times you want a grid type layout, but the contents you add to each cell in the grid may not be of equal height. Grid stack can handle this just fine. When you select to make each grid item equal in height, either on a row by row basis, or the entire grid. You are then given further options to set a background colour, a border, border radius, and padding in each of the grid items in the stack. Selecting to equalise the grid heights enables javascript. This demo is set to display every item in the grid the same height as the tallest item (You can select a row by row option if you wish).

A comprehensive overview of this stacks user settings.