Masonryレイアウト: CSSとJSによる方法

Masonryレイアウトは、Pinterestのように、各アイテムが次に利用可能な縦方向の空間を埋める形で列に配置します。列の幅は同じですが、アイテムの高さは異なります。その結果、行間に無駄な空白のない、密度が高く視覚的に動きのあるGridになります。

ChromeとFirefoxでは、フラグを有効にするとgrid-template-rows: masonryをサポートします。アイテムは列に配置されますが、行のサイズがコンテンツの高さに合わせて決まるため、高さの異なるアイテムを隙間なく詰められます。これは将来のネイティブな解決策です。

CSS Columnsを使うとMasonryに似たレイアウトを作成できます。columns: 3; column-gap: 1remのように指定します。アイテムは各列の中を自動的に上から下へ流れます。ただし、アイテムは行単位ではなく列単位（1列目の上、2列目の上……）に並ぶため、読み上げ順序とアクセシビリティに影響します。

各アイテムにbreak-inside: avoidを設定して、列の途中でアイテムが分割されないようにします。これを設定しないと、高いカードが2つの列に分割され、コンテンツが途中で切れてしまうことがあります。カードのようなコンテンツにCSS Columnsを使用する場合は、必ず追加してください。

Masonry.js（David DeSandro作）は、列の高さを計算し、各アイテムを最も短い列に配置することで、絶対配置されたアイテムを再配置します。Isotopeは、これに並べ替えとフィルタリングの機能を加えたものです。どちらも位置を計算して適用するためにJavaScriptを必要とします。

軽量な方法として、固定列と1pxの行でGridを定義し、各アイテムのコンテンツの高さを行の高さで割った値に基づいて、JSでgrid-row-end: span Nを設定します。アイテムはGridの行の整列を維持しながら、高さを可変にできます。

ウィンドウサイズが変わったり画像が読み込まれたりすると、Masonryの位置は古くなります。ResizeObserverを使ってサイズの変化を検出し、再計算を実行します。サイズ変更が急速に発生している間の過剰な計算を避けるため、再計算にはデバウンスを適用します。

高さが不明な画像があると、読み込み後にMasonryの再計算が発生します。すべての画像に明示的なwidth属性とheight属性を指定し、読み込み前にブラウザーが空間を確保できるようにします。これにより位置のずれを防ぎ、再計算の回数を減らせます。

Masonryレイアウトにアイテムを追加する場合、Grid全体ではなく、影響を受ける列（新しいアイテムが追加された列）だけを再計算します。Masonry.jsのようなライブラリは、追加したアイテムのアニメーションと段階的なレイアウトに対応しており、新しいバッチごとに完全な再レイアウトを行わずに済みます。

JavaScriptで位置を指定するレイアウトでは、視覚的なMasonryの順序とDOMの順序が異なります。Tabの順序が視覚的な位置ではなく、DOMの順序（論理的な読み上げ順序）に従うようにしてください。tabindexは慎重に追加するか、キーボード操作には自然なDOMの流れを使用します。

CSS Columnsは単純でJSも不要ですが、読み上げ順序が行単位ではなく列単位になり、フィルタリングや並べ替えもできません。Grid Masonryは、まだ本番環境で十分にサポートされていません。JS Masonryは機能が充実している一方、位置の計算に伴うサイズと、コンテンツの読み込み後に計算されるまでの描画遅延が増えます。

カードが2つのCSS列に分割されるのを防ぐCSSプロパティは何ですか？

Masonryレイアウトは、CSS Columns（単純ですが列単位の順序）、実験的なgrid-template-rows: masonry（将来性のある方法）、またはMasonry.jsのようなJavaScriptライブラリ（並べ替えとフィルタリングを備えた高機能な方法）で実現できます。それぞれの方法には、簡潔さ、アクセシビリティ、機能性の間にトレードオフがあります。