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>
0 comments:
Post a Comment