Golden Ratio Layout Tool

Overlay golden ratio, rule of thirds, and phi grid guides on images or blank canvases for composition.

Tested tool guide Tested browser tools Checked August 16, 2026

What Golden Ratio Layout Tool does, with a checked example

Golden Ratio Layout Tool places proportional composition guides over an image or a blank canvas. Choose a golden ratio, rule-of-thirds, or phi-grid overlay, then inspect where subjects, edges, text, and empty space fall relative to its lines and intersections. The guides are visual references rather than automatic corrections or composition scores. A common mistake is treating the phi grid as another name for the rule of thirds: its interior divisions sit closer to the center. Images are handled entirely in the browser and are not uploaded.

Worked example

A concrete input and expected output from the current implementation.

Input

A 1200 x 900 px image with the Rule of Thirds guide selected

Expected output

The overlay has vertical guides at x = 400 px and x = 800 px, plus horizontal guides at y = 300 px and y = 600 px. These lines form nine equal regions, each 400 x 300 px.

Each guide is placed one-third or two-thirds of the way across the corresponding dimension. The checks are 1200 / 3 = 400 and 900 / 3 = 300.

How the result is produced

Guide placement

The image or blank canvas supplies the rectangular coordinate area for the overlay. With the rule-of-thirds option, two vertical and two horizontal lines divide that area into equal thirds. Their four intersections provide reference points for positioning a focal subject, while the lines can be compared with horizons, architectural edges, or boundaries between major visual regions.

Proportion comparison

Changing the selected guide changes the reference geometry without judging the underlying composition. A conventional phi grid places its interior divisions at approximately 38.2 percent and 61.8 percent of each dimension, compared with 33.3 percent and 66.7 percent for thirds. Golden-ratio guides provide another phi-based reference for examining relationships among focal areas, surrounding space, and the canvas.

Good uses

Check whether a portrait's eyes or face sit near a thirds or phi-grid intersection before choosing a crop.
Compare alternative product-photo arrangements by viewing the subject and surrounding negative space against different proportional guides.
Plan a poster or illustration on a blank canvas by aligning major text blocks, focal artwork, and visual boundaries with one selected guide.

Limits and checks

Rule-of-thirds and phi-grid intersections are not interchangeable: the phi-grid lines are nearer the center.
Guide positions can fall between whole pixels when the image dimensions do not divide cleanly, so manually copied coordinates may require rounding.
An element touching a guide does not establish that it is visually important; the overlay cannot identify the intended subject or evaluate contrast, balance, or reading order.

Common questions

Are the phi grid and rule of thirds the same guide?

No. Thirds divide each dimension at 1/3 and 2/3, or about 33.3 and 66.7 percent. A phi grid uses divisions near 38.2 and 61.8 percent, derived from the golden ratio. The grids can suggest similar placements, but their lines and intersection points do not coincide.

Does matching the golden ratio guarantee a good composition?

No. A guide only supplies proportional reference points and paths. It cannot determine the intended focal subject, visual hierarchy, contrast, motion, or meaning of an image. Use the overlay to compare candidate placements, then judge the result at its intended viewing size and alongside any text or other surrounding content.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.