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!

All versions