Remove box-shadow break while using columns in CSS

Question

I'm trying to create a pinterest style layout. I've reached almost to completion but the only problem is, if you scroll to the bottom of the page, you will see the box-shadow breaking for the first 3 columns.

How should I avoid this?

#container {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  -webkit-column-gap: 15px;
  -moz-column-gap: 15px;
}

.entity {
  width: 100%;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  margin-bottom: 15px;
  display: inline-block;
  /* float: left; */
  box-shadow: 0 0 10px #000;
}

.entity:nth-child(2n) {
  height: 80px;
  background-color: yellow;
}

.entity:nth-child(2n+1) {
  height: 100px;
  background-color: red;
}

.entity:nth-child(3n) {
  height: 150px;
  background-color: green;
}

<div id="container">
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
</div>

Answer 1

This appears to be a webkit bug as the issue is not reproducible in Firefox. There are a few (unconfirmed) webkit bug reports that have been filed for this issue Bug 14137 - box-shadow on element inside multi-column doesn't draw outside column boundary and Bug 101184 - box-shadow is cropped when using column-count and column-gap.

It would appear that Chrome is not taking the box-shadow into account when it moves an element into a new column. One way you could get around this is to add margin-top to the .entity divs. This would effectively act as reserved space for the box-shadow and will stop it from being split across columns.

The following modifications have been made to your code:

• margin-top: -6px; added to #container to counter act margin-top: 6px; set of .entity
• margin-top: 6px; added to .entity to act as reserved space for the box-shadow
• margin-bottom changed to 9px; on .entity to keep the same space between elements

#container {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  -webkit-column-gap: 15px;
  -moz-column-gap: 15px;
  margin-top: -6px;
}

.entity {
  width: 100%;
  margin-top: 6px;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  margin-bottom: 9px;
  display: inline-block;
  /* float: left; */
  box-shadow: 0 0 10px #000;
}

.entity:nth-child(2n) {
  height: 80px;
  background-color: yellow;
}

.entity:nth-child(2n+1) {
  height: 100px;
  background-color: red;
}

.entity:nth-child(3n) {
  height: 150px;
  background-color: green;
}

<div id="container">
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
  <div class="entity"></div>
</div>

Answer 2

I did somenthing diferent and it worked for me... This:

<div id="container">
   <div class="entity-protection">
     <div class="entity"></div>
   </div>
</div>

Entity-protection css:border: 5px solid transparent; break-inside: avoid;

The point is: the div with box-shadow should be inside the protection div for avoid its break.

I hope it helps.