title: CSS display grid image issue
body: <p><a href="https://i.stack.imgur.com/6ZA59.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6ZA59.png" alt="enter image description here"></a></p>
  
  <p>Hi,</p>
  
  <p>I am so confused that why some of html page is displaying a grid as a screenshot.</p>
  
  <p>It seems was entering to a new line.</p>
  
  <p>Below is a css that I used.</p>
  
  <pre><code>.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{
      float:left;
      padding:0;
      position:relative;
  }
  .woocommerce ul.products li.product.product-category:hover .container-inner h3,.woocommerce-page ul.products li.product.product-category:hover .container-inner h3{
      color:#000;
  }
  .woocommerce ul.products li.product.product-category,.woocommerce-page ul.products li.product.product-category{
      width:33.33%;
  }
  .woocommerce ul.products li.product.product-category a img,.woocommerce-page ul.products li.product.product-category a img{
      height:100%;
  }
  .product-category.product:nth-child(3n+1){
      clear:both !important;
  }
  .woocommerce ul.products li.product.product-category.first,.woocommerce-page ul.products li.product.product-category.first{
      clear:none;
  }
  .woocommerce ul.products.list li.product.product-category a img,.woocommerce-page ul.products.list li.product.product-category a img{
      width:32%! important;
      height:auto;
  }
  .woocommerce ul.products.owl-carousel li.product,.woocommerce-page ul.products.owl-carousel li.product{
      width:100% !important;
      margin:0;
  }
  </code></pre>
  
  <p>Thank you</p>