CSS Grid Level 3、通称「Masonry」レイアウトを作るための助力のお願い

 (webkit.org)
2 ポイント 投稿者 GN⁺ 2024-04-24 | 1件のコメント | WhatsAppで共有

  • CSS GridのMasonryレイアウト（レンガ積みレイアウト、またはウォーターフォールレイアウトとも呼ばれる）をCSS Grid Level 3に追加するための提案が進められている

    • Masonryレイアウトは、コンテンツをレンガや石垣のように隙間なく詰めて配置するパターンで、サイズの異なるコンテンツを切り取ったり省略したりせずに配置でき、内容を列単位で下方向に流していく
    • これはJavaScriptなしでCSSだけで実装するのが難しかったレイアウトである

  • CSSでMasonryメカニズムを実装するために、4つのデモを作成してみた

    • 古典的なMasonry/ウォーターフォールレイアウトを作る
    • Gridの多様な列定義機能を活用する
    • Gridの列結合機能を活用する
    • Subgridと明示的配置を使う

  • Gridのさまざまな機能とMasonryを組み合わせると、はるかに創造的で動的なレイアウトを実装できる

    • fr単位、max-content、min-content、minmax()関数などで柔軟かつ多様な列サイズを定義
    • 列結合で特定のアイテムを強調したり、多彩なグリッド構成を作ったりできる
    • Subgridでネストしたグリッドのトラックを親に合わせる
    • 明示的配置でヘッダーなど特定アイテムの位置を指定する

  • Masonryレイアウトを別個のdisplayタイプとして分離すべきだという主張もある

    • CSS GridとMasonryを組み合わせると複雑さが増し、性能に悪影響があるかもしれないという懸念
    • MasonryをGridと分離すれば、それぞれの機能を独立して発展させられる
    • ただし、Masonryを制限のある同一サイズ列レイアウトとしてのみ実装しようという意見もある

  • CSS GridにMasonry機能を含めることには、より多くの利点があると考える

    • CSS Grid Level 3仕様はすでに作成されており、2つのブラウザーエンジンに実装されている
    • 今後、GridとMasonryに同じ新機能を提供できる（例: トラックのスタイリング）
    • MasonryもGridの一種なので、概念的にもよく合っている

  • Webデザイナーや開発者の皆さんの意見を聞きたい

    • MasonryはCSS Gridの一部であるべきか？
    • 多様な列サイズ定義、列結合、配置、Subgridなど、Gridのすべての機能を活用できるようにしたいか？ それとも同一サイズの列だけをサポートするほうがよいか？
    • この機能をどのように活用するか？ どんなレイアウトを作れそうか？
    • 自作のデモがあれば共有してほしい
    • このモデルでは実装しにくいレイアウトはあるか？

  • Masonryという名前は適切でないかもしれない。行をなくすという意味で、grid-template-rows: offのような構文を検討する価値がある。今後名前が変更される可能性があることを念頭に置いてほしい

GN⁺の見解

  • CSS GridにMasonry機能を追加することは、Webレイアウトの表現力を大きく高める意義ある変化だと考える。特に列方向にのみ配置するカラム型グリッドを手軽に実装できるようになるのは魅力的である
  • 一方で、Masonryを別個のdisplayタイプとして分離し、機能を制限しようという主張には賛成しにくい。むしろGridの強力な機能と組み合わせたときにこそ、Masonryレイアウトの活用範囲はさらに広がるように思える
  • ただしMasonryという名前は直感的ではなく、混乱を招く可能性があるため、カラム専用グリッドを表す別の名前を検討してみるのがよさそうだ。grid-template-rows: noneのように「行のないグリッド」という意味を明確に伝えられる構文のほうがよいかもしれない
  • 今回の提案によってCSS Gridがさらに強力なツールになることを期待したい。さまざまなレイアウト事例を試し、積極的に意見を出していくことが重要だと思う

関連記事

1件のコメント

 
GN⁺ 2024-04-24
Hacker Newsの意見

要約:

  • CSSWG とブラウザベンダーの DevRel チームは、2020年から Masonry レイアウトを CSS に正式に組み込む方法について議論している
    • WebKit チームはこの議論を公開し、デザイナーと開発者の意見を募ることにした
    • これは重要な先例となり、あらゆるレイアウトオプションを CSS Grid の一部として扱うのか、それとも必要に応じて新しい CSS Display プロパティを追加し続けるのかという根本的な論争でもある
  • Masonry レイアウトをレンガ積みにたとえるのは面白いが、実際のレンガをそのように積めば構造工学上の惨事になる
  • Megamenu デモは Masonry レイアウトの不適切な使用例で、読む流れを台無しにし、期待を大きく裏切っている
    • 視覚障害のあるユーザーは常に「間違った」順序で読むことになる
    • break-inside: avoid を使ってカラムとして実装すべきだった
  • 新聞デモも同様の理由でやや疑わしい
  • 独立したブロック内の画像やメディアでは、Masonry レイアウトのほうがうまく機能する
  • これらのデモはグリッドレイアウトをベースにしているため、非対応ブラウザでも妥当な固定行形式として表示される
  • Masonry/Waterfall レイアウトの全体的な雰囲気は気に入っている
    • ただし、標準的な Masonry の整列方式ではなく、左右の読み順をより多く保てるレイアウトがあればよい
  • CSS を置き換えられるレイアウトシステムをどう設計すべきかについての考察
    • Qt、Tk、SwiftUI など、実際に実装されているシステムにより優れた点があるのか気になる
    • 開発者により良いインターフェースを提供するにはどうすればよいのか？
  • 自身の写真サイトで JS なしに Masonry 効果を実装した事例の紹介
    • display:inline-block を使って写真をテキストのように扱い、新しい行へリフローさせる
    • Masonry ライブラリより結果に満足している
  • すでに Flexbox や Grid レイアウトがあるのに、CSS にさらに多くの「レイアウト」オプションを追加するのが正しいのか疑問
    • あらゆるレイアウトケースを扱える、複雑でも最終的な制約ベースのシステムを作るほうが、より良い解決策かもしれない
  • WebKit チームが再び公開の場で素晴らしい仕事をしているのを見るのはうれしい