Fibonacci Layout

I was thinking about the Fibonacci Sequence. If you don’t remember math class, it’s where the addition two numbers create the next number in the sequence.

1, 1, 2, 3, 5, 8, 13, 21, 34

What if you could apply it to a web design layout? If you think of the Fibonacci sequence as relative values, then you can create an initial tile of any size. Put another way, let’s say 64px = 1 unit. It’s look like this:

64px, 64px, 128px, 192px, 320px, 512, 832, 1344, 2176

This will create a set to squares all up against one another, with no space between. In design though, you normally want gutters or margins between the elements. I modified the typical fibonacci function to add a margin to the result. Using a margin of 16px, The new values become the following:

64px, 64px, 144px, 224px, 384px, 624px, 1024px

Here’s some code to play with the margin and tile size to try out for your own designs.

<?php 
// Fibonacci Sequence  
// 1, 1, 2, 3, 5, 8, 13, 21, 34, ... 

$max = 1024; 
$tile_size = 64; // pixels 
$margin    = 16; // pixels 
$a = $tile_size; 
$b = $tile_size; 
echo "margin = {$margin}px\n"; 

fibonacci($a, $b, $margin); 

function fibonacci($a, $b, $margin) { 	
    global $max;
    if ($b >= $max) {
        exit();
    } 

    echo "a = {$a}px,  b = {$b}px\n";

    $result = $a + $b + $margin;
    $a = $b;
    $b = $result;

    echo "result => {$result}px\n";

    fibonacci($a, $b, $margin);	
}