【CSS】CSSでカードレイアウトがどこまで出来るか試してみた


実現したいポイント

カードの中に情報(画像、タイトル、説明、日付、カテゴリ、etc.)が入っている。

カードを何個でも並ばせて表示可能。そして適度に折り返す。

レイアウトイメージ

.card
image
caption
.card
image
caption
.card
image
caption

 

以後適度に折り返して続く 下段下段へ続く

追記:最近は flex を使うと簡単に処理できるようになりました。高さが違う場合も以下のサイトのようにできます。


"flex-direction: column で要素を縦に並べていきます。親ボックスに max-height を指定すると、Masoryレイアウトの完成!"


Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用 | Webクリエイターボックス
https://www.webcreatorbox.com/tech/flexbox-layout


やり方

  • カードの中は、自由にレイアウトするので、カードをdivで囲う
  • カード自体は、divだと上下に並んでしまうので、floatで、左右に並べるようにする。
  • その他に、右側にはみ出ないようにword-wrap:break-word;する。
  • 下方向の伸びについては、heghtで固定するか、overflow でカットする。

補足

column-count では、縦につまりますが、順番は横ではなく、縦に並んでしまうため、ちょっとイメージと違います(100件表示したら、横となりは2番めではなくなる)。今後のCSSの発展に期待でしょうか?

カードの幅のサイズを指定できますが、@mediaを使って 幅を変えればカラム数も変更できます。

その他にも、縦の長さを可変にして、詰められないか試したけれども、実現しているサイトは position:absolute 指定をjavaScriptで実行していたので、CSSでは厳しそうです。java scriptで レイアウトを調整するのも、ブラウザの作業をわざわざしているので、そこまでするほどのメリットはそれほど感じないです。

(padding-bottomで足して、margin-bottomでマイナスにする親タグでoverflow:hiddenでカットする揃え方は、marginにプラス設定ができず、内部の下部がはみ出るようでうまく生きませんでした)。

グリッドは格子をイメージするので、可変を指すには違和感がありますね。

実現例

閲覧者の環境が変わるというイメージで、ブラウザの幅を変えてみてください。(このページだとscrollしてしまいますが)

1jjjjjjjjjjjjjjjjjjjjjjjjjj jjjjjjjjjjjjj kkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkk mmmmmmmmmmmmmmmmmmmmmmmmmmmm mmmmmmmmmmm@
2jjjjjjjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjj kkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkk nnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnn@ kkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkk nnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnn@
3jjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjj kkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkk pppppppppppppppppppppp ppppppppppppppppppp@
4jjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjj kkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkk pppppppppppppppppppppp ppppppppppppppppppp@ kkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkk nnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnn@ kkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkk nnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnn@
5jjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjj kkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkk pppppppppppppppppppppp ppppppppppppppppppp@
6jjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjj kkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkk pppppppppppppppppppppp ppppppppppppppppppp@ kkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkk nnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnn@
7jjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjj kkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkk pppppppppppppppppppppp ppppppppppppppppppp@
8jjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjj kkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkk pppppppppppppppppppppp ppppppppppppppppppp@ kkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkk nnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnn@

コード

    <div class="outline-wrap" 
        style="min-width:200px; background:#eef; padding:5px; margin:5px;">

        <div class="card">
            1jjjjjjjjjjjjjjjjjjjjjjjjjj jjjjjjjjjjjjj
            kkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkk
            mmmmmmmmmmmmmmmmmmmmmmmmmmmm mmmmmmmmmmm@
        </div>
        <div class="card">
            2jjjjjjjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjj
            kkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkk
            nnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnn@
            kkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkk
            nnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnn@
        </div>
        <div class="card">
            3jjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjj
            kkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkk
            pppppppppppppppppppppp ppppppppppppppppppp@
        </div>
        <div class="card">
            4jjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjj
            kkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkk
            pppppppppppppppppppppp ppppppppppppppppppp@
            kkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkk
            nnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnn@
            kkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkk
            nnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnn@
        </div>
        <div class="card">
            5jjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjj
            kkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkk
            pppppppppppppppppppppp ppppppppppppppppppp@
        </div>
        <div class="card">
            6jjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjj
            kkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkk
            pppppppppppppppppppppp ppppppppppppppppppp@
            kkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkk
            nnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnn@
        </div>
        <div class="card">
            7jjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjj
            kkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkk
            pppppppppppppppppppppp ppppppppppppppppppp@
        </div>
        <div class="card">
            8jjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjj
            kkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkk
            pppppppppppppppppppppp ppppppppppppppppppp@
            kkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkk
            nnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnn@
        </div>
        <br clear="all" />
    </div>
    .card{
	word-wrap:break-word;
	float:left;
        overflow: hidden;
        width:120px; 
        height:200px;

	margin:10px;
	padding:10px;
	background-color:#f5f5f5;
    }
    
    @media screen and (max-width: 360px) {
       .card { width: 80px; }
    }

 

 

Delicious にシェア
Digg にシェア
reddit にシェア
LinkedIn にシェア
LINEで送る
email this
Pocket

889 views.



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です