on:2016年4月26日sponsors去年くらいまでは、こういったレスポンシブ対応のMasonryレイアウトはJavaScriptで実装するのが主流でした。jQueryのプラグインも数多くリリースされています。そんなレスポンシブ対応のMasonryレイアウトをスクリプト無し、CSSで簡単に実装できるdrivewayを紹介します。-GitHubdrivewayの特徴drivewayのデモdrivewayの使い方drivewayの特徴drivewayは、レスポンシブ対応のMasonryレイアウトをピュアCSSで実装するMITライセンスのCSSです。拡張性も豊か実装にはFlexboxが使用されており、2016年1月12日にIEの古いバージョンのサポートが終了し、実質IE11+となった現在、多くのプロジェクトで利用できるでしょう。ちなみに、2017年4月11日にVistaのサポートも終了します。ついてdrivewayのデモデモではdrivewayで実装されたMasonryレイアウトの動作を確認できます。デモページ各パネルのレイアウトもさまざまなものが用意されていますが、インタラクション用のコンポーネントもいくつか実装されています。パネルが回転する「Flip」。Flipそのパネルのみにフォーカスがあたる「Focus」。外部ファイル当スタイルシートを外部ファイルとして記述します。href="css/driveway.min.css"/></head>テーマ用のMixinもstylusに用意されています。drivewayの構造drivewayは異なるタイプのブロックで構成されています。カーテンコンテナの中にパネルを配置し、それが集まったり、区切りがあったりします。HTML基本的なHTMLの構造です。content.</p></div></div>「dw」がdrivewayのレイアウト用コンテナで、「.dw-pnl」がパネル、「.dw-pnl__cntnt」がパネルのコンテンツ、フォーカスなどは「.dw-pnl--fcs」を利用して実装します。-GitHubのusageをご覧ください。