Choose a preset (A4, A3, Letter…) or enter custom dimensions. Switch between mm / px / pt using the Unit toggle.
Set top, bottom, left, and right margins. The margin guide is shown as a dashed rectangle in the preview.
Use the sliders to set the number of columns / rows and the gutter (gap) between them. Try the Classic Grid presets for historical references.
Use the Colors section to change the color of column guides, row guides, and margin guides. Colors are reflected live in the preview and in the exported SVG.
Click Download SVG or press O to export. The SVG uses transparent fills with colored strokes — ready to place in Figma, Illustrator, InDesign, etc.
Press O to instantly export the current grid as SVG.
Made by mog · daftlamb@gmail.com
Grid It is a browser-based graphic grid generator for designers. Quickly set up classic typographic grids, export as SVG or PNG, and place them directly into your favourite design tools.
Inspired by the foundational grid systems of Josef Müller-Brockmann, Jan Tschichold, and Van de Graaf — pioneers of modern typographic layout and the canon of page construction.
Made by mog · daftlamb@gmail.com