Masonry Layoutの進展とCSS Gridとの関係 ー ライブラリの変遷と今後の展望

アルダグラムでソフトウェアエンジニアとして活動している松田です。

プロダクト開発において、大きさの異なるUI要素を2次元で配置するデザイン要件が発生しました。
そのためのソリューションを検討する中で、Masonry Layoutに関する技術の変遷を知りました。

今回は、その調査をもとに、今後の開発におけるMasonry Layoutの取り扱いについて考えてみました。

---

Masonry Layout とは

Masonry Layoutは、異なるサイズの要素を隙間なく配置するレイアウト手法で、建築の組積造（Masonry）に由来しています。

画像や記事のギャラリー表示に多く用いられ、代表的かつ象徴的なサービスとしてPinterestやTumblrが挙げられます。

ライブラリの変遷

Masonryを実現するために、古くから数多くのライブラリが開発されました。
その一部を取り上げてみます。

jQuery時代

jQueryのPluginとして、多くのライブラリが提供されてきました。
商用ライセンスも多くあり、活発に開発が行われていたことが伺えます。

名称	備考	License	主な関連技術	Developer
Gridster.js	グリッドベースのレイアウト。要素をD＆Dで直感的に配置・リサイズできる。	MIT	jQuery	Ducksboard
Packery	隙間を詰めることに最適化されている。不規則な配置も可能。	商用有り		Metafizzy
Isotope	フィルタリングやソート機能がある。視覚効果も多い。	商用有り	jQuery	Metafizzy
Freewall	レスポンシブ対応。多様なレイアウトをサポート。	MIT
Masonry	レスポンシブ対応。異なるサイズの要素を隙間なく配置可能。	MIT	jQuery	Desandro

TypeScriptや各種フレームワークへの対応

jQueryとともに、その時代に作成されたライブラリの開発は下火となりました。
そして、TypeScriptや各種フレームワークに対応したライブラリが台頭してきました。
それらは、jQuery時代のライブラリをリスペクトしている、と言及されている場合が多いです。

名称	備考	License	主な関連技術	Inspired by
Gridstack	Gridsterの後継ポジション。	MIT	jQuery, TypeScript	Gridster
muuri	軽量で高いカスタマイズ性が特徴。	MIT		Packery, Isotope
React-Grid-Layout	React用のグリッドレイアウトライブラリ。	MIT	React	Gridster, Masonry
vue-grid-layout	Vue用のグリッドレイアウトライブラリ。	MIT	Vue.js	React-Grid-Layout

CSS仕様策定の動向

一方で、 CSS Grid Layout Module Level 3 といったCSSの仕様策定においても、Masonryの実現についての議論が行われています。

CSS Grid Layout の概要

Grid Layoutは、要素を二次元で効果的に配置するためのレイアウト手法です。
対照的に、Flexbox Layoutは一方向（一次元）の配置に最適化されています。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout

https://coliss.com/articles/build-websites/operation/css/grid-for-layout-flexbox-for-components.html

以下、簡単な比較表になります。

	FlexBox	Grid
要素の配置	1次元	2次元
余白の設定	主軸のみ	主軸と交差軸の双方
実装	単純	交差軸の分、propertyが増える

CSS Grid Layout Module Level 3

Grid Layoutは要素を2次元的に配置するという点で、Masonryと類似しています。
このため、CSS Grid Layout Module Level 3では、Masonry LayoutがGrid Layoutの一部として仕様化される予定です。

https://drafts.csswg.org/css-grid-3/

display: masonry として独立させるか否かの議論

現状ではGrid Layoutの拡張とする方向で大方の話が進んでいますが、 display: masonry として display: grid から切り離すべきか否かといった議論も、各所で行われています。

https://ebisu.com/note/css-grid-and-masonry-layout/

https://developer.chrome.com/blog/masonry?hl=ja

https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/

このような背景もあるため、仕様策定は一筋縄ではいかないかもしれません。

各種ブラウザでの導入状況

CSS Grid Layout Module Level 3 が2024年8月現在、Editor’s Draftであるため、本格的な運用はできません。
Safariでのみ試験的に利用可能です。
また、開発者向けFireFoxのオプションで有効化することも可能です。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Masonry_layout

現代の Masonry との向き合い方

ライブラリにおいては、過去に、jQueryの盛衰がパラダイムシフトとなりました。
そして、現代では、Grid Layoutの仕様策定にあたってMasonryの導入が議論されています。
よって、次はCSSの仕様の策定が、次のパラダイムシフトとなることが予見されます。
したがって、既存のライブラリが今後の最適な実装手法とは言えなくなる可能性は高いでしょう。

今後、既存のMasonryライブラリを使用する際は、以下の点を心掛けることで、技術の変遷に対して適切に対応できるかもしれません。

• CSS Grid Layoutの進展を注視する
• 可能であれば、新しい仕様が導入された際に迅速に対応できるよう準備しておく

---

もっとアルダグラムのエンジニア組織を知りたい人は、ぜひ下記の情報もチェックしてみてください！