masonry

grid layout responsive

Masonryは異なるサイズの要素を効率的に配置できるようにするカスケーディンググリッドレイアウトライブラリです。

Latest Ver 4.2.2

Homepage

Github

16,569

📢 Masonryはウェブページの要素をグリッドパターンで動的に配置するJavaScriptライブラリです。

CDNダウンロード

License: MIT

Asset Type :

すべてのバージョンを見る

https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.js

https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js

Sample Code

⚠️ import 文を含む一部のコードは、jsFiddleで正しく実行されない場合があります。エラーが発生した場合は、コードをコピーしてご自身の環境でお試しください。

📄 HTML
<div id='masonry-container'>
  <div class='item'>Item 1</div>
  <div class='item'>Item 2</div>
  <div class='item'>Item 3</div>
  <div class='item'>Item 4</div>
  <div class='item'>Item 5</div>
</div>

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>

⚙️ JavaScript
var msnry = new Masonry('#masonry-container', { itemSelector: '.item', columnWidth: 100 });

⚡ Top Tools for Developers