やってみよう「写真を足す」を押すと、空いているところに詰めて並びます
表示・レイアウトメジャー（よく見る）
メイソンリーレイアウト
Masonry Layout
高さがバラバラの写真やカードを、すき間なく縦に詰めて並べる。Pinterestの画面でおなじみ。
別名Pinterest風レイアウト石積みレイアウトスタッガードグリッドウォーターフォール
どこで使われている？
- よく見かける場所
- Pinterest、写真共有サイト、デザインの事例集
- 使うとよい場面
- 縦横の比率がバラバラの写真を、すき間なく並べたいとき
- 避けたい場面
- 順番に読んでほしい一覧（目の動きが左右にばらける）
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「メイソンリーレイアウト（Masonry Layout）」を実装してください。 動き：複数の列を用意し、高さの違うカードを、そのとき一番短い列の下へ順番に追加していく。横の行はそろえず、縦方向にすき間なく詰める。 使う部品：CSS の columns、または Masonry.js
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | CSS の columns、または Masonry.js |
|---|---|
| iPhoneアプリなら | 標準部品なし（Layout プロトコルで自作） |
| Androidアプリなら | LazyVerticalStaggeredGrid |
| Flutterなら | flutter_staggered_grid_view の MasonryGridView |
| React Nativeなら | @shopify/flash-list の masonry |