Masonry レイアウトの 今までとこれから

自己紹介 - 名前 - 亀ノ上　孝雄 - アカウント - ととかるちょ / totocalcio - 会社 - 株式会社ラクス - ペット - うさぎ、フトアゴヒゲトカゲ、ヒョウモンリクガメ - 一言 - 初めての外部登壇

Masonry レイアウトとは

Masonry - 読み方 - メイソンリー - 意味 - 石畳・石積・煉瓦 - CSSの世界のMasonry - レイアウトを指す - デザインはgridレイアウトに近い - 高さの違うカードが敷き詰められたようなレイアウト

Masonry レイアウト採用例

Pinterest

Tumblr

Civitai

blog

Masonryレイアウト：今まで

flex サンプルコード https://codepen.io/toto calcio/pen/rNgByMV

column-count サンプルコード https://codepen.io/toto calcio/pen/VwOZVQe

grid サンプルコード https://codepen.io/toto calcio/pen/WNBeLjP

grid -

Masonryレイアウト：これから

CSS Grid - CSS Grid Layout Module Level 3 Editor’s Draftに Masonryレイアウトの記述がある。 - Grid Layout の機能なので、grid-column / row プロ パティといった機能や、 span の指定もできる。 - masonry-auto-flowプロパティでアイテムの流れを 制御できる。

span

masonry-auto-flow

Webkit - CSS Gridの機能にするか、それとも代替案を考える か。 - 議論に参加して意見を聞かせてほしい。 - AppleはCSS Gridの一部にすべきと考えている。 - CSS Gridにすべきじゃないという声もあがっている - もしgridにメイソンリーいれたら今よりも gridが複雑になって しまう。 - そもそもメイソンリーという名称もわかりにくいかもし れない。 - ウォーターフォールとかでもいいかも 4/19

Chrome - CSS Gridの一部として実装するのは間違いだと考 える - メイソンリーの課題を解消したい。 - display:masonry（もしくは別のキーワード） - パフォーマンスの問題 - Grid：レイアウト処理前にアイテム配置 - メイソンリー：動的に変化 →事前レイアウト - subgridもあわさったら更に大変 - Gridの機能使える⇔メイソンリーでは使えない 4/30

まとめ - メイソンリー絶賛議論中！ - https://github.com/w3c/csswg-drafts/issues/9041 - https://github.com/w3c/csswg-drafts/issues/9733 - CSS Gridの一部になるか - display:masonryとなるか - masonryという名前は最適なのか - 果たして実装される日は訪れるのか

参考 - メイソンリーレイアウト / MDN - https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout /Masonry_layout - Help us invent CSS Grid Level 3, aka “Masonry” layout / Webkit - https://webkit.org/blog/15269/help-us-invent-masonry-layouts-f or-css-grid-level-3/ - An alternative proposal for CSS masonry / Chrome for Developers - https://developer.chrome.com/blog/masonry - CSS Grid Layout Module Level 3 / W3C - https://drafts.csswg.org/css-grid-3/ - Native CSS Masonry Layout In CSS Grid / Smashing Magazine - https://www.smashingmagazine.com/native-css-masonry-layout- css-grid/

仕舞