The Design Glossary is a series of posts explaining a basic graphic design concept.
What is a page layout grid?
A grid is a series of intersecting horizontal and vertical lines along which the structure of a page layout is organized. These lines could be literally drawn on the page, but usually they are invisible guides against which the layout’s objects are aligned. A grid can add instant organization to the page, as it satisfies our preference for order and alignment. Using the same grid structure on each of a system’s layouts lends immediate consistency between different screens.
In Layout Essentials: 100 Design Principles for Using Grids, author Beth Tondreau describes grids this way: “A grid is used to organize space and information for the reader; it maps out a plan for the overall project. In addition, a grid is a holding pen for information and a way to ordain and maintain order.”
In Making and Breaking the Grid, Timothy Samara says: “The grid renders the elements it controls into a neutral spatial field of regularity that permits accessibility—viewers know where to locate information they seek because the junctures of horizontal and vertical divisions act as signposts for locating that information…In one sense, the grid is like a visual filing cabinet.”
Just to clarify a possible point of confusion: FileMaker’s grid refers to the gridlines FileMaker can draw for you in Layout mode—we’re talking about something slightly different here, which is the more general concept of using an arrangement of lines to set up an organizational structure for the page as a whole. You’d actually implement this type of page grid using guides in FileMaker.
What kinds of grids are there?
There are many variations of grid styles, such as: single column, two column, three column, or modular (like a calendar). A table is a common type of grid familiar to FileMaker developers.
The width of the columns in two- and three- column grids might vary. For instance, in a two-column grid layout, the left column might take up one-third of the space, while the right column takes up the remaining two-thirds.
When aligning objects against a grid, be sure to allow space for the header, footer, a margin on the left and right sides, and gutters between grid columns.
How do I use a grid?
To use a grid to lay out your page, you’ll make use of both grids and guides in FileMaker. In Layout Mode, open an Inspector window. Under Position > Grid, click the “Show grid” box. Adjust the major and minor grid spacing to whatever you want. I like to use a 48-pt major grid spacing, with a minor grid step of 6. This means that every minor grid step is 8 pts wide (48/6 = 8).
You can now drag guides onto the layout to create your page layout grid. For example, let’s say you want to divide your layout evenly into thirds, with equal gutters, left and right margins. You’ve decided that each margin and gutter will be two minor grid steps wide.
You could do some math to figure out where to place all the guides, but I’ll show you an alternate method that works, as long as your total layout width, margins and gutters are a multiple of your minor grid step. [Updated from the original method to be easier and more accurate.]
- Drag a guide to place the left margin (in this example it is two minor grid steps from the edge).
- Determine the column width:
Column width = Round ( (Total layout width - left margin + right margin) – (margin * (number of columns – 1)) ) / number of columns ; 0)
- Create a rectangle the same width as your column width. Place the left edge of this rectangle against your left margin guide, and drag another guide to its right edge.
- Create a small rectangle that is the same width as your margin (in this case, 16 x 16 pts). Fill it with a colour so you can see it clearly. At these small sizes, it’s easier to see it if there are no line attributes applied.
- Place the left edge of this box against the right edge of the column guide, and then drag another guide to its right edge.
- Select both boxes and duplicate them, then drag to place the left edge against the new guide.
- Repeat the above for as many columns as you have. (Because of rounding, you may be out by one point on the right edge. Don’t round if you have a lot of columns, or this is important to you.)
Delete the boxes when you’re done, or drag them past the layout boundary to the inactive part of the layout. Or, if you have FileMaker 13, you can keep them on the layout so that you can snap other objects to them, and use “Hide Object When” to hide them when not in Layout mode!
You can adapt this method to accommodate different numbers of columns and different widths of margins. Once you have your guides in place, you can decide to turn off FileMaker’s grid, and use only the guides, or keep it on to more precisely place your layout objects.
FileMaker help topics:
Using the rulers and grid
Using guides and dynamic guides
