[CSS]レスポンシブ対応の賢いアイデア、自在に伸び縮みするカード型レイアウトを実装するスタイルシート -chewing grid
Post on:2015年8月25日
sponsors
テキストや画像や動画などをタイル状に配置する、レスポンシブ対応のカード型リストを実装できるCSSのグリッドを紹介します。
「chewing」の名の通り、表示サイズに合わせてチューイングガムのようにカードとグリッドが伸び縮みします。
chewing-grid.cssのデモ
デモページでは、カラム数・溝のサイズ、最小幅・最大幅を設定して、グリッドを試すことができます。
デモのコンテンツ部分は可変になっており、サイズを変更できます。
各カードのサイズ、カラム数などが表示サイズに合わせて、最適化されます。
デモはサイズの可変可能
chewing-grid.cssの使い方
Step 1: 外部ファイル
当スタイルシートを外部ファイルとして記述します。
<head> ... <link rel="stylesheet" type="text/css" href="build/chewing-grid-atomic.css"/> </head>
Step 2: HTML
各カードはリストで実装します。
<ul class="chew-row chew-row--col-4 chew-row--card-min-300 chew-row--card-min-500">
<li class="chew-cell">
<div class="chew-card">1</div>
</li>
<li class="chew-cell">
<div class="chew-card">2</div>
</li>
...
</ul>
ul要素に、最大カラム数・最小幅・最大幅を定義します。
- .chew-row--col-4
- 最大カラム数を4に設定（デフォルトは1-12まで）
- .chew-row--card-min-300
- 一番目で最小幅300pxに設定
- .chew-row--card-min-500
- 二番目で最大幅500pxに設定
sponsors
