9

My issue is that i want to display data in a block format using the bootstrap 3 grid system however i dont want the annoying whitespace gaps that happen from the height being constrained to the above row. For example, If i do:

<div class="row">
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">longer post that is going to take more height than the others</div>
    <div class="col-lg-4">post</div>
</div>
<div class="row">
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">post</div>
</div>

then i will be left with whitespace between the two rows, what i am trying to achieve is a masonry effect (where a post fill sit near the post above it) with only using CSS, Specifically the bootstrap 3 grid system. I.E:

enter image description here

I know this can be done with plugins but i want to see if theres a more pure (even if it has to be hacky) solution. Any ideas?

Typhomism
  • 274
  • 1
  • 2
  • 13
  • http://sickdesigner.com/masonry-css-getting-awesome-with-css3/ – Christina Dec 18 '14 at 16:11
  • The way that Aibrean suggests and the link above puts the boxes in column order, not box order, and Masonry puts them wherever they fit, and it's not in order but it's sometimes close. – Christina Dec 18 '14 at 16:17
  • @BootstrapBoogie-Christina I liked that link however it doesn't really use the bootstrap 3 grid system, i put together a fiddle: http://jsfiddle.net/vtanz6xc/2/ that does however and uses the column system still, i suppose this will have to work for now. – Typhomism Dec 18 '14 at 16:32

4 Answers4

17

We did this on a site, and what we did was put the grid in vertical rows.

Example:

<div class="row">
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
<div>
Aibrean
  • 6,178
  • 1
  • 18
  • 36
  • 3
    What do you mean by "put the grid in vertical rows." bootstrap doesn't seem to have a box class, just a taf confused – Typhomism Dec 18 '14 at 16:13
  • It is an example, no need to take `box` literally. The "vertical rows" is columns, except I didn't want you to think of actually using columns. The way you are thinking of doing it is across, when it should be flowing down and up. You'll definitely need to use Javascript for the ordering. We had ours set up with the bootstrap grid class on an LI. – Aibrean Dec 18 '14 at 16:39
  • Yep, that's right :) The JS would have to fire so the ordering is across. Every second integer goes in the second column, every third in the third, etc. – Aibrean Dec 18 '14 at 16:41
  • Okay, this is how i will do it for now, I'll sit down tonight and try to come up with a better solution to lay the columns inline, thanks! – Typhomism Dec 18 '14 at 16:43
  • Sounds like a good idea. How do I set up JS to redistribute the boxes when the fluid layout changes? I'll have to dynamically put them into one of the cols depending on the display being xs, sm, md or lg. – Fabian Jun 02 '16 at 14:23
  • This is a naive approach to the problem. I mean that in the literal sense in that it falls over when you have your first column full of really tall divs, and it is huge compared to the two next to it. That's not masonry style, that's just columns. – Dan Mar 07 '19 at 13:45
6

In Bootstap .row element is used for clearing floats of the div-blocks / col it contains (in your ex. col-lg-4);

So it's basically impossible to have elements in different rows stand next to each other, you necessarily need to change the markup;

On the other hand using bootstrap responsive column system could be helpful for making a CSS-Masonry effect:
you can try placing all "col-items" that you want to make the masonry effect on inside one row, displaying as inline-block(plus maybe some other little adjustments ..) should do the trick (this is the way to go for if you're stuck only with CSS..);

In conclusion remember that Masonry was born and remains a JavaScript grid layout library, so even if you can make it work with CSS I suggest you to use JS .

a thousand thanks to Desandro for this awesome idea;

maioman
  • 15,071
  • 4
  • 30
  • 42
6

In Bootstrap 4 you can use .card-columns, see here: https://v4-alpha.getbootstrap.com/components/card/

Though I would recommend using isotope as JS offers more control and better compatibility than CSS.

Max
  • 1,038
  • 12
  • 20
1

i did a simple masonry grid that receive images from DB , by just css like this :

    <div class="container">
    <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12"> 
    <a href="<?php echo $src; ?>" class="fancybox" data-fancybox="group" id="<?php echo $count; ?>" rel="<?php the_ID(); ?>">
    <div class="image-gallerie">                                                        
    <img src="<?php echo $src; ?>" class="img-gallerie lazy" alt="Gallery image" id="<?php echo $count; ?>" />                                              

    </div> 
    </a>  
    </div>
    </div>

    .container {
    -moz-column-width: 35em;
    -webkit-column-width: 35em;
    -moz-column-gap: 1em;
    -webkit-column-gap:1em;  
    }

    .image-gallerie {
     width:  100%; 
     }
    .image-gallerie img{
     width: 100%;
     height: 100%;
     margin-top: 15px;
      margin-bottom: 10px;
    }
Ouahib Abdallah
  • 141
  • 2
  • 6