gridstack.js

ui-component layout responsive

gridstack.js는 위젯 레이아웃을 만들기 위한 jQuery 플러그인입니다. 이 라이브러리를 사용하여 드래그 앤 드롭으로 위젯을 자유롭게 배치하고, 그 크기를 조절할 수 있습니다. 반응형 웹 디자인을 지원하여 다양한 화면 크기에 맞춰 자동으로 조정됩니다.

Latest Ver 11.3.0

Homepage

Github

7,905

📢 gridstack.js는 위젯을 드래그 앤 드롭으로 배치하고 크기 조절이 가능한 jQuery 기반 레이아웃 라이브러리입니다.

CDN 다운로드

License: MIT

Asset Type :

전체 버전 보기

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-base-impl.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-base-impl.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-draggable.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-draggable.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-droppable.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-droppable.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-element.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-element.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-gridstack.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-gridstack.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-manager.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-manager.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-resizable-handle.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-resizable-handle.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-resizable.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-resizable.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-touch.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-touch.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack-all.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack-all.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack-engine.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack-engine.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/types.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/types.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/utils.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/utils.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack-extra.css

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack-extra.min.css

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack.css

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack.min.css

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-base-impl.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-draggable.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-droppable.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-element.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-gridstack.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-manager.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-resizable-handle.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-resizable.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-touch.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack-engine.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/types.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/utils.d.ts

Sample Code

⚠️ import 문을 포함한 일부 코드는 jsFiddle에서 정상 실행되지 않을 수 있습니다. 실행 오류가 발생할 경우 코드 복사 후 직접 실행해보세요.

📄 HTML
<div class="grid-stack">
  <div class="grid-stack-item"
       data-gs-x="0" data-gs-y="0"
       data-gs-width="4" data-gs-height="2">
    <div class="grid-stack-item-content">Item 1</div>
  </div>
  <div class="grid-stack-item"
       data-gs-x="4" data-gs-y="0"
       data-gs-width="4" data-gs-height="4">
    <div class="grid-stack-item-content">Item 2</div>
  </div>
</div>

🎨 External CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/1.1.2/gridstack.min.css" rel="stylesheet">

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/1.1.2/gridstack.all.js"></script>

⚙️ JavaScript
$(function () {
  $('.grid-stack').gridstack();
});