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 discovered that a count of 13 would be a 12 column grid (1 extra column added for margin). 21 rectangles would be a fitting Fibonacci number, still with 1 rectangle for each column and gap. I continued a 24+2 pattern with 50, 74, 98, 122, 146, and so on - they all gave me mathematically divisible columns, but each with more width and granular resolution.
Fibonacci in Figma
Using a rectangle in Figma that was 13x8 pixels (both Fibonacci numbers), this gave me each break point; 13 columns = 169px. 21 columns = 273px. 50 columns = 650px. 74 columns = 962px. 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.
When I used CSS grid to divide any width by one of my column numbers (13, 21, 50, 74, 98, 122, 146, etc), 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; 21, 50, 74, 98, 122, 146. 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.
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.
Semantic elements
First we draw the big outlines of Semantic elements. Typically Header, Left navigation, Main Area, Aside/right navigation and footer. All using CSS Grid. These areas can be both 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.
Sections
Second, within the Main Area we go on to outline the Sections. Typically some large Zones with Content Blocks. These can flow and restack themselves in different ways as the width of the Main Area increases. All using any combination of fractions, pixels or rem and container queries.
Widgets
Third, we design the content for each block. Inside the widget, 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. 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.
Designing in three spatial levels, we first mark the elementary zones and Semantic regions using fractions. Then using more fractions to split up the main areas into Sections 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.
