I have been experimenting with Phi, «the golden ratio», 1:1.618, for years. One might say, I have been on a quest for "the holy grail of digital design". In 2023, as I was nerding out in my cabin in Denmark, the land of LEGO, it suddenly occurred to me, that I could make a grid using only Phi rectangles, like stacked little 2-stud LEGO blocks.
Visual thinking
When I put the blocks next to each other, horizontally and vertically, I realized that I had come across a simple idea for both grid columns and spaces between columns. No need for arbitrary gaps, gutters and margins. Only Phi rectangles were necessary. Stacking them vertically gave me natural grid rows.
Counting columns
When I started adding these rectangles in Figma, I counted 13 across and called it a 12 column grid — the thirteenth rectangle was the margin. 25 gave me 24 columns the same way, and I carried that n+2 pattern up through 50, 74 and 98. Every count was divisible in the ways I needed, each one wider and more finely resolved than the last.
The margin leaves the grid
That one extra rectangle turned out to be the thing holding the system back. A margin that lives inside the count makes every number an odd shape: 50 columns is really 48 columns wearing a hat, and 48 is the number that actually divides. So I took the margin out of the grid entirely. It is padding on the frame now — exactly one column wide, the gutter a neighbouring tile would have contributed if there had been a neighbour.
What is left is a clean ladder of even squares: 12, 24, 48, 72, 96, 144, 192, 288. Halves, thirds, quarters, sixths, twelfths — the divisions fall out of the numbers themselves, with nothing set aside and nothing left over.
Fibonacci in Figma
Using a rectangle in Figma that was 13x8 pixels (both Fibonacci numbers), this gave me each break point; 12 columns = 156px. 24 columns = 312px. 48 columns = 624px. 72 columns = 936px. And so on. However, realizing that the 13x8px rectangle is not precise enough (1:1.625), I understood that I needed to use math to get closer to nature’s divine ratio.
The 13 stayed, though. Every break point in Phidelity is still its column count times 13, which means a column is exactly 13px wide the moment a band opens, and a row exactly 8.0344px — 13 divided by Phi. A shape drawn three rows tall therefore means the same thing in every band on the ladder.
When I used CSS grid to divide any width by one of my column numbers (12, 24, 48, 72, 96, 144, 192, 288), I could calculate the grid columns automatically. Since the shorter part of a golden ratio rectangle is the long part divided by 1.618, I was able to use math and ‘grid-auto-rows’ to get the golden ratio grid matrix I wanted. Exactly the same as in Figma, only that in the browser, it was dynamically adjusting to any width. And mathematically correct.
Coordinates
The Phidelity grid matrix is a canvas «map of divine coordinates» to align design elements against, for natural distribution and growth. When I set up the break points I had discovered in Figma, I got a very fluid transition between the grid column counts; 24, 48, 72, 96, 144, 192, 288. It was satisfying to see how symmetrical partitions of the width (2, 3, 4, 6, 8, etc) flow almost unnoticably through the different break points, as the canvas width expands.
Not every count divides every way, and that is part of the character. Twelve has no eighths. Seventy-two has ninths where ninety-six does not. Choosing a rung is choosing which divisions you get.
Unlimited design
Using CSS grid coordinates, I realized that practically all designs were now possible through css grid start rows / columns and end rows / columns. Even overlapping layers present no challenge. Power was returned to the designer.
CSS frameworks like Tailwind, Bootstrap and Foundation all use Media Queries to adapt to different screen sizes. These traditional systems have the viewport as their responsive outlet; desktop, tablet and mobile screens.
Parents in charge
Phidelity takes a different approach, and enables the newer and more flexible container queries to take control. Container queries allow the parent container to decide how its children should behave.
Content adapts
The result is that we can design and develop solutions that have a much more dynamic composition and behavior. Using the Phidelity mesh we can forget pixels when designing and coding. We can concentrate on making the content grow and shrink naturally from content break point to content break point. The limit is now literally the designer’s creativity.
Frame
First we draw the big outlines: the semantic elements of the shell every page shares. Typically Header, Left navigation, Main Area, Aside/right navigation and Footer. All using CSS Grid. These areas can be based on fixed or dynamic sizing (or both). For example, the left navigation can be set in pixels, while the main area can be set in fractions.
Page
Second, we assemble the page. The frame's Main Area is a canvas, and on it we arrange the articles that make up a document. This is the level where the whole thing is seen together — every article inside every shell zone, previewed at every width from phone to 4K — and it is where the published breakpoint CSS is written out.
Article
Third, we lay out the article. An article is a grid of Section tiles, each one placed by column span, row span and offset — authored per break point rather than inferred. Tiles can sit side by side, form bento arrangements on wide screens and stack cleanly on a phone. This is the level that decides how the big zones resize, move and reflow as the canvas widens: the orchestration layer.
Section
Fourth, we design the content itself. Inside a Section we position every Content Block — the widgets — column by column, row by row, break point by break point. Here we meet the true responsive magic of Phidelity: the calculated golden ratio grid. Designers can now draw on a much larger and more flexible canvas. Horizontally and vertically, utilising the large screens people have, as well as the mobile displays. Every block takes its size from its parent container's width, not from the browser viewport.
Designing in four spatial levels, we first mark the elementary zones and semantic regions of the frame using fractions. Then we assemble articles onto the page. Then we split each article into Section tiles to see how these big zones may resize, move and reflow on big screens. Then finally zooming in on the content widgets which all get their size by their parent container width, not by the browser viewport. We use the perfectly granular grid for all sizing and spacing.
No more pixels
Using the grid we can forget pixels when designing and coding. We can concentrate on making the content grow naturally from break point to break point.
