レイアウト・構造
メイソンリー
高さの違うカードを隙間なく積み上げる石垣（メイソンリー）配置。CSS の columns で縦方向に流し込むだけの、Pinterest 風レイアウト。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
実装メモ
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>