Golden ratio layout
An asymmetric split based on 1.618 to 1, usually about 62% for the main area and 38% for its companion.
See it
What it is
A golden ratio layout divides space using phi, approximately 1.618 to 1. In a two-column page that works out to about 61.8% for the larger region and 38.2% for the smaller one. Le Corbusier folded the golden ratio into the Modulor, his system of architectural proportions.
Reach for it when a dominant content area needs a substantial companion, such as an article beside a generous sidebar or a product image beside details. It gives you a specific asymmetric starting point when equal halves feel static and a conventional two-thirds split feels too rough.
Gotcha: 1.618 is not a guarantee that a composition will look good. A narrow sidebar full of long labels or a wide article with unreadable line lengths still fails. Let content width, hierarchy, and breakpoints override the ratio, and do not force the same split onto a phone.
Ask AI for it
Lay out the desktop page on a golden-ratio split with CSS Grid: grid-template-columns: minmax(0, 1.618fr) minmax(16rem, 1fr), with a 32px gap inside a 1200px max-width wrapper. Keep the main text measure at 65ch even if its track is wider. Below the point where either column cannot fit its content, switch to one column with an @media query and place the primary content first.