Simplicityを改造してみた part21 css gridで行こう

cssのgridは、何故か口を合わせたようにfirefox、chrome、safariで一斉に実装されました。おかけで最新のモダンブラウザなら表示されるとは思いますが、一部まだスマホのブラウザでは問題があるかも知れません。

can i use: grid

Androidのスマホでも、chromeなら実装されているみたいなので、まぁ多くのブラウザで実装されているととっても良いかと思います。

そこでSimplicityでどのように実装するかですが、例えばのサンプルとして色々作ってみました。

gridのサンプル

See the Pen トップリスト一覧 gridレイアウト カードタイプ2|3列 レスポンシブ by Hidekichi (@Hidekichi) on CodePen.

サンプル: トップリスト一覧 gridレイアウト カードタイプ2|3列 レスポンシブ | codepen


See the Pen grid layout by Hidekichi (@Hidekichi) on CodePen.

サンプル: grid layout | codepen


いずれのサンプルもこの画面サイズではよくわからないのと、レスポンシブでどうなるのかがわからないと思うので、サンプルのリンクから実際のcodepen上の画面で見てもらえるほうが良いかと思います。codepen上でfull page viewで見てもらえれば、実機で確認もできるかと思います。

fullpage viewは、各アドレスの

こんな感じにpenの部分をfullに変更してもらえればアクセスできます。

またこちらのサンプルでは同じページ内で1カラムと2カラムの切り替え及び、gridの切り替えができます。

最初のサンプルでは、通常のリスト一覧をgridに表示して、レスポンシブで、3列から2列、1列と変化します。
次のサンプルでは、body-inの中身、sidebar 新着・人気、.blog-card、関連記事、.footer-widget、シェアボタンをgridにしています。

gridレイアウト

gridは文字通り、ある要素をグリッド型に並べます。flexでも同様のことができますが、flexは例えば何かしらの親要素の中にA、B、Cとあったとして、それぞれが横並びになっている時に、AとCがサイズ固定で、Bは自動でその残りスペースを埋めたり、あるいは、align-items: centerなどで、縦中央に揃えたりする場合にとても便利です。

一方グリッドでは、同じ形をいくつも作る場合にとても便利で、やり方によっては最初のアイテムをグリッド2つ分とか、色々な並べ方ができます。応用が効く分設計が少しややこしいですが、基本的な使い方はとても簡単です。

例えば、

こんな感じです。ulのliの中身が何かしら充実していたら、grid-template-rowsも必要なく、実質、

この3行で、グリッドレイアウトが実現できます。
※ サンプルではgrid-template-rowsが3つまでしか設定していないので、縦4つ目は通常の高さになっています。

この場合、33%を3つに分けて繰り返すということで、同じサイズの要素を並べるのはとても簡単にできます。
もし画面をはみ出さずに入れ切る場合は、calcを利用して、3列ならgap(溝)が2つできるということから、

などにすると行けるかと思います。もしくは簡単に、

これでもいけるかと。


Simplicityで言う所のデフォルトのトップリスト一覧であれば、

こんな感じで書けます。

このような感じです。横並びに、100pxと残り1つを残りいっぱいまで引き伸ばすという感じの意味です。100pxがつまりは、サムネイルになって、次のが記事タイトルとかが入るということなのですが、サンプルでは1つ目の<li>が100pxで、2つ目の<li>が引き伸ばされていますので、実際は、

という感じになるかと思います。.entryは各リストアイテムで、中には、.entry-thumbと.entry-card-contentが入ります。これらが最初は100pxつまり、サムネイルが100pxでコンテンツ部分が残りいっぱいまでという感じなわけです。

こんな感じですね。※ object-fitを一部間違って使っています(笑)

一方、.entry自体をカード型の3列などにする場合は、#listにgridを仕込む必要があります。そうすれば、.entry自体が指定されたgrid-gap(溝の幅)で、並ぶということです。

この#listにgridをぶち込んだものは、サムネイルを大きく表示するために、中身のサムネイルを300×300のもので対応しています。本来Simplicityでは、もっと小さいサイズのサムネイルが読み込まれるはずですが、もしサムネイルを大きくする必要があるのであればそのあたりをカスタマイズする必要があります。

まとめ

今回作成したサンプル(特にjsFiddleの方)は、従来のSimplicityのcssに比べて圧倒的にスタイルの数が少ないと理解してもらえると思います。ただし、IEとか一部環境では使えないようなプロパティも使ってますので、ここらは別途修正する必要もあります。
古いブラウザや対応していないブラウザを無視するならこれぐらいの記述量で書けるということです。

特にfloatなどのように、見た目は同じにできるけれども、高さを持たせるためにはclear-fixを入れないといけないようなものからしてみると、それらがどれだけ面倒くさいかを理解してもらえると思います。なるべく簡単な記述で同じことができるのが良いわけですが、一部ブラウザのせいでそれらができないという状態なわけです。

もしこのページのサンプルが正しく読めないブラウザを利用されているようであれば、これを機会に最新のモダンブラウザに変えるべきです。

gridには他にも色々な機能があって、全部を初めから覚えるのは大変なので、このような繰り返しの並び方を操作できるようにまずなるのが良いかと思います。その後で、1つのgridサイズを超えて様々なレイアウトができるようになったり、レスポンシブの時に3列から2列にしたりというような切り替えができるようになれば応用が色々と効くようになるかと思います。

連続した要素を同じ体裁で並べたい時には特に便利な機能だと思いますので、今後はこういったものがよく使われるようになるかと思います。

スポンサーリンク

シェアする

フォローする