Блог

Я создал codepen для страницы в стиле электронной коммерции https://codepen.io/williamsrashon/pen/JjRXaKy , но все товары, выставленные на продажу, расположены вертикально, а не горизонтально. Кто-нибудь может помочь? Я закомментировал div списка элементов для сеток в css, потому что это не помогло моей проблеме. К вашему сведению, я также пытался удалить дублирующуюся css-часть сетки из раздела cards div, но ничего не было сделано в разделе div перечисленных элементов, поэтому я поместил все это в раздел cards div.

Это часть HTML:

 <div class="listed-items">
    <div class = "cards">
      
    <div class ="item-description">
     <p>Men's Guess Watch</p> 
      <p> $165 </p>
    </div>
    
    <div class ="item-pic">
      <img class="itemimg" src ="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRxdr9vUo-rPOZelaFVMPHFtQUI2ZOJn9X_krP_Aa0KTlNr8gB1AWzfW5OqeKpAf5qzH_Mvaldamp;usqp=CAc"/>
    </div>
    
    <div class="buy-option">
      <a href="#" class="btn btn-default">Vendor: Guess Inc.</a></br>
      <button class ="buy-opt">Buy Now
        <a href="#" class="btn btn-default"></a>
    </button>
     <div class="rating rating2"><!--
        --><a href="#5" title="Give 5 stars">★</a><!--
        --><a href="#4" title="Give 4 stars">★</a><!--
        --><a href="#3" title="Give 3 stars">★</a><!--
        --><a href="#2" title="Give 2 stars">★</a><!--
        --><a href="#1" title="Give 1 star">★</a>
    </div> </div>

  <br>
       
    <div class ="item-description">
     <p>Mackbook Pro</p> 
      <p> $1249 </p>
    </div>
         
    <div class ="item-pic">
      <img class="itemimg" src ="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR0QjsRQfYpJLxrrIgB90H24rzbhA2hGKaIWQamp;usqp=CAU"/>
    </div>
         
    <div class="buy-option">
      <a href="#" class="btn btn-default">Vendor: Apple Inc.</a></br>
      <button class ="buy-opt">Buy Now
        <a href="#" class="btn btn-default"></a>
      </button>
     <div class="rating rating2"><!--
        --><a href="#5" title="Give 5 stars">★</a><!--
        --><a href="#4" title="Give 4 stars">★</a><!--
        --><a href="#3" title="Give 3 stars">★</a><!--
        --><a href="#2" title="Give 2 stars">★</a><!--
        --><a href="#1" title="Give 1 star">★</a>
        </div> </div>
     
     <br>
 
    <div class ="item-description">
     <p>Men's Nike Shoe</p> 
      <p> $85 </p>
    </div>
        
    <div class ="item-pic">
      <img class="itemimg" src ="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ394wW-WDT5yNqkuCyLE3dKtWE0V7nVhUc0Qamp;usqp=CAU"/>
    </div>
        
    <div class="buy-option">
      <a href="#" class="btn btn-default">Vendor: Nike Inc.</a></br>
      <button class ="buy-opt">Buy Now
        <a href="#" class="btn btn-default"></a>
      </button>
     <div class="rating rating2"><!--
        --><a href="#5" title="Give 5 stars">★</a><!--
        --><a href="#4" title="Give 4 stars">★</a><!--
        --><a href="#3" title="Give 3 stars">★</a><!--
        --><a href="#2" title="Give 2 stars">★</a><!--
        --><a href="#1" title="Give 1 star">★</a>
        </div> </div>
  <br>
  
  <br>
    
    <div class ="item-description">
     <p>Supreme - Spider Man Shirt</p> 
      <p> $250 </p>
    </div>
         
    <div class ="item-pic">
      <img class="itemimg" src ="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT9QXY9MjKfMxGf8J-dMA8B53nC9KkV9296Ygamp;usqp=CAU"/>
    </div>
         
    <div class="buy-option">
      <a href="#" class="btn btn-default">Vendor: Supreme Clothing</a></br>
      <button class ="buy-opt">Buy Now
        <a href="#" class="btn btn-default"></a>
      </button>
     <div class="rating rating2"><!--
        --><a href="#5" title="Give 5 stars">★</a><!--
        --><a href="#4" title="Give 4 stars">★</a><!--
        --><a href="#3" title="Give 3 stars">★</a><!--
        --><a href="#2" title="Give 2 stars">★</a><!--
        --><a href="#1" title="Give 1 star">★</a>
        </div> </div>
  <br>
    
    <div class ="item-description">
     <p>Vizio Smart Tv 50"</p> 
      <p> $299.99</p>
    </div>
         
    <div class ="item-pic">
      <img class="itemimg" src ="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy4GKybDoYdLUVUTlRK9uQDGeVi7rU4qdO_Qamp;usqp=CAU"/>
    </div>
         
    <div class="buy-option">
      <a href="#" class="btn btn-default">Vendor: Walmart</a></br>
      <button class ="buy-opt">Buy Now
        <a href="#" class="btn btn-default"></a>
      </button>
     <div class="rating rating2"><!--
        --><a href="#5" title="Give 5 stars">★</a><!--
        --><a href="#4" title="Give 4 stars">★</a><!--
        --><a href="#3" title="Give 3 stars">★</a><!--
        --><a href="#2" title="Give 2 stars">★</a><!--
        --><a href="#1" title="Give 1 star">★</a>
        </div> </div>
 

Это css:

 /*.listed-items {
  display: flex;
  grid-template-columns: repeat (5, 1fr);
  grid-template-rows: repeat (3, 1fr);
  grid-gap: 20px;
  margin: auto;
  
} */

.cards { 
  display: grid;
  grid-template-columns: repeat (5, 1fr);
  grid-template-rows: repeat (3, 1fr);
  width: 330px;
  max-height: 300px;
  background: whitesmoke;
  box-shadow: 0 0 4px whitesmoke;
  margin: auto;
  position: relative;
  color: black;
  font-size: 20px;
  font-weight: bold;
  box-sizing: border-box;
}