メイソンリーレイアウト Masonry Layout

高さの異なる要素を隙間なく詰めて配置するレンガ積み型レイアウト。

使用場面: 写真ギャラリーやカード型コンテンツで高さが不揃いな場合 採用例: Pinterest, 500px

ライブデモ

写真 A
写真 B
写真 C
写真 D
写真 E
写真 F
写真 G
写真 H
写真 I

ソースコード

<div class="demo-masonry" id="demoMasonry">
  <div class="demo-masonry-item" style="--h:120px;">写真 A</div>
  <div class="demo-masonry-item" style="--h:180px;">写真 B</div>
  <div class="demo-masonry-item" style="--h:140px;">写真 C</div>
  <div class="demo-masonry-item" style="--h:200px;">写真 D</div>
  <div class="demo-masonry-item" style="--h:110px;">写真 E</div>
  <div class="demo-masonry-item" style="--h:160px;">写真 F</div>
  <div class="demo-masonry-item" style="--h:130px;">写真 G</div>
  <div class="demo-masonry-item" style="--h:190px;">写真 H</div>
  <div class="demo-masonry-item" style="--h:150px;">写真 I</div>
</div>
.demo-masonry {
  columns: 3; column-gap: 12px;
}
.demo-masonry-item {
  break-inside: avoid; margin-bottom: 12px;
  height: var(--h, 120px); border-radius: 10px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--ui-primary) 15%, #fff),
    color-mix(in srgb, var(--ui-primary) 30%, #fff));
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: var(--ui-primary);
  border: 1px solid color-mix(in srgb, var(--ui-primary) 15%, transparent);
  transition: transform 0.2s, box-shadow 0.2s;
}
.demo-masonry-item:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--ui-primary) 20%, transparent);
}

AIプロンプト

Basic 
メイソンリーレイアウト（Pinterest風）をHTML/CSSで作ってください。高さの異なる要素を隙間なくレンガ積みのように配置します。
Custom 
以下の仕様でメイソンリーレイアウトを実装してください。
- CSS columnsを使ったピュアCSS実装
- レスポンシブ（モバイル1列、タブレット2列、PC3列）
- プライマリカラー: #2563eb
- ホバーで拡大エフェクト
- 画像読み込み完了後にレイアウト再計算
- グラデーション背景のプレースホルダー
Advanced 
アクセシビリティ対応のメイソンリーレイアウトを実装してください。
- CSS Grid masonry（grid-template-rows: masonry）対応
- フォールバック（JS実装）の用意
- ResizeObserverでリアルタイムなレイアウト調整
- 画像遅延読み込み（loading="lazy"）
- prefers-reduced-motion対応
- フォーカス順序の論理性を確保
- IntersectionObserverで画面外要素の軽量化
- ライトボックス連携対応
← カタログに戻る