Masonry layout shadow get clipping

user_7877099 0
Viewed 117

I am creating a masonry layout with shadow. But unfortunately, the shadow gets clipped as the following snippet. I know that put some bottom padding will fix this, but the content of this card can be change time to time then the height will change according to the content. So the problem here needed a pure CSS method to get rid of bottom clipping in any height and content size.

Thanks

enter image description here

.masonry-cascading-grid-layout {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    
    padding-bottom: 120px; 
    
    .masonry-wrap{
      padding-bottom: 120px; 
    }
  }

  .item-masonry {
    display: inline-block;
    padding: 0em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    
    box-shadow: 0px 30px 60px -30px #757287, 0px 10px 100px -20px rgba(0,0,0,.25);//shadow
    
    border-radius: 5px;
  }

    .masonry-cascading-grid-layout {
      -moz-column-count: 2;
      -webkit-column-count: 2;
      column-count: 2;
    }
<div class="masonry-cascading-grid-layout">
      <div class="masonry-wrap">
                          <div class="item-masonry">
            <h3 class="title">Item 1</h3>
            <div class="content"><p>Ut id cursus ligula, sit amet pharetra nisi. Proin in orci vitae ipsum suscipit laoreet ac at risus. Nullam convallis nibh a tortor volutpat, at maximus justo pharetra. Donec eros tellus, scelerisque at mauris non, mollis mollis velit. <br><br> Praesent fringilla orci vitae ligula ultrices finibus a id risus. Praesent sed quam pharetra, pulvinar diam iaculis, condimentum eros. Duis accumsan rutrum aliquam. Donec id quam odio. Pellentesque euismod lectus eget sem luctus dapibus. Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh pretium in.</p></div>
          </div>
                  <div class="item-masonry">
            <h3 class="title">Item 2</h3>
            <div class="content"><p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.</p></div>
          </div>
                  <div class="item-masonry">
            <h3 class="title">Item 3</h3>
            <div class="content"><p>No</p></div>
          </div>
                  <div class="item-masonry">
            <h3 class="title">Item 4</h3>
            <div class="content"><p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.<br>Ut id cursus ligula, sit amet pharetra nisi. Proin in orci vitae ipsum suscipit laoreet ac at risus. Nullam convallis nibh a tortor volutpat, at maximus justo pharetra. Donec eros tellus, scelerisque at mauris non, mollis mollis velit.</p></div>
          </div>
                  <div class="item-masonry">
            <h3 class="title">Item 5</h3>
            <div class="content"><p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.</p></div>
          </div>
              </div>
    </div>

masonry css html
2 Answers

The reason behind this kind of clipping of box-shadow is because the parent element.

I have came up with the fix for this finally:

UPDATE:

enter image description here

Enjoy the below code:

body {
  padding: 3rem 0;
}

.masonry-cascading-grid-layout {
  margin: 1.5em 0;
  padding: 0;
  column-gap: 1.5em;
  position: relative;
}

.item-masonry {
  display: inline-block;
  padding: 0em;
  margin: 0 0 1.5em;
  width: 100%;
  box-sizing: border-box;
  z-index: -1;

  box-shadow: 0px 30px 60px -30px #757287,
    0px 10px 100px -10px rgba(0, 0, 0, 0.25);

  border-radius: 5px;
}

.masonry-cascading-grid-layout {
  column-count: 2;
}

