前回記事「CSSのGridレイアウトをマスターするためのまとめ（基本編：マルチカラムレイアウト） 」では一般的なウェブサイトのレイアウトであるマルチカラムのレイアウトを実際に作成しましたが、今回はそれ以外にも様々なレイアウトをGirdを使って実装していきたいと思います。   最近ではいろんなレイアウトのバリエーションも見られるようになってきています。そんな場面での柔軟性もGridレイアウトの魅力でもありますので、ぜひ使いこなしたいですね。  

Gridレイアウトで作るマス目状グリッドレイアウトのサンプル

マス目状に広がるグリッドレイアウトを実装するのは、その名の通りGridレイアウトは最も適しているのではないでしょうか。他の実装方法に比べて短いコードで表現できてしまいます。アプリなどのランチャーアイコンのような配置にもピッタリですね。 【HTML】※一部省略

<div class="grid-container">
  <div class="gird-item">セル1
  </div>
  <div class="gird-item">セル2
  </div>
  <div class="gird-item">セル3
  </div>
  <div class="gird-item">セル4
  </div>
  <div class="gird-item">セル5
  </div>
    ……
</div>

  【CSS】

.grid-container {
  grid-template-rows: repeat(5, 20%);
  -ms-grid-rows: repeat(5, 20%);
  grid-template-columns: repeat(5, 20%);
  -ms-grid-colums: repeat(5, 20%);
}

  なんと、たったこれだけでマス目状のグリッドレイアウトが作成できてしまいます。同じ値を複数回繰り返す時には、repeatを使ってまとめることが出来ます。第一引数に繰り返す回数を、第二引数に繰り返す要素のサイズをそれぞれカンマ区切りで指定します。数が多い時などに有効ですね。   マス目状のグリッドレイアウトのサンプルはこちらに用意していますので参考に。  

Gridレイアウトで作る変則レイアウトのサンプル

これまでのレイアウトサンプルは規則性のあるものでしたが、Girdレイアウトでは各グリッドアイテムの大きさや並びがランダムになっているような変則的なレイアウトも実装することが出来ます。このような不規則で複雑なレイアウトも列行で一括指定しながらも、敷き詰めるように配置できるのはGirdレイアウトの強みではないでしょうか。 【HTML】※一部省略

<div class="grid-container">
  <div class="gird-item">セル1
  </div>
  <div class="gird-item">セル2
  </div>
  <div class="gird-item">セル3
  </div>
  <div class="gird-item">セル4
  </div>
  <div class="gird-item">セル5
  </div>
  <div class="gird-item">セル6
  </div>
  <div class="gird-item">セル7
  </div>
  <div class="gird-item">セル8
  </div>
  <div class="gird-item">セル9
  </div>
</div>

  【CSS】

.grid-container {
  grid-template-rows: repeat(5, 20%);
  -ms-grid-rows: repeat(5, 20%);
  grid-template-columns: repeat(4, 25%);
  -ms-grid-colums: repeat(4, 25%);
  grid-auto-flow: dense;
  -ms-grid-auto-flow: dense;
}
.grid-item:first-child {
  grid-row: span 2; 
  -ms-grid-row: span 2; 
  grid-column: span 2;
  -ms-grid-column: span 2;
}
.grid-item:nth-child(2) {
  grid-row: span 1; 
  -ms-grid-row: span 1; 
  grid-column: span 1;
  -ms-grid-column: span 1;
}
.grid-item:nth-child(3) {
  grid-row: span 4; 
  -ms-grid-row: span 4; 
  grid-column: span 1;
  -ms-grid-column: span 1;
}
.grid-item:nth-child(4) {
  grid-row: span 2; 
  -ms-grid-row: span 2; 
  grid-column: span 1;
  -ms-grid-column: span 1;
}
.grid-item:nth-child(5) {
  grid-row: span 2; 
  -ms-grid-row: span 2; 
  grid-column: span 1;
  -ms-grid-column: span 1;
}
.grid-item:nth-child(6) {
  grid-row: span 1; 
  -ms-grid-row: span 1; 
  grid-column: span 1;
  -ms-grid-column: span 1;
}
.grid-item:nth-child(7) {
  grid-row: span 1; 
  -ms-grid-row: span 1; 
  grid-column: span 1;
  -ms-grid-column: span 1;
}
.grid-item:nth-child(8) {
  grid-row: span 1; 
  -ms-grid-row: span 1; 
  grid-column: span 4;
  -ms-grid-column: span 4;
}
.grid-item:nth-child(9) {
  grid-row: span 1; 
  -ms-grid-row: span 1; 
  grid-column: span 1;
  -ms-grid-column: span 1;
}

  親要素であるグリッドコンテナを見ると、ここでもグリッドアイテムのサイズ指定にrepeatを使っていますが、もう一点、grid-auto-flowというプロパティにdenseという値を設定しています。この値を設定することで、グリッドアイテム間の空いたスペースを埋めるよう自動的にグリッドアイテムが配置されるようになります。   レイアウトが不規則になる場合はグリッドアイテムの配置を考えたり、設定したりするのが大変です。そんな時にこのような設定をしていると自動的にグリッドアイテムが整列して並んでくれるのでかなり楽になります。   子要素であるグリッドアイテムのサイズと配置を決めていくのですが、ここではシンプルな記述方法として、値にspanを使った方法で記述しています。これは、グリッドアイテムをいくつ繋げて配置するかという指定になります。tableで言うところのcolspan、rowspanという属性に当たります。指定方法もわかりやすく、縦方向（行）を繋げたい場合にはgrid-rowに、横方向（列）を繋げたい場合はgrid-columnにそれぞれ、「span」と繋げるグリッドラインの数を指定します。   変則レイアウトのサンプルはこちらに用意していますので参考に。   いかがでしょうか、慣れるまではちょっと取っつきにくい印象があるGridレイアウトですが、他の手法では実装が難しいレイアウトでも、比較的簡単に出来たりするので便利ですね。必ずしも全てGridレイアウトで組んでいくのは一概にベストとは言えないかもしれませんが、Flexboxレイアウトなどと使い分けることで効率的なコーディングができるのではないでしょうか。   （参考にさせて頂いたサイト） CSS Grid Layout を極める！（場面別編）