グリッドレイアウトをCSSで簡単に実現！CSS Grid Layout

グリッドレイアウトとは

グリッドレイアウトはグリッドデザインとも呼ばれWebデザインの手法の一つです。
ページを格子状に分割し、そのマス目と隙間を元に要素の配置を決定するデザイン手法の一つです。
大きな要素などはいくつかのマス目を結合してレイアウトします。

グリッドレイアウトを簡単に実現するCSS Grid Layout

CSS Grid Layoutはグリッドデザインを簡単に実現することができます。
これまでの設定方法では各要素ごとに幅と高さを設定し、マージンなども設定する必要がありました。
CSS Grid Layoutでは各要素の隙間の大きさを設定し、縦に何分割するか、横に何分割するかを設定します。

html

htmlはいたってシンプルです。CSS Grid Layoutはグリッドコンテナとそれに内包されたグリッドアイテムで構成されます。

<div class="grid-container">
  <div class="grid-item">ボックス1</div>
  <div class="grid-item">ボックス2</div>
  <div class="grid-item">ボックス3</div>
  <div class="grid-item">ボックス4</div>
  <div class="grid-item">ボックス5</div>
  <div class="grid-item">ボックス6</div>
  <div class="grid-item">ボックス7</div>
  <div class="grid-item">ボックス8</div>
  <div class="grid-item">ボックス9</div>
</div>

css

cssは主にグリッドコンテナに設定します。まずはdisplayプロパティに「grid」と設定します。
次にグリッドアイテムの隙間を「grid-gap」で設定します。
最後に行と列の数とそれぞれの幅を設定します。
列は「grid-template-columns」で設定します。設定する単位には「px」なども使用できますが、特有の単位として「fr」を使用します。
これらの数値は半角スペースで区切って列の数だけ設定します。「fr」は設定した割合で列の幅を表示します。
下記の例では1:1:1の割合で3等分で表示されます。
行は「grid-template-rows」で設定しpxやfrなどで設定します。

.grid-container{
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px 100px;
}
.grid-item {
background: #ddd;
padding: 15px;
border-radius: 8px;
}

セルの結合

セルの結合は「grid-row」と「grid-column」の二つのプロパティーで設定します。
イメージとしてはテーブルのセルの結合に似ています。それぞれ「span 2」といった形で何マス分結合するかで設定します。

html

<div class="grid-container">
  <div class="grid-item">ボックス1</div>
  <div class="grid-item grid-itemA">ボックス2</div>
  <div class="grid-item grid-itemB">ボックス3</div>
  <div class="grid-item grid-itemC">ボックス4</div>
</div>

css

.grid-itemA{
grid-column: span 2;
}
.grid-itemB{
grid-row: span 2;
}
.grid-itemC{
grid-row: span 2;
grid-column: span 2;
}

CSS Grid Layoutを用いる時の注意点

非常に便利なCSS Grid Layoutですが万能ではありません。
まずブラウザの対応状況ですが、IEはベンダープレフィックスで対応しています。その他のブラウザには標準対応していますが、IEとEdgeに関しては設定できるプロパティなどに違いがある部分があるので、注意が必要です。
またこのレイアウトが向くデザインと向かないデザインがあります。CSS Grid Layoutが向くデザインはセルの隙間が一定で、レイアウトが碁盤の目状に分かれている必要があります。隙間が均等でなかったり、ボックスの幅が一定でない場合はCSS Grid Layoutは向かないので他のコーディング方法を考えましょう。