Arranging differently sized items in a grid has been always a challenge. This is especially true if you want column-based layout because document flow is inherently row-oriented. There is promising solution that uses pure CSS: Flexbox. The only problem is that it only works in modern browsers. To support older versions of IE (9 and lower) or to create complex layouts with more fine-grained control, you need to layout elements using JavaScript.

This definitely isn't something you want to write on your own using vanilla JavaScript, and luckily several libraries exist for this purpose. As a bonus, these libraries usually provide drag-and-drop support. You can choose between Shapeshift (a jQuery plugin), Gridster or Packery, to name just a few. Let's take a closer look at the last one.

How does it work? You choose the layout direction and Packery lays out the items by dropping them into the first slot that fits. (Note that this means that the items may not be laid out in order.) You can specify a gap between items and exclude some elements from the layout. To take one concrete example from the Packery documentation, you can specify that you want to place the items into 80 pixel wide columns, starting from the right.

For this type of library, documentation with images and live examples is better than words. And Packery has really good documentation, including a detailed list of all available options.

Finally, we should mention that Packery is dual-licensed under the GPL for non-commerical use and a paid license for other purposes.