見出し画像

linear-partitioningライブラリを使ったグリッドパッキングレイアウトを作ってみよう

nap5

こんにちわ。nap5です。


linear-partitioningライブラリを使ったグリッドパッキングレイアウトを作ってみたので紹介したいと思います。


Twitterにも投稿してみました。


使用したライブラリは以下になります。


今回のデモは以下の実装をリメイクした形になります。linear-partitioningライブラリを利用した応用例の一つになります。


雰囲気はmasonryレイアウトに似ていますが、パッキングなので、親コンテナの幅を律速にしてパッキングすることが可能になります。


以前、トライしたBinary Space Partitioningを使ったパッキングにどちらかと言えば近いです。

https://note.com/zak5/n/n68284a4dc088


今回のデモでは親コンテナの幅を律速にしてパッキングできることを確かめるために、3カラムレイアウトに適用させてみました。また、768px以下にした場合は、単一カラムレイアウトにシフトさせています。ウィンドウサイズをリサイズすると確認できると思います。


こちらがデモサイトになります。



こちらがデモコードになります。


実績を紹介するページレイアウトでピシッと表示してみるのがいいかもしれませんね。均一なサイズより、ある程度ブロックサイズに差異があったほうが、強弱がついて惹きつけられると思います。


好きな画像URLたくさん用意して遊んでみてもいいかもしれません。


最近では、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。


最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。


また、コースの内容紹介記事は以下になります。


簡単ですが、以上です。



この記事が気に入ったらサポートをしてみませんか？