プロフィールページなどではユーザアイコンと名前、加えて簡単な説明をつけたカードタイプのレイアウトがよく使われます。ユーザに限らずGitHubのリポジトリリストや商品一覧ページなどでもカード型のレイアウトは便利に使えます。 そんなデザインを提供するのがchewing-grid.cssです。幅や並べる個数なども細かく指定できるグリッドレイアウトが実現します。

chewing-grid.cssの使い方

chewing-grid.cssのデモです。3つ並んでいます。

幅を変更しても3つのままです。

個数を変更しました。ダイナミックに表示が変わります。

実際に動かしているところです。

chewing-grid.cssはカラムの数、隙間、カラムの最小幅と最大幅をダイナミックに指定できます。デザインはレスポンシブになっているので幅が変わってもきちんと揃ったままになっています。

デザインフレームワークの中にはこうしたデザインを提供するものもありますが、カードレイアウトだけを使いたい場合にはchewing-grid.cssが便利ではないでしょうか。

chewing-grid.cssはCSS3製のオープンソース・ソフトウェア（MIT License）です。

chewing-grid - A CSS Grid ideal for card listing design tzi/chewing-grid.css: A CSS Grid ideal for card listing design like tiles, videos or articles listing. Responsive without media-queries.