こんにちは、ジーニアスウェブの黒木です。
最近急に冷えてきて、朝起きるのが辛くなってきました。。。
自転車で30分かけて通勤していますが、そろそろ防寒対策をしていったほうが良さそうです。
さて、皆さんグリッドレイアウトやってますか〜？
やってるわーって言う方がほとんどですかね。でもそれってinline-blockだったり、floatだったり、flexboxだったりしませんか？
かく言う私もflexboxを使うことのほうがまだ多いです。
なので今回はタイトルの通り、display: grid;を使ったグリッドレイアウトについてご紹介していければと思います。
まずは書いてみる。
まずは実践あるのみ、習うより慣れろです。
親要素にdisplay: grid; と書いただけです。
これだけでは書かない場合と何も変わりません。。。
See the Pen GRIDLAYOUT01 by 173 (@173) on CodePen.0
記述を追加して2列表示にしてみます。
See the Pen GRIDLAYOUT02 by 173 (@173) on CodePen.0
こちらはgrid-template-columnsという記述を追加しています。
この記述で列の幅を指定できます。
今回は1fr 1frと記載していますが、この記述だと1:1で2列表示になります。
※100px 1frとすると1列目が100pxで2列目は要素いっぱいに広がります。
では1fr 1fr 1frだとどうなるか。。。
See the Pen GRIDLAYOUT03 by 173 (@173) on CodePen.0
そう1:1:1の3列にできます。
※flexboxだと33.3333%とかで指定する感じかもしれませんね。
少し慣れてきた？行のサイズ指定は？
先に列幅の指定をしました。
じゃあ行は？となりますね。
こちらもまずは書いてみましょう。
See the Pen GRIDLAYOUT04 by 173 (@173) on CodePen.0
grid-template-rowsを追加しました。
100px 150px 200pxと指定したので、上から順に大きくなっています。
列も行も長さの単位は基本的にCSSで指定できるものなら設定可能です。
calcを使用した記述も可能なので、下のようにすべて正方形で書くことも可能です。
See the Pen GRIDLAYOUT05 by 173 (@173) on CodePen.0
※CODEPEN内のmarginとかのせいで若干正方形になってない(汗)
複数列、複数行に表示してみる
ここまでは1列、1行に1つの要素のレイアウトのものをご紹介してきました。
CSS GRID LAYOUTでは複数列、複数行にまたがった記述が可能ですので、そちらを少しご紹介します。
まずは複数列の場合はこちら
See the Pen GRIDLAYOUT06 by 173 (@173) on CodePen.0
grid-columnを追加しています。
「/」で分けて数字を2つ記述していますが、最初の数字で始まりの位置、そして後の数字で終わりの位置を指定しています。
3列表示で1-2列にまたがった記述をしたい場合は、grid-column: 1 / 3;と記述します。
次に複数行の場合はこちら
See the Pen GRIDLAYOUT07 by 173 (@173) on CodePen.0
grid-rowを追加しています。
指定方法は列と同じです。
4行表示で1-3行にまたがった記述をしたい場合は、grid-row: 1 / 4;と記述します。
そして最後に列と行の組み合わせです。
See the Pen GRIDLAYOUT08 by 173 (@173) on CodePen.0
このように組み合わせを行うことで複数列・複数行にまたがった要素を含むレイアウトが可能になります。
さいごに
今回はほんの触りの部分ではありますが、CSS GRID LAYOUTに実際に触れてご紹介してきました。いかがでしたでしょうか？
個人的には今回使っていませんが余白を一括して指定できるのが便利だな〜と思うので、使うチャンスがあれば使ってみようと思っています。
ただなんでもCSS GRID LAYOUTではなく、構築にあったものを使用していけるといいですね。
CSS GRID LAYOUTまだまだ奥が深いです。
もっと詳しい使い方、記述方法もそのうち紹介していきたいと思います。
それでは。
