geta1972TweetPocketCheck画像一覧表示するサービスを作っているんですが、ECサイトの商品画像であったり、写真共有サービスであったり、SNSのようなコンテンツのgrid表示方式のような場合に、いくつかやり方があります。縦横のカラム数(セル数)が固定であれば、この方法はブラウザ依存もなく、難なくできると思いますが、やはり経理データのような計算表示に向いているのがtable表示ですね。float方式もともと、divを並べていくいだけのサイトを一昔前によく使われていて、その時の代表方式が「float」方式であったと言えるでしょう。floatは、eolをしっかり見極めて、cssでその閉じフラグをセットしなければいけないので、ページ内での崩れが発生しているサイトは沢山あったため、エンジニア達はあまり使いたがらない方式でした。非常にベタな方式ですが、オブジェクト(コンテンツ)を横並びにできて、画面幅の改行にも柔軟に対応できるinline方式は、一番古くから使われている手法です。inlineはやはり文字列などのフォント表示に向いているため、コンテンツなどのboxを並べる場合、縦幅の統一されている横幅が不規則な場合以外は、見た目があまり美しくなりません。flex方式グリッド表示で、比較的新しく、便利に使えそうなのが、このflex方式ですが、これも、縦幅が可変には向いていません。column方式そこで今回調査しておきたいのは、このcolumn方式で、pinterestの表示に近い見た目が得られます。pinterest※最新バージョンのpinterestはすでにcolumn方式では無くなっていますが、処理速度を高速に保てるという特徴もあるcolumn方式は是非とも極めておきたい手法のひとつです。簡単設定columnの設定は非常に簡単にできます。親要素と子要素の2階層で、子要素が沢山のコンテンツリストになっていれば、その親要素に以下のようなcssを記述するだけで、OKです。最適なカラム数は、1カラムの横幅を下回っていると、サイズの方が優先されます。通常は、サイズ指定をして、カラム数には”auto”を入れておくといいでしょう。これ以外にも、カラム数をマストにしたい場合は、以下のように書いてもいいでしょう。3;こうすると、各コンテンツのサイズではなく、カラム数が優先されます。レスポンシブの場合は、mediaクエリーでサイズ毎にカラム数を切り替えてもいいですが、columnsでサイズ指定した方が扱いやすいと思いますよ。CodePen.サンプルを見てもらうと気がつくと思いますが、カラムをまたいで、コンテンツが分断されています。文字列などの場合は、これでもいいかもしれませんが、画像などを扱う場合は、少しよろしくないです。分断されない設定コンテンツの分断を解消するのも非常に簡単で、コンテンツ部分に以下の設定を加えてあげるだけで構いません。Defaultdisplay:inline-block;1display:inline-block;拍子抜けするぐらい簡単ですよね。コンテンツの縦サイズをランダムに・・・そもそもの目的が縦サイズが可変のコンテンツということなので、サンプルも対応しておきます。CodePen.randomで表示しているので、問題が見つけにくいですが、比較的うまく言っているようにも見えます。サイズが大きく異るコンテンツを並べる場合、各カラムでの個数に偏りが生じる事もあるので、最小コンテンツと最大コンテンツを1.5倍ぐらいにしてあげると、見栄えが良さそうですね。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。