How to create a grid with floating elements similar to Pinterest

Navigation
0
Hello, I am creating a grid with divs floating left, but when it reaches the fifth div in 1000px , it floats on the right and not on the left as should be and margin-top is greater for all subsequent divs , ie from the fifth element, the divs are with a large spacing at its top.

See the example below:

AndIwantthemtolooklikethis:

AndthecodeI'musingisthis:

HTML

<divclass="center">
        <div class="boxpost">
            <img src="https://33.media.tumblr.com/26bf1c7107a9a765bd28aeabd15dfec5/tumblr_nwyd2kKcpH1u24qqvo1_400.gif"width="239px"/>
        </div>
        <div class="boxpost">
            <img src="https://33.media.tumblr.com/26bf1c7107a9a765bd28aeabd15dfec5/tumblr_nwyd2kKcpH1u24qqvo1_400.gif"width="239px"/>
        </div>
        <div class="boxpost">
            <img src="https://33.media.tumblr.com/26bf1c7107a9a765bd28aeabd15dfec5/tumblr_nwyd2kKcpH1u24qqvo1_400.gif"width="239px"/>
        </div>
        <div class="boxpost">
            <img src="https://33.media.tumblr.com/26bf1c7107a9a765bd28aeabd15dfec5/tumblr_nwyd2kKcpH1u24qqvo1_400.gif"width="239px"/>
        </div>
        <div class="boxpost">
            <img src="https://33.media.tumblr.com/26bf1c7107a9a765bd28aeabd15dfec5/tumblr_nwyd2kKcpH1u24qqvo1_400.gif"width="239px"/>
        </div>
        <div class="boxpost">
            <img src="https://33.media.tumblr.com/26bf1c7107a9a765bd28aeabd15dfec5/tumblr_nwyd2kKcpH1u24qqvo1_400.gif"width="239px"/>
        </div>
        <div class="boxpost">
            <img src="https://33.media.tumblr.com/26bf1c7107a9a765bd28aeabd15dfec5/tumblr_nwyd2kKcpH1u24qqvo1_400.gif"width="239px"/>
        </div>
        <div class="boxpost">
            <img src="https://33.media.tumblr.com/26bf1c7107a9a765bd28aeabd15dfec5/tumblr_nwyd2kKcpH1u24qqvo1_400.gif"width="239px"/>
        </div>
    </div>

CSS 

.center{
    margin: 0 auto;
    width:1024px;
}
.boxpost{
    width:245px;
    overflow:auto;
    background-color: #f7f7f7;
    border-radius: 3px;
    float:left;
    margin-top: 10px;
    margin-left: 10px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
    padding-bottom: 5px;
}
.profilepost{
    float: left;
    width: 100%;
    height:50px;
    border-bottom:1px solid #CCCCCC;
}
The problem is that I have to take the heights and always put the auto overflow, because they can come images of different sizes, and even for the aesthetics of the business to be more relaxed then I put auto overflow and we have a new problem, the divs are mixed, type 4 divs with different images, the fourth div becomes the second on the site, and everything gets messed up.

    
asked by anonymous 01.11.2015 / 00:05

1 answer

3

To do this you have to use the column-count property in instead of float:left; as in the example below. This property divides the content into a div in which this property is assigned, in several columns depending on the value we apply to it (ex: column-count: 3; ).

Unfortunately, not all elements flow as they should when applied to this property, but fortunately we have the solution to that which is to use the break-inside property on elements that are within a layout of columns.

Here's an example below of working columns in layout and already prepared for screens of small and large resolutions:

  

You also have a example in jsFiddle if you prefer. 

#colunas {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 15px;
}
.boxpost {
    display: inline-block;
    width: 100%;
    height: 100px;
    background-color: #936C6C;
    margin: 0 2px 15px 2px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
.maior{height:150px;}

@media (min-width: 960px) {
    #colunas {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}

@media (min-width: 1100px) {
    #colunas {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }
}
<div id="colunas">
    <div class="boxpost"></div>
    <div class="boxpost maior"></div>
    <div class="boxpost"></div>
    <div class="boxpost maior"></div>
    <div class="boxpost"></div>
    <div class="boxpost maior"></div>
    <div class="boxpost"></div>
    <div class="boxpost maior"></div>
    <div class="boxpost"></div>
</div>
  

References: CSS3 column-count Property , break-inside

There is also the plugin Masonry in jQuery,

It does this slightly different job if you prefer.

To use the plugin you just need to implement it on <head> of your site as (and along with) jQuery Library with the following line of code: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>

Thenjustcreateyourdivs,forexample:

<divclass="grid">
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item">...</div>
  ...
</div>

and point them to use the plugin with this jQuery code as follows: 

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
});

You can see an example of the working plugin here at this link: link

  

You can learn more about the plugin and read its documentation here: Masonry
  Available on Github: Masonry on Github

    
01.11.2015 / 01:52
Doubt with WebApi data insertion Restuful server instance on tomcat