The whole grid fabricated using the number 1.618. If you want to know more about how was it curated, visit the Idea.

Row

When you define a container for your webpage, you can add rows in it. The row uses flexbox layout to hold multiple columns within itself. To add a row inside your container, add a .row class to a div like this:

<div class="row"></div>

Columns

In this framework, columns are divided using the number 1.618. Since the number is irrational in nature, the grid cannot be divided/broken into 12-columns or 24-columns layout, which is a general concept of any grid (Most CSS frameworks follow this mechanism).

This might seem different than what we are generally used to. But this grid system will enable a user to divide the container using the golden ratio. To use columns in the .row, you can use a div element with class .phi-col-*, * can be from 1 to 7, base, xl, lg, md, sm and xs.

• .phi-col-0 or .phi-col-base column will occupy 100% of the container.
• .phi-col-1 column is equivalent to the .phi-col-xl column, both can be used alternatively.
• .phi-col-2 column is equivalent to the .phi-col-lg column, both can be used alternatively.
• .phi-col-3 column is equivalent to the .phi-col-md column, both can be used alternatively.
• .phi-col-4 column is equivalent to the .phi-col-sm column, both can be used alternatively.
• .phi-col-5 column is equivalent to the .phi-col-xs column, both can be used alternatively.

Here's how they look in action, try to resize the browser window if you are visiting the documentation from desktop, the columns will acquire the 100% width when the screen width reaches 765px breakpoint.

Below are some of the possible combinations of the columns which can be used in the webpages:

<div class="row">
    <div class="phi-col-2"></div>
    <div class="phi-col-3"></div>
</div>

<div class="row">
    <div class="phi-col-2"></div>
    <div class="phi-col-4"></div>
    <div class="phi-col-5"></div>
</div>

<div class="row">
    <div class="phi-col-2"></div>
    <div class="phi-col-5"></div>
    <div class="phi-col-6"></div>
    <div class="phi-col-6"></div>
    <div class="phi-col-7"></div>
</div>

<div class="row">
    <div class="phi-col-md"></div>
    <div class="phi-col-md"></div>
    <div class="phi-col-sm"></div>
</div>

<div class="row">
    <div class="phi-col-3"></div>
    <div class="phi-col-4"></div>
    <div class="phi-col-4"></div>
    <div class="phi-col-5"></div>
</div>

<div class="row">
    <div class="phi-col-5"></div>
    <div class="phi-col-4"></div>
    <div class="phi-col-4"></div>
    <div class="phi-col-4"></div>
    <div class="phi-col-5"></div>
</div>

You might have a question in your mind, what about equally distributed columns? Is it possible with this framework? No not really possible because of phi's irrational nature. But there is a kind of tweak you can do to achieve this, with the help of utility classes. Read more about it here. You can combine the utility classes functionality to achieve the desired equally distributed layout at a certain point. For example,

<div class="row justify-content-space-between">
    <div class="phi-col-4"></div>
    <div class="phi-col-4"></div>
    <div class="phi-col-4"></div>
    <div class="phi-col-4"></div>
</div>