Ownedmedia ウェブ制作に役立つコンテンツを発信中!

CSS 2018.11.21

CSSのGridレイアウトをマスターするためのまとめ(応用編:グリッド・変則レイアウト)

Tags: ,

前回記事「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 を極める!(場面別編)

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?