Removing a broken shadow when using columns in CSS

Question

I am trying to create a pinterest style layout. I almost reached the end, but the only problem is that if you go to the bottom of the page, you will see a gap box-shadowfor the first three columns.

How can 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>

Run codeHide result

Answer 1

, , -, Firefox. () , 14137 - box-shadow 101184 - - - .

, Chrome box-shadow, . - margin-top .entity div s. box-shadow .

:

• margin-top: -6px; #container act margin-top: 6px; .entity
• margin-top: 6px; .entity, box-shadow
• margin-bottom 9px; .entity,

#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>

Hide result

Answer 2

, ... :

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

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

, div box div, .

, .