Use the Golden Ratio Grid Generator to overlay a golden ratio grid, Fibonacci grid, or golden spiral on any canvas size — then copy the result as SVG or a ready-to-use CSS grid layout. No signup, no software, works directly in your browser.
View SVG code
View CSS code
How It Works
The golden ratio grid divides a rectangle using the number φ (phi), approximately 1.618 — the same proportion found in nautilus shells, classical architecture, and centuries of visual composition. This tool generates that division three ways.
Golden Ratio Grid places two vertical and two horizontal lines at 0.382 and 0.618 of the canvas, splitting it into nine sections sized in true golden proportion rather than the even thirds used by a standard rule-of-thirds grid. This mode works at any aspect ratio, and its output doubles as a real CSS grid: the generated grid-template-columns and grid-template-rows use the same 0.382/0.236/0.382 fractions, so the same proportions used for visual composition can define an actual page layout.
Fibonacci Grid tiles the canvas with squares sized by the whirling-squares construction — each square’s side equals the shorter side of the remaining space, arranged in a spiral sequence. This also works at any aspect ratio.
Golden Spiral traces the curved line through those Fibonacci squares. A mathematically continuous spiral only exists on a canvas with a true 1:1.618 ratio — on any other ratio, the arcs don’t connect smoothly — so this mode automatically locks the canvas height to width ÷ 1.618 and explains why in the interface, rather than stretching a broken curve to fit an arbitrary frame the way some generators do.
Golden Ratio Grid vs. Fibonacci Grid
They come from the same underlying ratio but serve different purposes. The golden ratio grid is a set of guide lines for positioning — it tells you where to place a subject, a headline, or a focal point within a frame. The Fibonacci grid is a set of nested shapes — it’s used to plan proportional sizing between elements, like scaling a sequence of content blocks or images relative to each other. If you only need placement guides, use the grid; if you’re sizing a sequence of elements against each other, use the Fibonacci layout.
When to Use a Golden Ratio Grid
- Web and UI layout — position hero images, headlines, and CTAs using proportions instead of guesswork, then carry the same ratio into your CSS with the generated grid-template code
- Photo composition — overlay the grid while cropping or framing a shot to place the subject along a natural focal line, similar to the rule of thirds but based on the golden ratio
- Branding and logo design — check icon or logomark proportions against golden ratio guides before finalizing
Using the CSS Output in WordPress
The Grid mode’s CSS output is a working display: grid layout, not just a visual reference — paste grid-template-columns and grid-template-rows straight into a block’s custom CSS or a child theme stylesheet to lay out sections in true golden proportion, the same way the on-screen guide lines are positioned.
FAQ
What is a golden ratio grid?
A golden ratio grid is a layout guide that divides a rectangle using the ratio 1:1.618 (phi), placing guide lines at roughly 38% and 62% of the width and height instead of the even thirds used by a rule-of-thirds grid.
What’s the difference between a golden ratio grid and a Fibonacci grid?
A golden ratio grid is a set of straight guide lines for positioning elements, while a Fibonacci grid is a set of nested squares used for proportional sizing between elements — both are built from the same 1.618 ratio.
Is the golden ratio grid the same as the rule of thirds?
No — the rule of thirds splits a frame into equal thirds, while the golden ratio grid splits it at 0.382 and 0.618, giving an asymmetric division that follows the golden ratio rather than even spacing.
Why does the Golden Spiral mode lock the canvas to a fixed ratio?
A golden spiral is only mathematically continuous on a canvas with a true 1:1.618 ratio; on any other ratio the curve’s arcs don’t connect smoothly, so the tool locks the height to keep the spiral accurate instead of rendering a distorted curve.
Can I use the golden ratio grid for web design, not just photography?
Yes — the grid mode’s output includes a copy-paste CSS grid layout using the same golden ratio proportions, so it can be used as an actual layout grid for a webpage section, not just a visual composition reference.
What is phi (φ) in design?
Phi is the golden ratio, approximately 1.618, a proportion long used in design and architecture because dividing a shape at this ratio is generally considered visually balanced.