网格减少列之间的间隙

Question

我正在使用Grid，但是列之间的间隙比预期的大。

我在样式表中使用了以下代码，但似乎无法正常工作：

    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-column-gap: 10px;
    grid-row-gap: 5px;
    justify-items: center;

}

<div class="container">

<div class="products_all">

{% for products in products %}

{% if products.name %}


    <div class="card" style="width: 18rem;">
       <img class="card-img-top" src="..." alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">{{ products.name }}</h5>
                    <p class="card-text">{{ products.description }}</p>
                             <a href="#" class="btn btn-primary">Go somewhere Nice</a>
  </div> <!-- card -->
</div> <!-- card body -->
{% endif %}
{% endfor %}
</div> <!--   </div> col end div --->
</div> <!--- products_all ---->