Modular Layout Grid

What this grid is

A modular layout grid is the backbone of many editorial and UI layouts. It defines a fixed canvas, a margin box (content area), and a repeatable set of columns and rows separated by gutters.

This generator turns that layout logic into a clean SVG line grid. You can export it as a reusable guide layer in Figma, Illustrator, InDesign, or any vector workflow.

It can also draw an optional baseline grid inside the content area. A baseline grid is especially useful when you want typography and modules to align to consistent vertical rhythm.

Key parameters

• Canvas Width / Height — The SVG artboard size in pixels.
• Margins (Top/Right/Bottom/Left) — Defines the content area (margin box) inside the canvas.
• Columns + Gutter X — Number of vertical modules and the gap between them.
• Rows + Gutter Y — Number of horizontal modules and the gap between them.
• Baseline Spacing + Offset — Spacing between baseline lines, plus an optional phase shift from the top of the content area.
• Boundary / Margin Box — Toggle the outer canvas border and the inner content-area rectangle.
• Line Color / Width / Opacity — Styling for all grid lines.

Unique highlights

• Columns and rows are independent, so you can build a “columns-only” or “rows-only” grid in seconds.
• Module sizes are computed from the available content area, so the grid stays mathematically consistent as you change margins and gutters.
• The baseline grid is constrained to the content area, which keeps it practical for real layout work.
• Lightweight SVG output (simple lines) imports cleanly into most design tools.
• Guard rails: if margins or gutters consume the content area, the generator will report that the layout is invalid.

Typical use cases

• Magazine / editorial page grids (classic 12-column systems, multi-row modular layouts).
• UI and dashboard layout guides (columns + rows for consistent component alignment).
• Poster, flyer, and social template grids (fixed canvas with controlled margins).
• Typography rhythm setups (baseline grid aligned to your leading).
• Design handoff: export a grid layer that teammates can reuse unchanged.

Tips

• Start by setting the canvas to your target artboard size, then adjust margins before touching column counts.
• For typography, set Baseline Spacing to your intended line-height (or a clean divisor of it).
• If your grid feels “too busy,” keep line width thin and reduce opacity instead of reducing structure.
• Use larger gutters for airy, modern layouts; use smaller gutters for dense, information-heavy layouts.

FAQ