desandro / masonry

:love_hotel: Cascading grid layout plugin
https://masonry.desandro.com
16.28k stars 2.11k forks source link

Feature request - respect container's max-width when using fitWidth option #1129

Open yohny opened 4 years ago

yohny commented 4 years ago

Currently the behavior of fitWidth:true option is to adjust the width of container to maximize the number of columns in container. The adjusted width is limited only by the available width of container's parent. This allows to center container using auto margin. It would be nice if fitWidth:true option also respected the container's max-width setting. so if the container has max-width:90% then the adjusted width would not exceed that, even if there is more room in the parent.

joepagan commented 3 years ago

I hope that one day it just works and while I suspect many users may already a workaround, as someone coming at this fresh a few years later for visibility's sake, here is a work around for now:

From desandro's example: https://codepen.io/desandro/pen/nGLvx

  1. isFitWidth: true or fitWidth: true, in latest version needs to be set
  2. columnWidth needs to match the css width of your grid item
  3. create a .grid-wrapper element, wrapping .grid
  4. ensure no max-width or width properties are set on .grid, but margin: 0 auto; is (as per desandero's example)
  5. add css to the wrapper:
    .grid-wrapper {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    }