Remove extra spaces between cards in card deck

Question

I'm using Jinja2 from Flask to render a list to a html page. I want to create card decks with some data from that list, using a Jinja2 loop.

My current HTML code:

<div class="container-fluid">
    <div class="row">
       <div class="card-deck">
            {% for l in list %}
            <div class="col-sm-4">
                <div class="card">
                     <div class="card-body">
                            {{ l[0] }}
                            {{ l[4] }}
                     </div>
                </div>
            </div>
         {% endfor %}
       </div>
   </div>
</div>

The result:

I don't want those extra spaces in red:

How can i remove them?

Thanks

What I would suggest is that you use jquery to find the container in the row with the biggest height and set the rest of the containers to that height — Andre Marques, May 07 '18 at 10:22
in that case some cards will be bigger than they should be, based on their content, no? — Lotem Nadir, May 07 '18 at 20:12
True, what you are doing is difficult because you are using columns. The next column will start below the highest column above it. — Andre Marques, May 08 '18 at 07:31

score 0 · Answer 1 · answered May 08 '18 at 08:13

Solved by using this example: https://www.bootply.com/118335

from this question: Is it possible to create a pinterest-like layout with Bootstrap only?

Updated code:

HTML:

<div class="container-fluid">
     <div class="row" id="row_posts">
        {% for l in list %}
        <div class="col-sm-4" id="col_posts">
            <div class="card" id="card_posts">
                 <div class="card-body">
                        {{ l[0] }}
                        {{ l[4] }}
                 </div>
            </div>
        </div>
     {% endfor %}
    </div>
</div>

CSS:

*, *:before, *:after {box-sizing:  border-box !important;}

#row_posts {
-moz-column-width: 22em;
-webkit-column-width: 22em;
-moz-column-gap: 1em;
-webkit-column-gap:1em; 
 }

#col_posts {
display: inline-block;
padding:  .25rem;
width:  100%; 
}

#card_posts {
position:relative;
display: block;
}

Remove extra spaces between cards in card deck

1 Answers1