A grid has columns, rows, one gutter for both directions and four margins. Change any of them and a comp with the grid follows at once. A comp without a grid takes it on with the first change.
Columns and rows
The top bar starts with the columns and the rows, as in 4 × 3. Point at a number and the preview lights its columns or rows as stripes.
Drag a number left or right to change it. Hold Shift to change it ten at a time. Click it to type a number, and press Tab to jump to the other one.
More adds one column and one row. Fewer takes one of each away. Shift-click either one to change only the columns, or Alt-click (Option on Mac) to change only the rows. A grid goes from 1 to 48 columns and rows.
Margins and gutter
Each side of the preview has a bracket. Drag one to move that margin and the one across from it together. Alt-drag a bracket to move just that side.
Drag inside any gutter to widen or narrow every gutter at once.
While you drag, the top of the preview shows the value. The comp's guides follow when you let go.
A drag moves the value one pixel for each pixel you move the pointer, whatever size the preview is. Hold Shift to move ten times faster, or Cmd (Ctrl on Windows) for a tenth. Values in pixels land on whole pixels.
A margin or gutter stops growing before the cells disappear. Margins and gutter can be 0, so an even split like 3 × 3 is the same grid with no gutter and no margins.
Type every value
Right-click Grid, or right-click the counts in the top bar, to see every value as a field.
The margins sit on the sides of a frame, where they are on the comp, and the gutter sits between two cells. Drag a field or click it to type.
px and % switch the gutter and margins between pixels and percent of the comp, or of the layer for a [grid inside a layer](/docs/griddy/guides/grid-in-a-layer). Switching converts the values, so the grid keeps its shape.
How the guides are placed
Griddy puts a guide on both edges of every column and every row, so each cell is framed by four guides. A margin of 0 puts no guide on the comp’s own edge. Guides land on whole pixels, so cells can differ by a pixel at most.
Every change to the grid removes the guides the grid placed before and adds the new ones. Guides you placed yourself are never touched. One Undo brings back the previous grid, guides and values together. The undo step is named Griddy: Grid.
Use the same grid on another comp
Griddy remembers the last grid you used. Open another comp and the preview shows that grid faintly. Click Grid to put it on. To copy guides between comps of different sizes, save them as a preset.