0
226
ViewsCSS Columns: box-shadow is rendered faulty on Google Chrome (Masonry Layout)
I want to create a masonry layout with CSS Columns. Each item has a box-shadow and a random height (in the following CodePen I simulated this with exact heights).
And there's the problem: The box-shadows are appended to the wrong column if the elements use different heights. I would even say that this is a rendering issue in Google Chrome?
Do you have any idea, how to solve this issue in context of the idea to have a masonry layout?
https://codepen.io/malte94/pen/yLomKJe
.box {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
min-height: 200px;
margin: 10px;
}
.columns {
display: block;
column-count: 3;
page-break-inside: avoid;
break-inside: avoid;
overflow: hidden;
}
.columns * {
display: block;
max-width: 100%;
page-break-inside: avoid;
break-inside: avoid;
overflow: hidden;
margin: 10px;
}<div class="columns">
<div class="box" style="height: 200px;"> Hey there! </div>
<div class="box" style="height: 400px;"> Hey there! </div>
<div class="box" style="height: 500px;"> Hey there! I'm broken </div>
<div class="box" style="height: 100px;"> Hey there! </div>
<div class="box" style="height: 50px;"> Hey there! </div>
<div class="box" style="height: 250px;"> Hey there! </div>
</div>
·
Juan Pablo Isaza
Answer question