saikoの日記帳

日記を書いています。

必要に駆られて「grid」の使い方を調べる

CSSプロパティ「grid」について

Gridレイアウト

技術ネタ発表みたいなのがあるので、Gridレイアウトについて話すことにしました。
問題として、ぼくがこれの使い方を完全に忘れてたので、ここでまとめておきます。

CSSプロパティ「grid」は、flexみたいに要素を整列させたりすることができるdisplayの値のひとつです。
flexとは違って、描画サイズを自分で決めて、その中で要素を好きな位置に置いていく変な指定方法を取ります。

親要素に「display:grid」を敷いて、描画サイズを決めます。
その後、子要素に対して「ここに配置する」というプロパティを設定すると、そこに子要素が配置されていきます。

ぼくが使ったことのあるプロパティとしては、

display: gird(基本値:親要素)
grid-template-rows(横列の長さをひとつずつ決める:親要素)
grid-template-columns (縦列の長さをひとつずつ決める:親要素)
grid-row(横列のどこに置くか決める:子要素)
grid-columns(縦列のどこに置くか決める:子要素)

IEはそれ用に別途プロパティが用意されてるのでそれを使う形になります。
詳しい説明とかはW3Cでも見てみりゃ書いてあると思いますよ。

過去に使った案件

こいつを使った案件は、地方のローカルニュースサイトです。
新聞みたいなレイアウトを求められたので普通にflexとかで組んでいたのですが、
システム組み込みで面倒が起きたらしく、「自由に置けるようにしてくれ」と言われたのでgridプロパティを使いました。

使ってみるとそれなりに便利で、同階層のdivを好きな位置にレイアウトできるのでシステム組み込みが必要な場合にもわりと使えるプロパティです。
新聞紙とかの変なレイアウトを求められたら意外と使える便利なヤツ。

ただ、IE用のプロパティはあっても完全には対応できなく、中途半端なレイアウトを実現しようとすると途端に使えなくなったりします。
実際、システム会社から管理画面作成を依頼されたときに使ったら、IEがボロボロになったのでやめました。
普通の表組みとかには、普通にtable使いましょう(という教訓)。
さっきの新聞紙みたいな突き抜けたレイアウトぐらいじゃないと現状使えないと思います。
IEが全部悪い、Chromeなら開発者ツールでも便利に使えるレベルなのに。

明日のネタ用

という話を明日のネタとして使う想定で書きました。
実際、gridレイアウトは使えるヤツだと思います。
ただ、繊細な使い方をしようとすると色々複雑で面倒なので、その辺を許容してくれるデザイナーの元で使ったほうがいいです。
例の案件では、デザイナーが「いやもうそれでいいでしょ十分でしょ」ってなったのでセーフだっただけの話です。

具体的に言うと、一列一列が親要素で指定した横幅、または縦幅になるので細かいレイアウトには向いてないです。
結構ざっぱに、でも変な置き方を指定されてる表組みとかでは使えると思いますよ!!!
そんな機会そうそうないけどな!!!

現状ほとんど使った試しのない値だったりするんですよね、実は(取り扱いは過去の案件ひとつだけ)
まあそのうちまた使いますよ、わりと嫌いじゃなし。
みんなも使おうGrid Layout!

それでは今日はここらでサヨウナラー