How to avoid spaces up and down between divs in angular columns

Question

May be I'm missing something.. I'm following the Off Canvas Template of bootstrap and I wonder I can get the Items/cards stacked in a correct manner.. by that I mean without spaces up or down it when their content is uneven.

Check this image to see what I mean.. I thought col-x would solve this issue.. but it doesn't If I'm unclear on my question please let me know.

This is the sample code:

  <div class="row">
    <div class="col-6 col-sm-6 col-lg-4">
      ......
    </div><!--/span-->
    <div class="col-6 col-sm-6 col-lg-4">
      .....
    </div><!--/span-->

Adding an example of what I'm saying: http://www.bootply.com/121097

thanks!

Answer 1

Are you trying to accomplish a 'pinterest' or 'masonary' style layout?

If so, here are three of many ways to do this...

1. Use masonary.js

http://masonry.desandro.com/

2. Or you could code your own js function. A really good resource can be found here (an answer by the fellow who started this madness, a front-end dev for pinterest): http://www.quora.com/Pinterest/What-technology-is-used-to-generate-pinterest-coms-absolute-div-stacking-layout

3. Or you can do this with css, using css3 column. Take a look at the example here (although this does not solve for your layout exactly):

http://jsfiddle.net/jalbertbowdenii/7Chkz/

    -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;

Answer 2

You need to wrap each two of your columns inside a div class="row" like this:

<div class="container">
  <div class="col-xs-12 col-sm-9">
    <div class="row">
        <div class="col-6 col-sm-6 col-lg-4">
             <h2>Heading</h2>

            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. magna mollis euismod. Donec sed odio dui. magna mollis euismod. Donec sed odio dui.</p>
            <p><a class="btn btn-default" href="#" role="button">View details »</a>

            </p>
        </div>
        <!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
             <h2>Heading</h2>

            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            <p><a class="btn btn-default" href="#" role="button">View details »</a>

            </p>
        </div>
    </div>
    <div class="row">
        <!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
             <h2>Heading</h2>

            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            <p><a class="btn btn-default" href="#" role="button">View details »</a>

            </p>
        </div>
        <!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
             <h2>Heading</h2>

            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            <p><a class="btn btn-default" href="#" role="button">View details »</a>

            </p>
        </div>
    </div>
    <div class="row">
        <!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
             <h2>Heading</h2>

            <p>Donec id elit non mi porta gravi tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            <p><a class="btn btn-default" href="#" role="button">View details »</a>

            </p>
        </div>
        <!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
             <h2>Heading</h2>

            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            <p><a class="btn btn-default" href="#" role="button">View details »</a>

            </p>
        </div>
    </div>
    <div class="row">
        <!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
             <h2>Heading</h2>

            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            <p><a class="btn btn-default" href="#" role="button">View details »</a>

            </p>
        </div>
        <!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
             <h2>Heading</h2>

            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            <p><a class="btn btn-default" href="#" role="button">View details »</a>

            </p>
        </div>
    </div>
    <!--/span-->
  </div>
</div>
<!--/row-->
<!--/.container-->

Bootply Demo

Answer 3

After watching your code, probably how i would have done it is like having 3 column vertical layout which will be in a row. Now in these columns you can place your div with heading and details and the will be automatically arranged in proper way without any space at the bottom.