Golden Ratio Layout Grid Configurator
Natural Scaling Dimensions for Designers

Enter a base dimension and instantly get phi-proportioned column widths, typography scales, CSS grid code, and a live wireframe preview. Everything calculated client-side.

phi Configure Your Layout
Key Terms Explained
Golden Ratio (Phi)
The irrational number 1.6180339887, often denoted by the Greek letter phi. A proportion where the whole divided by the larger part equals the larger part divided by the smaller part.
Fibonacci Sequence
The series 1, 1, 2, 3, 5, 8, 13, 21... where each number is the sum of the two before it. The ratio of consecutive terms converges to phi as the numbers grow.
CSS Grid
A two-dimensional layout system in CSS using rows and columns. The fr (fractional) unit lets you express column widths as proportions, making golden ratio grids easy to declare.
Fluid Typography
A typographic technique where font sizes scale smoothly with viewport width. Combining fluid type with a phi-based modular scale creates heading hierarchies that remain harmonious at any screen size.
Major Proportion
In a golden ratio split, the larger segment. Equal to the total divided by phi (approximately 61.8% of the whole). For a 1200px container, the major column is about 741px.
Minor Proportion
The smaller segment in a golden ratio split. Equal to the total minus the major segment (approximately 38.2% of the whole). Always in a 1:1.618 relationship to the major segment.
Rule of Thirds
A composition guideline that divides a space into three equal parts (1:1:1). Simpler than the golden ratio, it is most commonly used in photography and image layout rather than typography or column grids.
Modular Scale
A typographic system where font sizes progress by a fixed mathematical ratio. A phi-based modular scale multiplies each size by 1.618 to reach the next level up the heading hierarchy.
Golden Rectangle
A rectangle whose side lengths are in the golden ratio. Unique property: cut a square from one end and the remaining piece is also a golden rectangle, enabling the infinite golden spiral construction.

The Complete Guide to Golden Ratio Layout Design

The Golden Ratio is one of the most debated but enduring tools in the designer's toolkit. This guide explains the math, the practical CSS, and when to use phi-based proportions versus simpler alternatives.

How to Use This Configurator

Type any dimension into the Base Dimension field - this might be your total container width, your target column width, or your body font size. Select a unit (px, rem, em, or vw) and choose a Layout Model. The math breakdown, wireframe, and CSS code all update in real time as you type. No submit button is needed.

For a classic editorial two-column layout, type your total content width (e.g., 1200) and choose Two-Column. For a content-plus-sidebar pattern, the Major column is your main content and the Minor is your sidebar. For typography, enter your body font size (typically 16) and read the h1 through caption scale directly.

The Math Behind Phi

Phi (1.6180339887...) is an irrational number, meaning its decimal expansion never repeats. It satisfies the unique equation: phi squared equals phi plus 1. This recursive self-similarity is why phi appears in natural growth patterns, from nautilus shells to sunflower seed spirals.

For design, the key formulas are straightforward. Given a total width T, the Major segment A = T / phi and the Minor segment B = T - A. This means B is approximately 38.2% and A is approximately 61.8% of T. These percentages come directly from 1/phi (0.618) and 1/phi^2 (0.382).

Choosing Between fr Units and Exact Pixels

When your layout has a flexible container, use grid-template-columns: 1fr 1.618fr. This tells CSS Grid to give one column 1 fractional unit and the other 1.618 fractional units, producing a perfect phi ratio at any container size. This is almost always the right choice for responsive design.

Use exact pixel values when you need one column to remain fixed regardless of screen size - for example, a 300px sidebar next to a flexible main area. In that case calculate the major column width from your expected container size and hard-code it. The CSS this tool generates covers both approaches.

Applying Phi to Typography

A phi-based modular scale takes a single base size and multiplies or divides it repeatedly by 1.618 to generate the full type hierarchy. Starting from 16px: caption is 16 / 1.618 = 9.9px, body stays at 16px, h3 = 16 x 1.618 = 25.9px, h2 = 41.9px, h1 = 67.8px. Each step has a harmonic relationship to every other, so the hierarchy feels coherent without needing manual adjustment.

Golden Rectangle and the Spiral

The Golden Rectangle tool takes any width and returns the height that creates a phi-proportioned rectangle. The unique self-similar property - that removing a square from a golden rectangle leaves another golden rectangle - is what generates the famous logarithmic spiral. Hero images, cards, and modal windows sized as golden rectangles tend to feel naturally balanced.

FAQ

The Golden Ratio (phi, approximately 1.618) is a mathematical proportion found throughout nature and classical architecture. When you divide a line so that the ratio of the whole to the larger part equals the ratio of the larger part to the smaller part, you get phi. Designers use it because proportions based on phi feel balanced and harmonious to the human eye, likely because the ratio appears so frequently in natural forms like nautilus shells, flower petals, and the human body.
For fluid, responsive layouts use CSS fr units: grid-template-columns: 1fr 1.618fr creates a perfect golden ratio split that scales with the container. Use exact pixel values only when you need a fixed-width sidebar or when working within a known container size. Mixing fr and px (e.g., 300px 1fr) gives you one fixed column and one flexible column.
Start with a base body font size (typically 16px or 1rem). Multiply by 1.618 to get your h3, multiply again for h2, and again for h1. Divide by 1.618 to get small/caption text. This creates a Fibonacci-like modular scale where each heading size has a harmonic relationship to the next, making your text hierarchy feel natural and well-structured.
They serve different purposes. The Rule of Thirds divides a space into three equal parts (1:1:1 ratio) and is most useful for image composition and placing focal points. The Golden Ratio creates an asymmetric 1:1.618 division that feels more organic and dynamic. For multi-column web layouts and typography scales, the Golden Ratio generally produces more visually compelling results. For photo cropping and image placement, the Rule of Thirds is often easier to apply.
A Golden Rectangle has width and height in the 1:1.618 ratio. If your width is 800px, your height should be 800 divided by 1.618, which equals approximately 494px. The unique property of a Golden Rectangle is that if you cut off a square from it, the remaining rectangle is also a Golden Rectangle. This self-similar property is what generates the famous Golden Spiral.
The Fibonacci Sequence (1, 1, 2, 3, 5, 8, 13, 21, 34...) is formed by adding each number to the one before it. As the sequence grows, the ratio between consecutive numbers converges toward the Golden Ratio (1.618). Web designers often use Fibonacci numbers directly as spacing or size values (8px, 13px, 21px, 34px) because they naturally approximate golden proportions.