Golden ratio with CSS Grid Layout

golden-ratio-with-css-grid-layout.markdown

Golden ratio with CSS Grid Layout

A Pen by Damon Sicore on CodePen.

License.

index.html

<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>

style.scss

$width: 70vw;
$height: $width / 1.618;
$border: 0.5px solid white ;

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  
  font-family: "Roboto Mono", monospace;
}

.container {
  width: $width;
  height: $height;
  border: $border;
  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: white;
  font-size: 1.5em;
  font-weight: 700;
  box-sizing: border-box;
  border: $border;
  
  &.a {
    grid-area: A;
    background-color: black;
  }
  &.b {
    grid-area: B;
    background-color: black;
  }
  &.c {
    grid-area: C;
    background-color: black;
  }
  &.d {
    grid-area: D;
    background-color: black;
  }
  &.e {
    grid-area: E;
    font-size: 1.2em;
    background-color: black;
  }
  &.f {
    grid-area: F;
    font-size: 1em;
    background-color: black;
  }
  &.g {
    grid-area: G;
    font-size: 0.7em;
    background-color: black;
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:700" rel="stylesheet" />