グリッドデザインの流れにある「カード型デザイン」の記事を読んだ。
ポイントは
の3点。
この手のデザインは割とまえからある気がするが、スマホデバイスとの親和性と相まって地位を確立した感じであろうか。
今後がっつりとしたグリッドデザインをマークアップするのであれば、display: gridを使用したい。
CSSグリッドを使用した実装。
1.container { display: grid; }
各ブラウザベンダーの対応はまだまだこれから。IEも先行実装したものの使用が変わっていき、互換性が怪しいらしい。
とりあえずDemoを作ってみた。
ie11とEdgeで動作を確認。
他のブラウザではDivの羅列となったので導入するのであればPolyfillは必須のよう。
Polyfillはコレ。Demoもあるし
かなり容易に複雑なグリッドレイアウトを作れるし、レスポンシブ化も簡潔に書けそう。
早く使いたいので各ベンダの今後の動向を見たい。現時点では未対応環境が多すぎるし、上記Polyfill内でもプロダクションへの導入は慎重にと言及されている。
でもFirefoxが対応したらPolyfillかましてどこかで使うかも。