Hey everyone — Check out Muuri, it’s what’s trending on GitHub this week.

Muuri is an open-source, responsive, sortable, filterable, and draggable grid layouts. It comes with an MIT license so you can use it in your own projects pretty easily.

If you’re familiar with CSS, you know that we already have some really cool grid options in CSS Grid and Flexbox. However, where Muuri shines is with allowing super simple drag and drop, filtering, and sorting on grids.

It’s pretty simple to use too. Here’s all you need:

• Some HTML elements: Below we have two HTML elements

<div class="grid grid-1">
  <div class="item">
    <div class="item-content">1</div>
  </div>
  <div class="item">
    <div class="item-content">2</div>
  </div>
</div>

• Some Basic CSS: Below we add some basic styles to our elements

.grid {
  position: relative;
}
.item {
  position: absolute;
  width: 200px;
  height: 200px;
  line-height: 200px;
  margin: 5px;
  z-index: 1;
}
.item.muuri-item-releasing {
  z-index: 2;
}
.item.muuri-item-dragging {
  z-index: 3;
}
.item-content {
  position: relative;
  border: 1px solid #F44336;
  border-radius: 3px;
  font-size: 25px;
  color: #F44336;
}
.item.muuri-item-dragging .item-content,
.item.muuri-item-releasing .item-content {
  background: #FFCDD2;
}

• A little JavaScript: Just 7 lines of JavaScript is all that’s required for a basic grid

var grid1 = new Muuri('.grid-1', {
  dragEnabled: true,
  dragContainer: document.body,
  dragSort: function () {
    return [grid1]
  }
});

Check out the codepen below for a quick interactive demo of the code above. Feel free to drag around the elements to see how it works:

Check out Muuri on GitHub if you want to integrate it into your next project.

Get your project featured on Codeburst

Got an open source project you’re working on? Want me to write about it? Email me or shoot me a dm on twitter. I’m always looking for cool projects to write about.

Closing Notes:

Thanks for reading! If you’re ready to finally learn Web Development, check out The Ultimate Guide to Learning Full Stack Web Development in 6 months.

I publish 4 articles on web development each week. Please consider entering your email here if you’d like to be added to my once-weekly email list, or follow me on Twitter.

If this post was helpful, please click the clap 👏button below a few times to show your support! ⬇⬇