Use the grid form

The Grid Form allows you to generate a grid using familiar concepts like columns, rows, gutters, and margins using support all 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.

  • Left Margin
  • Top Margin
  • Right Margin
  • Bottom Margin
  • Column Count
  • Row Count
  • Column Width
  • Row Height
  • Column Gutter
  • Row Gutter
  • Align to Left
  • Align to Top
  • Align to Center
  • Align to Middle
  • Align to Right
  • Align to Bottom
  • Save Grid
  • Reset Form

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.

  • Enter 15px in the Left Margin and Right Margin inputs.
  • Enter 12 in the Column Count input.
  • Enter 15px in the Column Gutter input.
  • Click the Add Guides button.

Use multiple guides in an input

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

  • Enter 20px | 10px in the Left Margin 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.

  • Enter 15px in the Left Margin and Right Margin inputs.
  • Enter 12 in the Column Count input.
  • Enter 15px in the Column Gutter input.
  • Enter ~ | ~ in the Column Width input.
  • 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 form will provide a dropdown to allow you to determine whether your guides are added to the left, right, top, bottom, or center of the current context. This option only appears 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.

Quickly distribute values between fields

It is common to use the same value for multiple, similar fields in the form. You can automatically fill all like fields with the current value of an input by clicking the icon next to it. For example, if you fill out 10px in the Left margin field and then click the Left Margin icon, all margins will now have 10px as their value.

Quickly reset the entire form

To reset the contents of the guide form rather than deleting each input value individually, simply click the Reset 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 button. You will be given the opportunity to name your grid.