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

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

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

サイトのキャプチャ

chewing-grid.css -GitHub

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に設定

top of page

©2017 coliss