なぜ必要なのか

植物一覧で園芸初心者は写真・光・水やりを比べます。カードの大きさが違うと一部が目立ち、情報の位置もずれます。写真の元の比率より対等な比較を重視します。

どう解決するのか

正方形の植物写真の下に同じ管理項目を置きます。明るい日差しを選ぶとローズマリーが残り、すべてで3種類に戻ります。カードは行高を共有し、小画面では読む順に並びます。

植物の写真と同じ管理項目を比べる
緑のコーナー

部屋に迎える植物

どのカードでも同じ管理項目を比べられます。

ボストンファーン

ボストンファーン

光
間接光
水やり
適度な湿り気
モンステラ

モンステラ

光
間接光
水やり
表面が乾いたら
ローズマリー

ローズマリー

光
明るい日差し
水やり
表面が乾いたら

表示中: 3

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

どんな考え方なのか

均等グリッドは同じ幅の項目を共通の行に揃えます。情報構造が似ている場合に適します。文章の長さが違うと余白が残り、メイソンリーはその整列より密な配置を選びます。

W3C: CSS Grid Level 1