WWW無人速報

WebKitがCSS Grid Level 3 通称「Masonry」レイアウトを発明するのを手伝ってくれって言ってるぞ

Masonryレイアウトってなんだ？

>>6 レンガや石の壁みたいに コンテンツがぎっしり詰まったレイアウト

>>14 ああ ピンタレスト的なやつか

今までJavaScriptでしかできなかったけど CSSでネイティブにできるようになるのか

CSS Gridすげえな Float地獄から開放されるわ

CSS Gridの仕様策定って誰でも参加できるの？

>>191 CSSワーキンググループのGitHubが公開されてるから issueに意見書けばいいらしい

Grid Level 1が2017年 Level 2のSubgridが最近使えるようになったばっかっていうのに もうLevel 3の話かよ

>>42 Level 2の仕様が固まる前から次の仕様策定が始まるのは珍しくないよ ブラウザの実装も並行して進むし

現状のMasonryレイアウトって 列幅が均等なシンプルなパターンしかないよな

>>57 CSSでできるようになったら もっとクリエイティブで複雑なレイアウトができるかもな

Mozillaが2020年に最初に提案したんだって

Safari Technology Previewでも去年からデフォルトで有効になってるって

Level 3の仕様はどんな感じなの？

>>78 グリッドコンテナ内で 疑似要素でグリッドを入れ子にできるみたい 親グリッドの行や列のサイズに合わせられるらしい

>>81 入れ子グリッドの一部をまたがって配置できたりするのがいいね

Masonryレイアウトって用語の定義からちゃんとしないとな

grid-template-rows: masonry; ってするだけでいいのか

グリッドといえばIEのサポートはどうなるんだろ

>>98 IE11でもGrid Level 1は一応使えるけど もうIEはお役御免だろ

Firefoxの開発ツールにグリッドのオーバーレイ表示があるの知ってた？

>>105 知らなかった かなり便利そうだな

グリッドはFlexboxと組み合わせて使うのが強力だよな

>>115 Flexboxはコンテンツ主体 グリッドはレイアウト主体って使い分けがいいらしい

display: gridにするだけで子要素がグリッドアイテムになるのね

grid-template-rowsとgrid-template-columnsでトラック（行と列の間の隙間）のサイズを指定するんだっけ

>>135 そうそう frという単位があるのがグリッド特有だよね

Flashの時みたいにいろんなサイトがMasonry layoutになったりして

>>141 見づらいサイトも増えそうだな

z-indexでグリッドアイテムの重なり順も制御できるのか

CSS Gridの登場で不可能だったレイアウトができるようになったよな

>>164 Flexboxとの組み合わせで ほとんどのレイアウトに対応できる

Level 2のSubgridはまだ使ったことないや

>>174 Subgridは入れ子のグリッドを親のグリッドに合わせられるやつだっけ

>>176 そうそう 親のグリッドラインに揃えられるのが便利

Subgridはレガシーブラウザじゃ使えないから注意な

CSS Gridの将来はまだまだ楽しみだな