.quick-fix {
  height: 10px;  
  width: 51%;
  position: absolute;
  bottom: -0.5rem;
  left: -0.5rem;
  z-index: 1;
  background: #ccc;
  box-shadow: 0px 0px 28px 28px #ccc;
  filter: blur(8px);
}
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="masonry-cascading-grid-layout">
      <div class="masonry-wrap">
        <div class="item-masonry">
          <h3 class="title">Item 1</h3>
          <div class="content">
            <p>
              Ut id cursus ligula, sit amet pharetra nisi. Proin in orci vitae
              ipsum suscipit laoreet ac at risus. Nullam convallis nibh a tortor
              volutpat, at maximus justo pharetra. Donec eros tellus,
              scelerisque at mauris non, mollis mollis velit.
              <br /><br />
              Praesent fringilla orci vitae ligula ultrices finibus a id risus.
              Praesent sed quam pharetra, pulvinar diam iaculis, condimentum
              eros. Duis accumsan rutrum aliquam. Donec id quam odio.
              Pellentesque euismod lectus eget sem luctus dapibus. Vestibulum
              sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci
              varius natoque penatibus et magnis dis parturient montes, nascetur
              ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in
              faucibus. Suspendisse porttitor dapibus vehicula. Vivamus
              scelerisque metus lectus, vel cursus nibh pretium in.
            </p>
          </div>
        </div>
        <div class="item-masonry">
          <h3 class="title">Item 2</h3>
          <div class="content">
            <p>
              Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor
              quam. Orci varius natoque penatibus et magnis dis parturient
              montes, nascetur ridiculus mus. Interdum et malesuada fames ac
              ante ipsum primis in faucibus. Suspendisse porttitor dapibus
              vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on
              pretium in.
            </p>
          </div>
        </div>
        <div class="item-masonry">
          <h3 class="title">Item 3</h3>
          <div class="content"><p>No</p></div>
        </div>
        <div class="item-masonry">
          <h3 class="title">Item 4</h3>
          <div class="content">
            <p>
              Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor
              quam. Orci varius natoque penatibus et magnis dis parturient
              montes, nascetur ridiculus mus. Interdum et malesuada fames ac
              ante ipsum primis in faucibus. Suspendisse porttitor dapibus
              vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on
              pretium in.<br />Ut id cursus ligula, sit amet pharetra nisi.
              Proin in orci vitae ipsum suscipit laoreet ac at risus. Nullam
              convallis nibh a tortor volutpat, at maximus justo pharetra. Donec
              eros tellus, scelerisque at mauris non, mollis mollis velit.
            </p>
          </div>
        </div>
        <div class="item-masonry">
          <h3 class="title">Item 5</h3>
          <div class="content">
            <p>
              Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor
              quam. Orci varius natoque penatibus et magnis dis parturient
              montes, nascetur ridiculus mus. Interdum et malesuada fames ac
              ante ipsum primis in faucibus. Suspendisse porttitor dapibus
              vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on
              pretium in.
            </p>
          </div>
        </div>
      </div>

      <!-- Fix to bottom clipper -->
      <div class="quick-fix"></div>
    </div>
  </body>

  <!-- <script src="./script.js"></script> -->
</html>

user_69389690

So, I decided to do this again with myself. I cannot accept Imran answer because it is tricky but not a good code practice. (Thanks for your support Imran, But I start from scratch to build this again.) I found a good article (https://tobiasahlin.com/blog/masonry-with-css/) written by Tobias Ahlin Bjerrome and it gives the knowledge all I need. Change display: inline-block; to flex and remove the outer wrapper was fix the issue. Now it looks cleaner and less

.container {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  /* Your container needs a fixed height, and it 
   * needs to be taller than your tallest column. */
  height: 1000px;
  counter-reset: items;
  padding-top: 50px;
}

.item {
  width: 49%;
  margin-bottom: 2%;
  padding: 15px;
  box-sizing: border-box;
  box-shadow: 0px 30px 60px -30px #757287,
    0px 10px 100px -20px rgba(0, 0, 0, 0.25);
}
@media only screen and (max-width: 700px) {
  .item {
    width: 100%;
  }
  .container {
    display: block;
    height: 100%;
  }
}
<div class="container">
  <div class="item">
     <h3 class="title">Item 1</h3>
    <div class="content">
      <p>Ut id cursus ligula, sit amet pharetra nisi. Proin in orci vitae ipsum suscipit laoreet ac at risus. Nullam convallis nibh a tortor volutpat, at maximus justo pharetra. Donec eros tellus, scelerisque at mauris non, mollis mollis velit. <br><br> Praesent fringilla orci vitae ligula ultrices finibus a id risus. Praesent sed quam pharetra, pulvinar diam iaculis, condimentum eros. Duis accumsan rutrum aliquam. Donec id quam odio. Pellentesque euismod lectus eget sem luctus dapibus. Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh pretium in.</p>
    </div>
  </div>
  <div class="item">
     <h3 class="title">Item 2</h3>
    <div class="content">
      <p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.</p>
    </div>
  </div>
  <div class="item">
     <h3 class="title">Item 3</h3>
    <div class="content">
      <p>No</p>
    </div>
  </div>
  <div class="item">
     <h3 class="title">Item 4</h3>
    <div class="content">
      <p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.<br>Ut id cursus ligula, sit amet pharetra nisi. Proin in orci vitae ipsum suscipit laoreet ac at risus. Nullam convallis nibh a tortor volutpat, at maximus justo pharetra. Donec eros tellus, scelerisque at mauris non, mollis mollis velit.</p>
    </div>
  </div>
  <div class="item">
     <h3 class="title">Item 5</h3>
    <div class="content">
      <p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.</p>
    </div>
  </div>
</div>

user_78770990
Related