My goal is to design a responsive layout using the Golden Ratio (1:1.618) that can infinitely nest within itself.
I understand that it may not be practical to have layers upon layers of nesting, but I am fixated on the idea of achieving infinite recursion!
Take a look at the code snippet below:
* { box-sizing: border-box; }
.top {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/**
*
* GOLDEN RATIO LAYOUT
*
**/
/**
* By default, the layout flows from left to right and top to bottom.
* To implement the Golden Ratio Layout, create a container.
* Inside that container, have only two children.
* The first child should have the class .large-side,
* and the second child should have the class .small-side.
* Consider nesting layouts within the small side by adding the
* classes .small-side and .golden-ratio-layout to elements within.
**/
.golden-ratio-layout {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
}
.golden-ratio-layout > .large-side {
flex: 1.618 1 0%;
}
.golden-ratio-layout > .small-side {
flex: 1 1 0%;
}
/* Rest of the CSS styles remain unchanged */
Seems pretty neat so far, doesn't it?
In reality, you may never need more than five nested panels, but let's explore what happens when we introduce a sixth panel:
* { box-sizing: border-box; }
.top {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/**
*
* GOLDEN RATIO LAYOUT
*
**/
/**
* Default layout is left to right, top to bottom
* To use the Golden Ratio Layout, create a container.
* Within that container, have only two childen.
* The first child should have the class .large-side,
* and the second child should have the class .small-side .
* I suggest nesting layouts on the small side, where the
* element would have .small-side and .golden-ratio-layout .
**/
/* Same CSS styles as before */
The attempt failed!
Let's inspect the last .golden-ratio-layout.
We could target this element with:
.golden-ratio-layout > .golden-ratio-layout > .golden-ratio-layout > .golden-ratio-layout > .golden-ratio-layout {
flex-direction: {{ whatever }};
}
Although this solution fixes the issue, it demands adding rules for each depth level we want to support.
So, is it feasible to accommodate an infinite number of nested levels in these rules? Is there a way?