Muuri: Item Resize (FEATURE)

[discobanco]

Being able to resize elements within the grid.

[niklasramo]

This is something Muuri's API can already do with little effort:

function resizeItem(item, width, height) {
  var el = item.getElement();
  var grid = item.getGrid();
  el.style.width = width + 'px';
  el.style.height = height + 'px';
  grid.refreshItems(item);
  grid.layout();
}

Here's a little more refined example with some CSS transitions (double-click the items): https://codepen.io/niklasramo/pen/eYmLQXO

If you're wishing for something like resizing by dragging the item from it's corner then you have to do the dragging part yourself. It's a bit of work, but should be pretty trivial. But the actual resizing part is as simple as the code above.

[discobanco]

Thank you for your reply. I did refer to drag to resize. I understand if that's not in the current scope of the tool, but I thought it would be a good feature request even if for a distant future. Thank you!

[niklasramo]

@discobanco yep, thanks for the request, but I'm pretty sure this feature is best left outside Muuri's core (at least for the time being).

[spencercap]

in case this is helpful or educational for anyone else - a little resize-able item demo ✌🏼
https://codepen.io/spencercap/pen/BaoMJVz

[71GA]

Try this: https://gridstackjs.com/