CSS columns separating divs

Question

I am building platform with template like a https://pinterest.com and
I have html structure like this:

<div class="main">
    <div class="content">
         <div class="content_publisher">
         </div>
         <div class="content-text">
         </div>
    </div>
</div>

And i have style.css like this:

body {
    width:1358px;
}

.main {
    column-width:339.33px;
    column-gap: 0;
    column-count:4;
    position:relative;
    top:50px;
    width:100%;
}

.content {
    display:block;
    margin-bottom:10px;
    width:337px;
    -webkit-box-shadow:inset 0px 0px 10px;
}

My page is devided to 4 columns... Look at the image you will understand what i want exaclty.. https://i.sstatic.net/fPfDp.png As you can see at the end of the column, The column is separating divs inside in content div..

Answer 1

Use display: inline-block on .content.

body {
  width: 1358px;
}

.main {
  column-width: 339.33px;
  column-gap: 0;
  column-count: 4;
  position: relative;
  top: 50px;
  width: 100%;
}

.content {
  display: inline-block;
  margin-bottom: 10px;
  width: 337px;
  -webkit-box-shadow: inset 0px 0px 10px;
  height: 200px;
  background: #eee;
}
.content:nth-child(odd) {
  height: 150px;
}

<div class="main">
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
</div>