これまではIE対応もそこそこ必要・flexboxでなんとなくこと足りていたのでふわっとした知識だった『CSS Grid』。IE対応も無事なくなったのでこれを機に知識を少しずつ入れて模索中です。
基本的な部分を紹介するので、勉強中の方は一緒に頑張りましょう。
目次
ボックスをグリッドで並べてみる
とりあえず基礎的な感じで、ボックスをこんな感じでグリッドで並べてみます。
See the Pen
CSS Grid by kkdd (@kk8kk)
on CodePen.
基本のcssを使ってみる
まず囲っている親要素である『.parent』に対して『display: grid;』を指定します。|
1 |
display: grid; |
これでグリッドレイアウトが実現できるようになります。
このあとが若干特殊だと思うのですが、親要素に対して子要素の横幅や高さを指定します。
|
1 2 |
grid-template-columns: 100px 100px 100px; grid-template-rows: 75px 75px; |
『grid-template-columns』で横幅、『grid-template-rows』で高さを指定しています。
なぜ同じ数字が3つ、2つと並んでいるの？と思うかもしれませんが、これで『3列2行』の指定になっています。
例えばそれぞれ2番目の数字を変えると2行目・2列目の横幅と高さが変わります。
See the Pen
CSS Grid02 by kkdd (@kk8kk)
on CodePen.
marginにあたる部分は『grid-gap』を使用します。
marginのように3番目の要素はmarginを消して…などを気にせず、隣り合っている要素の間だけで隙間を作ってくれるので、非常に便利です。
独自のサイズ指定の単位『fr』を使ってみる
上記ではpxを使用しましたが、grid独自のサイズ指定の単位『fr』を使用するとレイアウトの幅が一気に広がります。いちいちcalcなどで計算しなければならなかった箇所も、これを使用したら短い記述で済みます。
一部要素はpxで指定、それ以外を埋める
See the Pen
CSS Grid03 by kkdd (@kk8kk)
on CodePen.
|
1 |
grid-template-columns: 100px 1fr 100px; |
左右は100px、あとは中央を自動で調整してくれます。
2:1:1で指定する
See the Pen
CSS Grid04 by kkdd (@kk8kk)
on CodePen.
|
1 |
grid-template-columns: 2fr 1fr 1fr; |
2:1:1をそのままfrにするだけです。指定もわかりやすくて楽ですね。
均等割りを指定する
See the Pen
CSS Grid04 by kkdd (@kk8kk)
on CodePen.
|
1 |
grid-template-columns: repeat(6,1fr); |
均等割りをしたい場合はこうなります。repeatを指定したら必要な列を記述するだけで済みます。
最後だけautoにしたい
See the Pen
CSS Grid05 by kkdd (@kk8kk)
on CodePen.
|
1 |
grid-template-columns: repeat(5,1fr) auto; |
わかりずらいのでこちらを見ていただいた方がいいのですが、5番目までは均等、余ったスペースを埋める、という時には先ほどのリピートに加えて最後にautoを指定します。
これだけで隙間をいい感じに埋めてくれます。
今日のポイント
完全に初歩的な内容ですが、まだまだgridでできることはたくさんあるので今回はここまでにします。今日のポイントです。
- 親要素に『display: grid;』を指定すると、グリッドレイアウトが使用できる
- 『grid-template-columns』で横幅、『grid-template-rows』で高さを指定して調整できる
どちらも親要素に対して指定する - marginではなく『grid-gap』を使用すると、隙間の指定がラクになる
- grid独自のサイズ指定の単位『fr』を使用するとレイアウトの幅が一気に広がる
次はこんな感じのレイアウトの組み方をご紹介したいと思います。
レスポンシブなどのことを考えると意外とつまずいたりもするレイアウトですが、Gridですと少なめのコードで実現できます。それでは
追記：レイアウトの組み方について書きました。
