Убрать лишние пробелы между карточками в карточной колоде

Question

Я использую Jinja2 из Flask для рендеринга списка на html-страницу. Я хочу создать колоды карт с некоторыми данными из этого списка, используя цикл Jinja2.

Мой текущий код HTML:

<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>

Результат:

Мне не нужны эти лишние пробелы в красном:

Как я могу их удалить?

Спасибо

Answer 1

Решено с помощью этого примера: https://www.bootply.com/118335

из этого вопроса: Можно ли создать макет в виде интереса только с помощью Bootstrap?

Обновленный код:

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;
}