Muuri: Layout center container

[claudchan]

Hi,
Is there an option to make the container align to center?

[niklasramo]

I'm not quite sure what you mean. Muuri does not position the container element at all, just the items inside it.

[claudchan]

Here is the example I am looking for:
https://isotope.metafizzy.co/v1/custom-layout-modes/centered-masonry.html

[niklasramo]

Oh, that's what you mean. Well, there is no such option unfortunately. However, building that same effect with Muuri should not be too difficult. You just need to calculate the total width of the visible items and set the container's width to match that width if it is smaller than the container's normal width. And set the container's left and right margins to auto.

The simplest way would be extending the Muuri.prototype._refreshDimensions private method, which is responsible for calculating the container element's dimensions whenever necessary.

var origRefreshDimensions = Muuri.prototype._refreshDimensions;
Muuri.prototype._refreshDimensions = function () {
  // Do custom manipulation here...
  return origRefreshDimensions.call(this);
};

[narrowtux]

I can offer an implementation that does this:

class MyGrid extends Grid {
  layout(instant, opts) {
    super.layout(instant, opts)

    // calculate rightmost edge of all items
    let layoutWidth = 0
    this.getItems().forEach(item => {
      let {left} = item.getPosition()
      let rightEdge = left + item.getWidth()
      layoutWidth = Math.max(layoutWidth, rightEdge)
    })

    let elementWidth = this.getElement().clientWidth
    let offset = elementWidth / 2 - layoutWidth / 2

    // translate grid by `offset` pixels to the right so it's all centered
    this.getElement().style.transform = `translateX(${offset}px)`
  }
}

Note that this will need to be modified if you're using a right-aligned layout. It's also a bit jittery when it's resized, which can be solved by setting transition: transform

[evbrew]

I can offer an implementation that does this:

class MyGrid extends Grid {
  layout(instant, opts) {
    super.layout(instant, opts)

    // calculate rightmost edge of all items
    let layoutWidth = 0
    this.getItems().forEach(item => {
      let {left} = item.getPosition()
      let rightEdge = left + item.getWidth()
      layoutWidth = Math.max(layoutWidth, rightEdge)
    })

    let elementWidth = this.getElement().clientWidth
    let offset = elementWidth / 2 - layoutWidth / 2

    // translate grid by `offset` pixels to the right so it's all centered
    this.getElement().style.transform = `translateX(${offset}px)`
  }
}

Note that this will need to be modified if you're using a right-aligned layout. It's also a bit jittery when it's resized, which can be solved by setting transition: transform

Thanks for posting, i'm having a little trouble figuring out how to actually hook this up - you don't have a full example by chance do you?

[narrowtux]

drop this snippet in your code and instead of using the Grid class directly, use MyGrid (or whatever you renamed it to).