Grid Stack

Our proprietary grid layout system.

Demo

£9.99 Buy Now

Instant Download

Requires Rapidweaver & Stacks Plugin v3.5 +

Stack Info

Category Link Current Category

Overview

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.

Settings

In this section, we have provided a comprehensive list of available settings, and a full description of what each of the settings does for the stack.

Horizontal gutters

This is the margin between each of the cells in the grid. Independent of its vertical counterpart.

Vertical gutters

This is the margin between each of the cells in the grid. Independent of its horizontal counterpart.

Vertical align

Vertically aligns any uneven cell content on a row by row basis to either the top, middle or bottom of each row.

Desktop

The number of columns to display at or above the iPad landscape size.

iPad landscape

The number of columns to display at or below this device size.

iPad portrait

The number of columns to display at or below this device size.

iPhone

The number of columns to display at or below this device size.

Re-define screen sizes

By default the breakpoints for each device type are set to their real world counterparts. You can override these sizes by selecting this option.

Equalize

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, you are 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.

Edit Mode

We pay great attention to how we approach the editing interface of every stack, to ensure intuitive ease of use.

When you drop a Grid into the page it is pre-populated with 4 cells. You can add new cells by clicking the plus button. You can drag cells to a new location within the grid or delete individual cells at any time.

FAQ

Important information that is pertinent to this stack. Please read, as there may well be something here that is essential to the deployment of this stack.

Browser support

This stack is supported in all modern browsers. Any exception to this rule will be listed below.

Safari

Chrome

Firefox

Explorer

Known compatibility issues

No known issues.

Stack installation

Download.

After purchase, you will be sent an email containing a download link for the stack.
Download the zip file from the link, and unzip it to reveal the stack inside.
You should now see the stack as a logo style icon.

Normal installation.

Double click the un-zipped stack file (the one that looks like a piece of lego).
This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Installation where more than one version of Rapidweaver is installed.

Sometimes if there is more than one version of Rapidweaver installed on your system, the double click method launches the wrong version of Rapidweaver to install the stack. To ensure the it is installed into the version you want to install to, you can, instead of double clicking the stack, just drag and drop it onto the appropriate Rapidweaver app icon in your dock at the bottom of your screen.

This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Live Demo

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