メイソンリーレイアウトとは

高さの異なるカードを、隙間なくレンガ状に敷き詰めて並べるレイアウト。

概要

高さの異なるカードを、上下の隙間ができるだけ空かないようにレンガを積むように敷き詰めて並べるレイアウトです。Pinterest の画像一覧で広く使われたことから「Pinterest 風レイアウト」とも呼ばれます。CSS の columns プロパティを使うと、JavaScript を使わない簡易的なメイソンリーレイアウトを少ないコードで実現できます。

別名

表記ゆれ：メイソンリーレイアウト、masonry、マソンリー、Pinterest 風レイアウト

英語の発音に近い「マソンリー」と表記されることもあります。

AI への伝え方

「メイソンリーレイアウトで並べて」で通じます。CSS の columns プロパティを使う簡易版は実装が少なく済みますが、カードが縦方向に上から下へ並んでから次の列に移る（横方向ではなく縦方向の順序になる）ため、記事の投稿順を横方向に見せたい場合には向きません。投稿順を厳密に保ちたい場合は「順序を保ったまま並べて」と伝え、JavaScript で高さを計算する実装（Masonry.js 等のライブラリを使う方法）を検討してもらってください。

似たパーツとの違い

すべてのマスの大きさをそろえる「カードグリッド」や、あらかじめ決めた大小のタイルを組み合わせる「ベントグリッド」と違い、メイソンリーレイアウトはカードの高さがコンテンツ量によってまちまちになる点が特徴です。

デモ

コード

HTML

<div class="masonry-demo">
  <div class="masonry-demo__card masonry-demo__card--1">1</div>
  <div class="masonry-demo__card masonry-demo__card--2">2</div>
  <div class="masonry-demo__card masonry-demo__card--3">3</div>
  <div class="masonry-demo__card masonry-demo__card--4">4</div>
  <div class="masonry-demo__card masonry-demo__card--5">5</div>
  <div class="masonry-demo__card masonry-demo__card--6">6</div>
  <div class="masonry-demo__card masonry-demo__card--7">7</div>
  <div class="masonry-demo__card masonry-demo__card--8">8</div>
  <div class="masonry-demo__card masonry-demo__card--9">9</div>
</div>

CSS

.masonry-demo {
  columns: 3;
  column-gap: 8px;
  font-family: sans-serif;
  font-weight: bold;
  color: #ffffff;
}

.masonry-demo__card {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  border-radius: 8px;
  background: #0017c1;
  break-inside: avoid;
}

.masonry-demo__card:nth-child(3n + 2) {
  background: #333333;
}

.masonry-demo__card:nth-child(3n) {
  background: #666666;
}

.masonry-demo__card--1 {
  height: 70px;
}

.masonry-demo__card--2 {
  height: 110px;
}

.masonry-demo__card--3 {
  height: 60px;
}

.masonry-demo__card--4 {
  height: 130px;
}

.masonry-demo__card--5 {
  height: 80px;
}

.masonry-demo__card--6 {
  height: 100px;
}

.masonry-demo__card--7 {
  height: 60px;
}

.masonry-demo__card--8 {
  height: 90px;
}

.masonry-demo__card--9 {
  height: 120px;
}