0

I'm using "column-count" to create a grid of items aligned upward to each others ("column-gap: 0px").

It looks great but the problem starts when I try to implement infinite scrolling.

I'm adding another grid with the same structure below the first but can't align it to the items of the first grid.. creating some unwanted gaps between section.

is there any option on alignment to objects above?

I only found the vertical-align standard option that doesn't really help me.

This is how it looks: (items have different heights)

.itemsSection{
    line-height: 0;
    -webkit-column-count: 3;
    -webkit-column-gap: 0px;
    -moz-column-count: 3;
    -moz-column-gap: 0px;
    column-count: 3;
    column-gap: 0px;
}

.item{
    height: auto;
    border: 1px solid #DDD;
    border-radius: 2px;
    margin-bottom: 10px;
    display: inline-block;
    vertical-align: text-top;
    padding: 3%;
    margin: 2%;
}


<div id="allItems">
<div class="itemsSection">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
</div>
<div class="itemsSection">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
</div>
<div class="itemsSection">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
</div>
</div>
Maayan Layfer
  • 1
  • 1
  • Welcome to SO, please take a tour of the help center ans see [how to ask a good question](http://stackoverflow.com/help/how-to-ask) – Pete Jun 01 '16 at 09:04
  • If I understand you correctly, you need something like this: http://masonry.desandro.com/, I dont know if its possible only with CSS-Code. – Javier Gonzalez Jun 01 '16 at 12:19

0 Answers0