/
Browse all pages

Layout grid

A column grid over the page, with your columns, gutter, margin and max width.

The layout grid lays a column grid over the page, the way a design file sets one, so you can see whether the page's content sits on it. It is a toolbar tool, not a card in the side panel, and it is left out of captures.

  1. Press G, or choose Layout grid in the More menu. Press it again to take the grid off.
  2. Press the Layout grid button to open its menu, which shows the grid too. Start from a preset (Bootstrap 5: 12 columns, 24 pixel gutter, 12 pixel margin, 1320 max width; or 12, 8 or 4 columns), or change the columns (1 to 24), the gutter between them, the margin at each side and a max width (0 for none). The preset your numbers match is marked. The switch at the top shows or hides the grid.
  3. Under Rows and baseline, add rows down the window (a height each, or 0 to share the window's height) with a row gutter, and a baseline: a thin line every so many pixels from the top of the page, moving with it as it scrolls, to check text sits on a vertical rhythm. 0 turns each off.
  4. The grid on the page follows the numbers as you type, and follows the window as you resize it.

A grid with a max width is centred in a wider window. Columns that would be under a pixel wide are not drawn. Your numbers are remembered for each site in this browser, so a site you set up keeps its grid; a site you have not set up starts from the last grid you set. The first grid is 12 columns with a 24 pixel gutter and margin. Whether the grid is on is not remembered: like every overlay, it starts off each time Nitpique is turned on. You can move the button onto the bar in Customize.

Questions

What is the default grid?

12 columns with a 24 pixel gutter and margin. Change the columns (1 to 24), gutter, margin and max width in its menu.

Is the grid in my captures?

No. It is left out of captures.