メーソンリーMasonry

「メーソンリー（Masonry）」を実装してください。

## これは何か
高さの違う要素を、隙間なく積み上げる配置。石積み（masonry）が名前の由来。

## 使いどころ
- 写真のように、縦横比がまちまちなものを並べるとき
- 高さを揃えるために切り抜きたくないとき

## 実装の要件
- CSS の columns で組み、@supports (display: grid-lanes) の中でだけ display: grid-lanes に切り替える。古い grid-template-rows: masonry は使わない
- grid-lanes 側は grid-template-columns で列を決め、間隔を gap にまとめる。columns 用に要素へ付けた下マージンは @supports not (display: grid-lanes) の側だけに置く（残すと gap と二重になる）
- grid-lanes は項目を順にいちばん短い列へ置くので、おおむね左から右へ並ぶ。columns とは並び順が違い、同じ HTML でもブラウザによって並びが変わる
- display: grid-lanes に対応するのは Safari だけで、26.4 から（iOS を含む）。Chrome・Edge・Firefox の安定版は未対応で、columns のまま組まれる
- 読む順序が縦に飛ぶ。順番に意味があるものには向かない
- CSS の columns で作ると、1列目から順に縦へ流し込まれる。左から右へ読ませたい並びには向かない
- columns で組んだ側では、要素を足すと既存の項目が別の列へ移り、全体が組み替わる。無限スクロールと相性が悪い

## アクセシビリティの要件
- 見た目の位置と DOM の順序が食い違いやすい。読み上げの順序が意味を保つか確かめる
- 順序に意味があるなら、素直にグリッドで揃える

## 参考にする実装
この形を出発点にして、プロジェクトの命名規則・色・余白に合わせて調整してください。

```html
<div class="x-masonry">
  <span class="x-masonry__a"></span>
  <span class="x-masonry__b"></span>
  <span class="x-masonry__b"></span>
  <span class="x-masonry__a"></span>
  <span class="x-masonry__c"></span>
  <span class="x-masonry__a"></span>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-masonry,
.x-masonry *:not([class*="fa-"]),
.x-masonry *:not([class*="fa-"])::before,
.x-masonry *:not([class*="fa-"])::after {
  box-sizing: border-box;
  /* 貼った先の既定の書体に引きずられないようにする。書体が変わると
     文字の幅と高さが変わり、枠のサイズまでずれる */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}

.x-masonry {
  columns: 3;
  column-gap: 7px;
  width: 200px;
}
.x-masonry span {
  display: block;
  margin-bottom: 7px;
  border: 1px solid #cfd4dc;
  border-radius: 5px;
  background: #fff;
  break-inside: avoid;
}
.x-masonry__a {
  height: 34px;
}
.x-masonry__b {
  height: 52px;
}
.x-masonry__c {
  height: 24px;
}
```

## 出力の約束
- HTML と CSS を分けて出す。JavaScript が要るときは素の JavaScript で書き、UIフレームワークは使わない。
- 参考実装がアイコンに Font Awesome のクラスを使っている場合は、プロジェクトで使っているアイコンかインライン SVG に置き換えてよい。
- 上のアクセシビリティ要件を満たす。満たせない箇所があるときは、理由を添えて先に知らせる。
- 色・角丸・余白は既存のデザイントークンがあればそれを使う。無ければ CSS 変数として切り出す。