Bootstrap Сетка не будет автоматически перемещать изображения вниз, когда строка заполнена

Question

Я пытаюсь передать карту JS, которая в настоящее время содержит 9 элементов, поэтому мне нужны 3 строки и 3 столбца, передача этой карты затрудняет настройку сетки из-за невозможности вручную поместить строку и 3 столбца под ним, и я очень запутался в том, как работает эта сетка, поэтому может кто-нибудь объяснить мне, что я делаю неправильно, ниже мой код:

         <div className="col-sm-8 mt-5 mr-auto">
            <h4 className="text-left">Most Popular Tees | Whats The Trend</h4>
            <div className="card-deck mt-4 container">
              <div className="productsShows row row-cols-3">
                {products.map((product) => (
                  <div className="card col" key={product.id}>
                    <img
                      className="card-img-top img-fluid "
                      src={product.img}
                      alt="Card image cap"
                    />
                    <div className="card-body">
                      <h6 className="card-title">{product.name}</h6>
                      <p className="card-text text-right">
                        <small className="text-muted red">
                          ${product.price}
                        </small>
                      </p>
                    </div>
                  </div>
                ))}

и вот изображение:

введите описание изображения здесь

и вот пример записи массива карты:

const products = [
  {
    id: 1,
    name: 'first',
    description: '',
    price: 1,
    gender: 'women',
    type: 'shirt',
    img: 'http://localhost:8080/img/tshirt.png',
    inCart: false,
    category: 'clothes',
  },

Итак, каков наиболее успешный и эффективный способ go об этой проблеме?