Masonry in Materializecss

Masonry images design issue with MaterializeCSS materialboxed class

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>

Materialize css cards with same width but different heights

You might look into using flexbox instead of just a grid it should helps me a lot with these kinds of layouts.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

How to stack cards responsively with Materialize CSS?

Finally found out what I wanted to achieve is possible with column-width & column-gap: https://jsfiddle.net/wdvq57rp/4/

div.card-container {
  -moz-column-width: 23rem;
  -webkit-column-width: 23rem;
  -moz-column-gap: 1rem;
  -webkit-column-gap: 1rem;
}

.card-panel {
  display: inline-block;
  width: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <title>Stacked-Cards Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8">

  <!-- CSS Imports -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css">
  <link rel="stylesheet" href="./css/style.css">

  <!-- Fonts Imports -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>

  <h1>Stacked-Cards Test</h1>

  <!-- Card Container -->
  <div class="row card-container">

    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

    <div class="card-panel">
      <h5 id="title">Title</h5>
      <p id="description">Description</p>
      <div>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
        <a href="#" target="main" class="pink-text text-accent-2">Link!</a><br>
      </div>
    </div>

  </div>
  <!-- Card Container END -->

  <!-- JS Imports -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
</body>

</html>

materialize css hover effect not working properly

Ok, several things wrong here:

1) You haven't included jQuery, but you're trying to initialise materialbox with jQuery. So either include jQuery in your project/pen, or use the vanilla JS initialisation as per the documentation.

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.materialboxed');
    var instances = M.Materialbox.init(elems);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.materialboxed').materialbox();
  });

Here is a codepen using jQuery and fixed up a little.

https://codepen.io/doughballs/pen/zYGowBp

2) If you look at your code, you've got a random image right at the bottom before your scripts:

<div class="masonry tiles">
                     <div class="col s4 tile gallery item">
             <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/1.jpg" alt="Sample Image" class="materialboxed responsive-img">
                             <div class="details">
                                 <span class="title">Title</span>
                                 <span class="description">Description</span>
                             </div>
                     </div>
                 </div>
<!-- What is this image? -->
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/1.jpg" alt="Sample Image" class="materialboxed responsive-img">

3) I took off .responsive-img and instead set .materialboxed to be width: 100%

.materialboxed {
  width:100%;
}

I'm not really sure what you're trying to achieve. Hope this helps in some way.

Masonry in Materializecss

Masonry images design issue with MaterializeCSS materialboxed class

Materialize css cards with same width but different heights

How to stack cards responsively with Materialize CSS?

materialize css hover effect not working properly

Related Topics

Leave a reply