Search code examples
javascripthtmlcssmaterialize

Masonry images design issue with MaterializeCSS "materialboxed" class

I had created masonry images design with pure CSS.
Link here to codepen (only html and css) No materialize CSS and JS


However, I want the effect of `materialboxed` class from materializeCSS

Link to materialbox class from materializeCSS


The problem is that when I add materialboxed class to image, the masonry layout is changed

link to codepen with masonary design + materializeCSS

Expected Result

Actual Result

Expected Result

.gallery {
  position: relative;
  height: auto;
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 2vh;
  grid-auto-flow: dense;
}
.gallery .img {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.gallery .img:first-child {
  grid-column-start: span 2;
  grid-row-start: span 2;
}

.gallery .img:nth-child(2n + 3) {
  grid-row-start: span 2;
}

.gallery .img:nth-child(4n + 5) {
  grid-column-start: span 2;
  grid-row-start: span 2;
}

.gallery .img:nth-child(6n + 7) {
  grid-row-start: span 1;
}
.gallery .img:nth-child(8n + 9) {
  grid-column-start: span 1;
  grid-row-start: span 1;
}

.gallery .img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: brightness(0.5) grayscale(100);
  transition: all 0.3s ease-in-out;
}
.gallery .img:hover img {
  filter: brightness(1) grayscale(0);
}

@media only screen and (max-width: 768px) {
  .gallery {
    grid-template-columns: auto auto auto;
  }
  .gallery .img img {
    filter: brightness(1) grayscale(0);
  }
}

@media only screen and (max-width: 425px) {
  .gallery {
    display: block;
  }
  .gallery .img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 10px 0;
  }
  .gallery .img img {
    display: block;
    filter: brightness(1) grayscale(0);
  }
}
<section class="container">
  <div class="gallery">
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>

  </div>
</section>

Example with design not working with class materializedbox

document.addEventListener("DOMContentLoaded", function () {
  var elems = document.querySelectorAll(".materialboxed");
  M.Materialbox.init(elems);
});
.gallery {
  position: relative;
  height: auto;
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 2vh;
  grid-auto-flow: dense;
}
.gallery .img {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.gallery .img:first-child {
  grid-column-start: span 2;
  grid-row-start: span 2;
}

.gallery .img:nth-child(2n + 3) {
  grid-row-start: span 2;
}

.gallery .img:nth-child(4n + 5) {
  grid-column-start: span 2;
  grid-row-start: span 2;
}

.gallery .img:nth-child(6n + 7) {
  grid-row-start: span 1;
}
.gallery .img:nth-child(8n + 9) {
  grid-column-start: span 1;
  grid-row-start: span 1;
}

.gallery .img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: brightness(0.5) grayscale(100);
  transition: all 0.3s ease-in-out;
}
.gallery .img:hover img {
  filter: brightness(1) grayscale(0);
}

@media only screen and (max-width: 768px) {
  .gallery {
    grid-template-columns: auto auto auto;
  }
  .gallery .img img {
    filter: brightness(1) grayscale(0);
  }
}

@media only screen and (max-width: 425px) {
  .gallery {
    display: block;
  }
  .gallery .img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 10px 0;
  }
  .gallery .img img {
    display: block;
    filter: brightness(1) grayscale(0);
  }
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />

    <section class="container">
      <div class="gallery">
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
      </div>
    </section>

    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Solution

  • You can add full width and height to material-placeholder to get it working.

    document.addEventListener("DOMContentLoaded", function () {
  var elems = document.querySelectorAll(".materialboxed");
  M.Materialbox.init(elems);
});
    .gallery {
  position: relative;
  height: auto;
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 2vh;
  grid-auto-flow: dense;
}
.gallery .img {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.gallery .img:first-child {
  grid-column-start: span 2;
  grid-row-start: span 2;
}

.gallery .img:nth-child(2n + 3) {
  grid-row-start: span 2;
}

.gallery .img:nth-child(4n + 5) {
  grid-column-start: span 2;
  grid-row-start: span 2;
}

.gallery .img:nth-child(6n + 7) {
  grid-row-start: span 1;
}
.gallery .img:nth-child(8n + 9) {
  grid-column-start: span 1;
  grid-row-start: span 1;
}

.gallery .img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: brightness(0.5) grayscale(100);
  transition: all 0.3s ease-in-out;
}
.gallery .img:hover img {
  filter: brightness(1) grayscale(0);
}
.material-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 768px) {
  .gallery {
    grid-template-columns: auto auto auto;
  }
  .gallery .img img {
    filter: brightness(1) grayscale(0);
  }
}

@media only screen and (max-width: 425px) {
  .gallery {
    display: block;
  }
  .gallery .img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 10px 0;
  }
  .gallery .img img {
    display: block;
    filter: brightness(1) grayscale(0);
  }
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />

    <section class="container">
      <div class="gallery">
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
      </div>
    </section>

    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>