Tutorials stack icon

Gridinator

The most simple and robust grid stack for RapidWeaver that you’ve ever seen.

Table of Contents

  • How to use
  • Troubleshooting Goodies
  • General
  • Columns > Desktop
  • Columns > Tablet
  • Columns > Mobile
  • Column Stack > Overrides


Introduction

Here you can learn how to use the Gridinator from Weavium. Of course, if you have any questions along the way, you are always welcome to visit the support page and leave us a message. _-


How to Use

Once you drag the gridinator stack onto the page, you will see that (by default) it has one column stack inside of it. You can add more columns by pressing the ( + ) button to add more column stacks.

The Gridinator stack contains all of the options for setting up column numbers at different device sizes, breakpoints, margins, paddings, and more.

The options will apply to all columns at each different device size.

If you want one column to override the flow of the grid, click on one of the Gridinator Column Stacks, and you will see options for overriding, as well as a few other helpful options like custom padding, backgrounds, etc.


Troubleshooting Goodies

Show Edit Helpers (Checkbox)

Checking this option will display some helpful visual indicators such as colors and custom text that will appear at individual breakpoints, as well as outlines around each individual column. This is helpful for getting a good idea of how your grid works, and for troubleshooting.


General

No Outer Gutters (Checkbox)

Checking this option will remove the gutters from the outer edges of the grid. This is great for creating grids with full width backgrounds, or for columns that need to touch the edge of the page.

Max Width (Input)

This input allows you to set the maximum width of the grid. By Default the maximum width is set to 1500px, but you can decrease it if you need to create a grid that is smaller than the full width of the page.

Tablet Break (Input)

This is where you can set the breakpoint for tablet devices. The grid will change to the number of columns that you specify in the tablet columns section, after this point.

Mobile Break (Input)

This is where you can set the breakpoint for mobile devices. The grid will change to the number of columns that you specify in the mobile columns section, after this point.


Columns > Desktop

These options will apply to all columns on the initial page load.

Columns (Input)

This value will determine the number of columns per row on desktop devices. The default value is 3 columns.

Gutter Width (2 Inputs)

These two inputs allow you to specify the gutters, or space inbetween each column. There is one input for the vertical gutter and one for the horizontal gutter.

Column Padding (2 Inputs)

These two inputs allow you to specify the padding, or space around the inside of each column. There is one input for the vertical padding and one for the horizontal padding.


Columns > Tablet

These options will apply to all columns after passing the Tablet Breakpoint specified in the General Settings section.

Columns (Input)

This value will determine the number of columns per row on tablet devices. The default value is 3 columns.

Gutter Width (2 Inputs)

These two inputs allow you to specify the gutters, or space inbetween each column. There is one input for the vertical gutter and one for the horizontal gutter.

Column Padding (2 Inputs)

These two inputs allow you to specify the padding, or space around the inside of each column. There is one input for the vertical padding and one for the horizontal padding.


Columns > Mobile

These options will apply to all columns after passing the Mobile Breakpoint specified in the General Settings section.

Columns (Input)

This value will determine the number of columns per row on mobile devices. The default value is 3 columns.

Gutter Width (2 Inputs)

These two inputs allow you to specify the gutters, or space inbetween each column. There is one input for the vertical gutter and one for the horizontal gutter.

Column Padding (2 Inputs)

These two inputs allow you to specify the padding, or space around the inside of each column. There is one input for the vertical padding and one for the horizontal padding.


Column Stack > Overrides

If you click on an indivual column stack, you will see a few options. One option is to override the column size. This is useful when you want to have just one column that stretches the width of 2 columns or that stretches the full width of the grid.

Override Column Size (Checkbox)

Once this option is checked, the column will override the size of the other columns, depending on how many columns you specify.

Underneath this option, you will see three inputs, one for Desktop, Tablet, and Mobile devices. Each input has a value that represents the number of columns for the column to span. By default, they are all set to 1, becuase columns originally span 1 column width.

If you increase the value of one of these inputs, say to 2 instead of 1, you will see that your column stretches the width of 2 columns instead of 1. This is how overriding works.

It's incredibly powerful and useful. Play around and see what you can create!

Gridinator Changelog

Version 1.0.2

  • Added option for column vertical alignment

Version 1.0.1

  • Fixed bug causing position fixed elements not to work inside of columns

Version 1.0.0

  • Ability to set different column amounts on Desktop, Tablet, and Mobile devices
  • Set breakpoints for Tablet, and Mobile devices
  • Set specific gutter widths, and column paddings for Desktop, Tablet, and Mobile devices
  • Beautiful and visual edit interface
  • Toggleable edit helpers that give visual indicators of breakpoints and columns
  • Column overrides for Desktop, Tablet, and Mobile Devices
  • Custom column styles such as background, min-height, and padding
  • It's amazing. ^