Golden ratio with CSS Grid

by bc_rikko

HTML

<div class="golden-ratio">
  <div class="section one">13x13</div>
  <div class="section two">8x8</div>
  <div class="section three">5x5</div>
  <div class="section four">3x3</div>
  <div class="section five">2x2</div>
  <div class="section six">1x1</div>
  <div class="section seven">1x1</div>
</div>

CSS

:root {
  --base-width: 600px;
}
.golden-ratio {
  width: var(--base-width);
  height: calc(var(--base-width) * (13 / 21));
  display: grid;

  /* 図の比率
   * columns: 13 : 2 : 1 : 5
   * rows   :  8 : 1 : 1 : 3
   */
  grid-template-columns: 
    calc(var(--base-width) * (13 / 21))
    calc(var(--base-width) * (2  / 21))
    calc(var(--base-width) * (1  / 21))
    calc(var(--base-width) * (5  / 21));
  
  grid-template-rows:
    calc(var(--base-width) * (8 / 21))
    calc(var(--base-width) * (1 / 21))
    calc(var(--base-width) * (1 / 21))
    calc(var(--base-width) * (3 / 21));
  
  grid-template-areas:
    "a b b b"
    "a e f c"
    "a e g c"
    "a d d c";
}

.section {
  border: 1px solid;
  position: relative;
}
.section::after {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid;
  width: 100%;
  height: 100%;
}

.section.one {
  grid-area: a;
}
.section.one::after {
  border-radius: 100% 0 0 0;
}

.section.two {
  grid-area: b;
}
.section.two::after {
  border-radius: 0 100% 0 0;
}

.section.three {
  grid-area: c;
}
.section.three::after {
  border-radius: 0 0 100% 0;
}

.section.four {
  grid-area: d;
}
.section.four::after {
  border-radius: 0 0 0 100%;
}

.section.five {
  grid-area: e;
}
.section.five::after {
  border-radius: 100% 0 0 0;
}

.section.six {
  grid-area: f;
}
.section.six::after {
  border-radius: 0 100% 0 0;
}

.section.seven {
  grid-area: g;
}
.section.seven::after {
  border-radius: 0 0 100% 0;
}