CSS Masonry UI not working properly using `column-count` and `box-shadow`

The Below is my code of a Masonry UI, I am using with pure CSS

This works well if there are more than 4 cards but if I use it with below 4 cards the column-count: 3; does not work well.

body{    height:1000px;  }    ul {      list-style: none;      -moz-column-count: 3;      -webkit-column-count: 3;      column-count: 3;      -moz-column-gap: 1em;      -webkit-column-gap: 1em;      column-gap: 1em;      padding: 0px 4px 4px 4px;      margin-top: -10px;      display: inline-block;      width: 100%;      margin: 0px;        }    li {      width: 100%;      display: inline-block;      box-shadow: none;      background: transparent;      box-sizing: border-box;      -moz-box-sizing: border-box;      -webkit-box-sizing: border-box;      margin: 2%;  }    li div {      border-radius: 3px;      background-color: #f4faff;      box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.84);      margin-top: 1em;      cursor: pointer;  }    li div img{      height: auto;      width: 100%;      vertical-align: middle;      border: 0;  }

<ul>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>  </ul>  <br><br><br>  BUT THIS WORKS IF THERE IS MORE THAN 4 IMAGES    <ul>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>  </ul>

Tried Soluition:

body{    height:500px;  }    ul {      list-style: none;      -moz-column-count: 3;      -webkit-column-count: 3;      column-count: 3;      -moz-column-gap: 1em;      -webkit-column-gap: 1em;      column-gap: 1em;      padding: 0px 4px 4px 4px;      margin-top: -10px;      display: inline-block;      width: 100%;      overflow:visible;        }    li {      width: 100%;      display: inline-block;      float:left;      background: transparent;      box-sizing: border-box;      -moz-box-sizing: border-box;      -webkit-box-sizing: border-box;      margin: 2%;  }    li div {      border-radius: 3px;      background-color: #f4faff;      box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.84);      margin-top: 1em;      cursor: pointer;  }    li div img{      height: auto;      width: 100%;      vertical-align: middle;      border: 0;  }

<ul>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>  </ul>

I have used float: left; to the above solutions <li> and it works in this case but in my real view it crops down the last img's box-shadow check the below screenshot.

Any solutions will be highly helpfull.

3 Answers

Answers 1

The root cause here seems to be the display: inline-block on the li elements. Changing this to block should wrap them into columns.

li {     width: 25%;     display: block;     box-shadow: none;     background: transparent;     box-sizing: border-box;     -moz-box-sizing: border-box;     -webkit-box-sizing: border-box;     margin: 2%; } 

Hope that helps.

Answers 2

I hope something like this could be helpful.

.dw {  	box-sizing: border-box;  	-webkit-column-gap: 0;  	column-gap: 0;  	position: relative;  }  .dw * {  	box-sizing: border-box;  }      @media (min-width: 768px) {  .dw {  	-webkit-column-count: 2;  	column-count: 2;  }  }    @media (min-width: 992px) {  .dw {  	-webkit-column-count: 3;  	column-count: 3;  }  }    @media (min-width: 1500px) {  .dw {  	-webkit-column-count: 4;  	column-count: 3;  }  }  .dw-pnl {  	margin: 0;  	padding: 5px;  }  .dw-pnl__cntnt {  	border-radius: 3px;  	overflow: hidden;  	padding: 20px;  	width: 100%;  }    @media (min-width: 768px) {  .dw-pnl {  	-webkit-column-break-inside: avoid;  	break-inside: avoid;  }  }  img {  	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.84);  }  img.dw-pnl__cntnt {  	padding: 0;  }

<body>  <div class="dw">    <div class="dw-pnl "> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt="img1" class="dw-pnl__cntnt"/> </div>    <div class="dw-pnl "> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt="img2" class="dw-pnl__cntnt"/> </div>    <div class="dw-pnl "> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt="img3" class="dw-pnl__cntnt"/> </div>    <div class="dw-pnl "> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt="img3" class="dw-pnl__cntnt"/> </div>    <div class="dw-pnl "> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt="img3" class="dw-pnl__cntnt"/> </div>    <div class="dw-pnl "> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt="img3" class="dw-pnl__cntnt"/> </div>     </div>  </body>

Answers 3

I know that this is not kind of proper solution but it worked well for me when I was using masonry The thing is remove column-count property and just give width to li such as width:25%; or width:300px; and use flex-box to maintain it for responsiveness. (it's up to you to use flex-box)

body{    height:1000px;  }    ul {      list-style: none;              padding: 0px 4px 4px 4px;      margin-top: -10px;      display: flex;      justify-content:center;      flex-wrap:wrap;/*suggested to use if you set width in px*/        width: 100%;      margin: 0px;        }    li {      width: 25%;      display: inline-block;      box-shadow: none;      background: transparent;      box-sizing: border-box;      -moz-box-sizing: border-box;      -webkit-box-sizing: border-box;      margin: 2%;  }    li div {      border-radius: 3px;      background-color: #f4faff;      box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.84);      margin-top: 1em;      cursor: pointer;  }    li div img{      height: auto;      width: 100%;      vertical-align: middle;      border: 0;  }

<ul>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>  </ul>  <br><br><br>  BUT THIS WORKS IF THERE IS MORE THAN 4 IMAGES    <ul>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>  </ul>

Without flex-box

body{    height:1000px;  }    ul {      list-style: none;              padding: 0px 4px 4px 4px;      margin-top: -10px;           width: 100%;      margin: 0px;        }    li {      width: 25%;      display: inline-block;      box-shadow: none;      background: transparent;      box-sizing: border-box;      -moz-box-sizing: border-box;      -webkit-box-sizing: border-box;      margin: 2%;  }    li div {      border-radius: 3px;      background-color: #f4faff;      box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.84);      margin-top: 1em;      cursor: pointer;  }    li div img{      height: auto;      width: 100%;      vertical-align: middle;      border: 0;  }

<ul>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>  </ul>  <br><br><br>  BUT THIS WORKS IF THERE IS MORE THAN 4 IMAGES    <ul>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>      <li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>  </ul>

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati