CSS Grid Layoutの練習で黄金比（フィボナッチ数列）の図形を描く

CSS Grid Layoutが登場してからというもの、スタイリングが格段にやりやすくなった。
ということで練習もかねて、CSS Grid Layoutを使って黄金比（フィボナッチ数列）の例のアレを描いてみる。

黄金比の図形を描く

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

:root {
  --base-width: 640px;
}
.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;
}

grid-template-columnsとgrid-template-rowsでは、--base-widthにframeの比率を掛けて指定している。--base-widthはCSS変数なので、値を変更すれば図形を拡大/縮小できる。
CSS変数の詳しい説明は、以下の記事を参照ください。
grid-columnやgrid-rowでグリッドの位置を決めることもできるが、CSSがわかりづらくなってしまうので、grid-template-areasでそれぞれのグリッド領域に名前を付けて、grid-areaで指定している。

これでかなり読みやすいCSSになると思う。

疑似要素::afterは黄金螺旋を描くためのもの。

参考サイト

• CSS Grid Layout - CSS | MDN
• grid-template-areas - CSS | MDN

以上

written by @bc_rikko