Overview

Radius is built using an asymmetric grid system based on the principle of the golden ratio. Asymmetric grids differ significantly from symmetric, n-column based approaches popularised by CSS frameworks such as Bootstrap or 960 grid.

Symmetric grids are divided into N columns of equal widths, for example in case of a 12 column grid, the width of each column would be 8.33% of the parent. That is not the case however in an asymmetric grid, where the widths are based on the number of columns and the ratios between each column. See the example below between two columns of "size" 1 in both symmetric and asymmetric grid.

Thinking in asymmetric grids

Ratios

Using an asymmetric grid requires a different way of thinking, thinking not in terms of tables and spanning columns but rather relations between each elements. Some layout systems use similar techniques and refer to them as 'weight based', with 'heavier columns' taking more space. This analogy, although not 100% accurate in our case, might a good stepping stone to understanding ratio based layouts.

One counter intuitive thing which is worth highlighting is the fact that higher numbers don't necessarily change the size of the columns they generate. The column sizes are determined by the ratio between the numbers, not the magnitude of the number. Compare the following 3 cases, each using different numbers to define the same ratio.

Nested grids

The benefit of asymmetric grids becomes clear when we start nesting grids. Because the columns use ratio based sizing, not fixed sizing, nested asymmetric grids are a lot easier to reason about. Consider a nested grid scenario in a symmetric system:

Even though we just said that symmetric grid systems use fixed sizing to define column widths, we can see this is not the case when the grids are nested. Unit of size 1, has a different size to a unit of size 1 nested inside a 4 and a different size to a unit nested inside a 7. This behaviour can be very counter intuitive if our mental model of the grid system is formed around the idea of fixed column widths.

Now consider the same scenario in an asymmetric system:

The mental model of an asymmetric grid system hasn't been broken because we never expected the columns of size 1 to be of equal width, we expected them to be relative to other columns inside the parent. In the above example, the unnested unit of size 1 was relative to two other columns, 4 and 7. The nested units of 1 don't have any siblings and therefore automatically span the entire available space. Consider the more complex example below which demonstrates what happens when nested columns have siblings they have to share the available space with:

Wrap up

Asymmetric grid systems allow designers to design components independently of the space in which they live thus making them more flexible and easier to reuse in different context. It takes us also a step closer towards building webpages without considering the viewport and instead relying on the browser itself to lay the components automatically in the given space and, one day, choose an appropriate layout with the help of things like container queries or minmax functions found in CSS Grid.