なぜ必要なのか

図書館検索で読者は書名・著者・貸出状況を比べます。カードで項目が散らばると探しにくくなります。表紙を大きく見せるより同じ項目の素早い比較が重要です。

どう解決するのか

各行の書名・著者・状態を同じ位置に置きます。Austenで1冊が残り、貸出可能を選ぶと貸出中の本を除きます。一致しない検索には戻し方を示します。リセットで4冊へ戻ります。

実在の書名を検索し、架空の貸出状況を比較
小さな図書館

次に読む一冊

検索結果: 4

  • Pride and Prejudice

    Jane Austen

    貸出可能

  • Frankenstein

    Mary Shelley

    貸出中

  • Alice’s Adventures in Wonderland

    Lewis Carroll

    貸出可能

  • A Room of One’s Own

    Virginia Woolf

    貸出可能
実在の書名ですが、貸出状況は架空です。

本文内の架空のデモです。リセット・再読み込みで初期状態に戻ります。

どんな考え方なのか

リストは比較する内容を繰り返す行に置きます。文字の走査に適し、画像中心の選択には均等グリッドが向く場合があります。長い題名も著者・状態を失わず折り返します。書名は実在し、貸出状況は架空です。

W3C: CSS Grid Level 1