Golden Ratio Page Layout In Pure CSS

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


Golden Ratio Page Layout In Pure CSS


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>

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;

You Might Be Interested In:

One thought on “Golden Ratio Page Layout In Pure CSS

Leave a Reply