きまぐれ引きこもりんご80%

CSS Grid【第2回】タイルレイアウト

web制作

CSS Gridタイルレイアウト

今回はGrid Layoutでつくるタイルレイアウト。
もちろん、floatやflex boxでも実現できますが、
Grid Layoutだと、親要素(グリッドコンテナー)にわずか数行のコードを書くだけで、
インスタみたいなレイアウトや、レスポンシブが簡単に出来ちゃいます。

早速、下記htmlをタイル状にレイアウトしていきましょう。

<ul class="grid-container">
  <li>グリッドアイテム</li>
  <li>グリッドアイテム</li>
  <li>グリッドアイテム</li>
  <li>グリッドアイテム</li>
  <li>グリッドアイテム</li>
  <li>グリッドアイテム</li>
  <li>グリッドアイテム</li>
  <li>グリッドアイテム</li>
  <li>グリッドアイテム</li>
</ul>

まずは、グリッドコンテナーのdisplaygridに。

.grid-container {
  display: grid;
}

repeat()でグリッドアイテムを繰り返し指定

次にgrid-templateを指定していくのですが、
タイルレイアウトみたいに同じ大きさを繰り返し配置するのに
repeat()関数を用いると便利です。

repeat(リピート回数, サイズ)

この関数は、一行内にグリッドアイテムが繰り返す回数とサイズを指定できます。
例えば、インスタグラムのように一行内に3個のアイテムをタイル状にレイアウトしたい場合は下記のようになります。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  gap: 10px;
}

ちなみに、gapプロパティで隣接するアイテム同士の縦と横の間隔を簡単に指定することができ、marginの適用箇所を考えずに済むので便利です。

gap: 縦 横;
row-gap: 縦の間隔;
column-gap: 横の間隔;

See the Pen grid-tile1 by ossan (@g3) on CodePen.

しかし、これだとデバイスサイズを超えるとオーバーフローしてしましい、
サイズの変化には対応していません。

repeat()のサイズにfr、minmaxを使ってみる

そこで、サイズの単位にfr(fraction、比)も使えるので、
repeat(3, 1fr)とすると、グリッドコンテナーの幅いっぱいに
グリッドアイテムを3つずつ均等に配置することが出来ます。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

See the Pen grid-tile2 by ossan (@g3) on CodePen.

また、アイテムの最小値と最大値をminmaxで指定することも出来ます。

minmax(最小値, 最大値)

アイテムのサイズを0〜250pxの間で変化させたい場合は下記のようになります。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 250px));
  gap: 10px;
}

See the Pen grid-tile3 by ossan (@g3) on CodePen.

レスポンシブデザインに対応

上記まで方法だと、デバイスサイズを変化させても、
一行に並べるグリッドアイテムの数を変化させることは出来きず、
レスポンシブなレイアウト変更は出来ませんが、
repeat()の値にauto-fill, auto-fitを用いることで
簡単にレスポンシブデザインが可能になります。

auto-fitは、グリッドコンテナーの幅いっぱいグリッドアイテムを配置し、
repeat()内で指定したサイズになると折り返します。

auto-fillは、グリッドコンテナーにスペースができても、
グリッドコンテナーの幅を埋めることなく折り返されます。

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

See the Pen grid-tile4 by ossan (@g3) on CodePen.

上記CODE PENの幅を変化させてみてください。幅に応じてアイテム数が変化するはずです。

メディアクエリを使わなくても、
グリッドコンテナーにたった2、3行のコードで
レスポンシブを簡単に実現できるなんてとても便利です。

はやくIE11のサポートが切れてベンダープレフィックスなしで
使用できるようになって欲しいですね。