Get started with muuri CDN
MIT licensed
Finnish library: Muuri. Builds complex React apps with component architecture, decorator API.
Tags:- grid
- layout
- bin-packing
- filter
- sort
- drag
Stable version
Copied!
How to start using muuri CDN
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/muuri/0.9.5/muuri.min.css">
<script src="https://cdn.cdnhub.io/muuri/0.9.5/muuri.min.js"></script>
<style>
.grid { list-style-type: none; margin: 0; padding: 0; }
.grid-item { width: 250px; height: 300px; margin: 10px; background-color: #f1f1f1; }
</style>
</head>
<body>
<ul id="grid" class="grid">
<li class="grid-item">Item 1</li>
<li class="grid-item">Item 2</li>
<li class="grid-item">Item 3</li>
<li class="grid-item">Item 4</li>
</ul>
<script>
const grid = new masonry( '#grid', {
columnWidth: '.grid-item',
itemSelector: '.grid-item',
percentPosition: true,
gutter: 10
} );
grid.on( 'layoutComplete', function() {
console.log( 'Layout complete.' );
} );
</script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!