メイソンリー
高さの違うカードを隙間なく積み上げる石垣（メイソンリー）配置。CSS の columns で縦方向に流し込むだけの、Pinterest 風レイアウト。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
仕様書
- 向く場面
- 写真・メモなど高さがばらつくカードの一覧
- Pinterest 風に隙間なく積みたい画面
- 読み順が厳密でなくてよいギャラリー
- 避ける場面
- 左→右の読み順を保ちたい一覧（columns は縦流し）
- 並び順に意味がある検索結果
- 構成要素
- ステージ
- カラム
- カード
- サムネイル
- 題と短文
- 持っている状態
- 通常
- キーボード
操作要素なし（静的な配置）。中に置く部品側でフォーカス移動を確保する
- 支援技術
読み上げ順は DOM 順（上から下へ縦流し）で、見た目の左右順とは一致しない。役割の指定は無く、題と短文がそのまま読まれる
- 動き
なし
目的見せる
デザインの要点
- columns: 2 の縦流しは JS 不要だが、読み順が上→下→次の列になる。並び順に意味がある一覧には使わない
- break-inside: avoid を必ず付ける。無いとカードが列の境目で上下に割れる
- カードの高さ差は 44〜96px 程度に収める。差が大きすぎると片方の列の末尾だけ極端に空く
実装メモ
columns による石垣は上から縦方向へ順に流れます（左列→右列の視覚順にはなりません）。読み順を厳密に左→右へ揃えたい場合は grid-template-rows: masonry（対応ブラウザ）か JS 実装を検討してください。
コード（コピーして使えます）
<div class="stage">
<div class="masonry">
<div class="mcard"><span class="mthumb m1"></span><span class="mtitle">写真ノート</span></div>
<div class="mcard"><span class="mthumb m2"></span><span class="mtitle">旅の記録</span><span class="mtext">短いメモが付くカード。</span></div>
<div class="mcard"><span class="mthumb m3"></span><span class="mtitle">レシピ</span></div>
<div class="mcard"><span class="mthumb m4"></span><span class="mtitle">配色メモ</span><span class="mtext">高さがそれぞれ違っても隙間なく積まれます。</span></div>
<div class="mcard"><span class="mthumb m5"></span><span class="mtitle">スケッチ</span></div>
<div class="mcard"><span class="mthumb m6"></span><span class="mtitle">読書リスト</span><span class="mtext">縦に流し込む方式。</span></div>
</div>
</div>