masonry

grid layout responsive

Masonry는 CSS 그리드 레이아웃을 보다 유연하게 구현할 수 있게 도와주는 JavaScript 라이브러리입니다. 이 라이브러리는 다양한 크기의 요소들을 물 흐르듯이 배치하여, 빈 공간 없이 깔끔하게 정렬할 수 있도록 도와줍니다.

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