CSS gridで簡単にレイアウト！
| HTML/CSS/PHPこれまで、CSSやらHTMLでレイアウトといえば、table > css ( fload ) > css ( flex ) と変わっていってる感じですよね。
他にもいろいろとあるかもしれませんが、どんどん簡単にレイアウトが組めるようになってますよね。
そんななか、これからのレイアウトにもってこいの「Grid」を勉強してみました。
ってなわけで、勉強したことをご紹介いたします。
気になるのがサポートブラウザ
新しいものを使う時に一番気になる（しないといけない）のが、サポートブラウザですよね。
IEでは使えるの？スマホはどうなの？ってところですよね。
※ Can I use (2017.11.9 現在)
サポートはこんな感じですね。
思ってるよりはサポートサれておりました。
気になるのが、Android4.4のところですかね。.72%の利用なので、そこまで影響ないのかな？日本だけだったらどうなんだろうか。ってところかな。
ところでGridってどんなことができるの
便利だ便利だ言われても、なにが出来るか知らなかったら、便利なのかどうかの判断もできませんよね。
ってことで、簡単にですがどんなことができるかですが
グリッドをつかったレイアウトができる！
画像のようなレイアウトが結構、簡単に組めるんですよね。
こういうのもいけます。
縦をフリーに中身に依存するようなレイアウトも可能その時はそのフリー行が全部伸びます。
固定だといろいろと使いにくいですよね。でも、伸ばせれたら結構助かりますよね。
それでは実際に組んで見る
上で見せた画像のやつを組んでみます。
See the Pen xPRmpN by msys (@msys) on CodePen.
See the Pen gXLVdg by msys (@msys) on CodePen.
| CSS | 使い方 |
|---|---|
| display: grid; | まずはこれを親要素に指定して「grid」を宣言するみたいなの。 IEように「display: -ms-grid;」を指定 |
| grid-gap: 30px; | 要素と要素の間隔の指定。 |
| grid-template-columns | 横並びの幅指定。IE用の指定は間隔も指定する。 |
| grid-template-rows | これは、縦並び用。IE用も上と一緒。 |
| grid-template-areas | これで、レイアウトを指定する。 子要素に指定したエリア名を使ってレイアウト。 |
| grid-area | gridのエリア名をしていする。 |
ザックリと説明しましたが、まぁ表の通りですよね。
他にも何番目から何番目のグリットまでみたいな設定もできます。
そのあたりの詳しいところは参考にさせていただいたサイトがかなり詳しく書いていますので、ご覧になっていただければと思います。
最後に
やってみた限りでは、「Grid」はすごく便利です。
基本的にはグリッドで区切られているようなレイアウトのようなものが多いと思います。ってことは、全部に使えますよね。
IEの補完もJS使わなくていいので、重くなることもないですし（ちょっと面倒くさいけど）、いいかなと思います。
これからは、Gridつかったレイアウトがどんどん増えていくと思われますので、みなさんもちらっと頭に入れておいてもいいかもしれませんね。
