Use the grid form

The Grid Form allows you to generate a grid using familiar concepts like columns, rows, gutters, and margins using all of the unit types you are familiar with. Every field is optional.

If you omit a value that is required for calculating your grid, GuideGuide will automatically determine its value. For example, if you specify the number of columns, but not the width of each column, GuideGuide will automatically calculate the column width.

Make a Bootstrap-style simple grid

Let’s create a Bootstrap-style. The default bootstrap grid is 12 columns with 15px padding for each column.

  • In the Margins section, enter 15px in both the Left and Right fields.
  • In the Columns section, enter 12 in the Column Count field and 15px in the Gutter field.
  • Click the Add Guides button.

Use multiple guides in a field

The pipe | character allows you specify multiple values in an field. Let’s create a double left margin for a document.

  • In the Margins section, enter 20px | 10px in the Left field.
  • Click the Add Guides button.

Your document will now have a guide at 0, a guide at 20px, and a guide at 30px.

Automatically divide space with wildcards

The wildcard ~ character is used to tell GuideGuide to automatically calculate the leftover space in a grid. It’s easier to explain with a demo. Let’s create the Bootstrap-style grid from before, but this time, we’ll add a midpoint to each column.

  • In the Margins section, enter 15px in the Left and Right fields.
  • In the Columns section, enter 12 in the quantity field, ~ | ~ in the width field, and 15px in the gutter field.
  • Click the Add Guides button.

Notice how GuideGuide places a guide in the middle of each column. This happens because GuideGuide first adds up all the parts of the grid that it knows the width of (the margins and gutters), subtracts that value from the total grid width, and then divides the remaining space between the wildcard. In this case, we’ve told GuideGuide to create two equal spaces per column, which means we’re dividing the remaing space between 24 wildcards.

Adjust the position of a grid

When you create a grid which doesn’t completely fill the context GuideGuide is referencing, the dropdowns in the Position section will activate. These dropdowns allow you to determine whether your guides are added to the left, right, top, bottom, or center of the current context. These dropdowns only appear when you specify a column or row size.

Create a grid inside an object

If you have an object in your design that you would like your grid to fill, simply select the object before adding your guides. GuideGuide will use the selection as its reference.

Sync margin values

To automatically sync values between margin fields, click the Sync margin fields button to the right of the Margins section. When activated, changes to any of the margin fields will be applied to the remaining margin fields.

Quickly reset the entire form

To reset the contents of the guide form, click the Reset form button.

Save a preset grid

If you have a grid you use regularly, or just want to save for later, fill out the form, then click the Save as preset button. You will be given the opportunity to name your grid.