Golden Ratio Page Layout In Pure CSS

Category: CSS & CSS3 , Layout | June 28, 2018
2 Comments
Demo Download
Author:BobbyHo
Views Total:3,499 views
Official Page:Go to website
Last Update:June 28, 2018
License:MIT

Preview:

Golden Ratio Page Layout In Pure CSS

Description:

A CSS only Golden Ratio Page Layout that makes use of CSS grid layout to size a series of elements relative to their previous sibling using the golden ratio.

See also:

How to use it:

Create a series of elements for the page layout.

<div class="container">
  <div class="item a">A</div>
  <div class="item b">B</div>
  <div class="item c">C</div>
  <div class="item d">D</div>
  <div class="item e">E</div>
  <div class="item f">F</div>
  <div class="item g">G</div>
</div>

The required CSS rules.

.container {
  width: 70vw;
  height: 43.2632880099vw;
  border: 0.5px solid #4A4949;
  display: grid;
  grid-template-columns: 61.8% 9.02% 5.58% 23.6%;
  grid-template-rows: 61.8% 9.02% 5.58% 23.6%;
  grid-template-areas: "A B B B" "A E F C" "A E G C" "A D D C";
}
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  color: #F2F2F2;
  font-size: 1.5em;
  font-weight: 700;
  text-shadow: 1px 1px 1px #878787;
  box-sizing: border-box;
  border: 0.5px solid #4A4949;
}
.item.a {
  grid-area: A;
  background-color: #a0ddff;
}
.item.b {
  grid-area: B;
  background-color: #c1cefe;
}
.item.c {
  grid-area: C;
  background-color: #758ecd;
}
.item.d {
  grid-area: D;
  background-color: #7189ff;
}
.item.e {
  grid-area: E;
  font-size: 1.2em;
  background-color: #624cab;
}
.item.f {
  grid-area: F;
  font-size: 1em;
  background-color: #5d2e8c;
}
.item.g {
  grid-area: G;
  font-size: 0.7em;
  background-color: #7a7a7a;
}

See Also:

You Might Be Interested In:

2 thoughts on “Golden Ratio Page Layout In Pure CSS”

    1. Paradigm

      Actually his percentages are roughly correct they are just rounded off. Here’s an explanation of how it works the first sections width needs to be 100% / 1.68, where 1.68 is roughly the golden ratio. That equals 61.803….. The next part gets a bit trickier, you might think that section b just needs to be the width of 100 – 61.803 and while it does its a bit more complicated then that. It actually needs to be the sum of all of the smaller sections width, in this case E F and C. So, in order to get the measurements we need, you need for our four columns and rows, we need to follow the spiral down a bit further. In this case 6 times for our smallest column F and 5 times for our second smallest column E and then last but not least 3 times for column C. You can use the equation 100 / phi^n where n is number of the grid area we are interested in and the 100 represent 100 percent.

      Sorry I just dislike when people just try to discredit someone without giving a reason why or making an attempt at provide some form of proof Just because it might be different from your approach doesn’t necessarily mean its wrong. What I like about this approach is that it’s responsive which is always a plus in web design. That being said Id probably use media queries to rearrange the grid on smaller devices so it still looks like the stereotypical golden ratio layout we are used to.as apposed to a squished version.

      Reply ↓

Leave a Reply