[CSS]レスポンシブ対応の賢いアイデア、自在に伸び縮みするカード型レイアウトを実装するスタイルシート -chewing grid

Post on:2015年8月25日

sponsorsr

テキストや画像や動画などをタイル状に配置する、レスポンシブ対応のカード型リストを実装できるCSSのグリッドを紹介します。

「chewing」の名の通り、表示サイズに合わせてチューイングガムのようにカードとグリッドが伸び縮みします。

chewing-grid.cssのデモ

デモページでは、カラム数・溝のサイズ、最小幅・最大幅を設定して、グリッドを試すことができます。

デモのコンテンツ部分は可変になっており、サイズを変更できます。
各カードのサイズ、カラム数などが表示サイズに合わせて、最適化されます。

デモはサイズの可変可能

当スタイルシートを外部ファイルとして記述します。

[html]

...
[/html]

各カードはリストで実装します。

[html]

...

[/html]

ul要素に、最大カラム数・最小幅・最大幅を定義します。