How to correctly align the grid of goods?

Question

css

There is a page with products, it seems that the most adequate thing is to shift the name of the product by one level, tell me, please, how to do this?

the code:

<div class="woocommerce columns-4 ">
<ul class="products columns-4">						
<li class="post-2078 product type-product status-publish has-post-thumbnail product_cat-avtomatika product_cat-sektsionnye-vorota product_tag-italyanskaya-avtomatika-nice first instock shipping-taxable product-type-simple">						
  <a href=" product/nice-shel-75-kce/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link"><div class="img-wrap"><img width="300" height="300" src="// wp-content/uploads/2018/04/orig-300x300.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="" srcset="// wp-content/uploads/2018/04/orig-300x300.jpg 300w, // wp-content/uploads/2018/04/orig-150x150.jpg 150w, // wp-content/uploads/2018/04/orig-210x210.jpg 210w, // wp-content/uploads/2018/04/orig-75x75.jpg 75w, // wp-content/uploads/2018/04/orig-200x200.jpg 200w, // wp-content/uploads/2018/04/orig-100x100.jpg 100w, // wp-content/uploads/2018/04/orig.jpg 500w" sizes="(max-width: 300px) 100vw, 300px"></div><div class="product-inner"><h2 class="woocommerce-loop-product__title">Nice SHEL-75 KCE</h2>					
</div></a><a href=" product/nice-shel-75-kce/" data-quantity="1" class="button product_type_simple ajax_add_to_cart" data-product_id="2078" data-product_sku="" aria-label="Прочитайте больше о “Nice SHEL-75 KCE”" rel="nofollow">Подробнее</a></li>								
<li class="post-2102 product type-product status-publish has-post-thumbnail product_cat-avtomatika product_cat-sektsionnye-vorota product_tag-italyanskaya-avtomatika-nice  instock shipping-taxable product-type-simple">						
  <a href=" product/nice-spin-22-kce/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link"><div class="img-wrap"><img width="300" height="271" src="// wp-content/uploads/2018/04/Spin21_22_23.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="SN6031" srcset="// wp-content/uploads/2018/04/Spin21_22_23.jpg 310w, // wp-content/uploads/2018/04/Spin21_22_23-300x271.jpg 300w, // wp-content/uploads/2018/04/Spin21_22_23-233x210.jpg 233w" sizes="(max-width: 300px) 100vw, 300px"></div><div class="product-inner"><h2 class="woocommerce-loop-product__title">Nice SPIN-22 KCE</h2>					
</div></a><a href=" product/nice-spin-22-kce/" data-quantity="1" class="button product_type_simple ajax_add_to_cart" data-product_id="2102" data-product_sku="" aria-label="Прочитайте больше о “Nice SPIN-22 KCE”" rel="nofollow">Подробнее</a></li>
</ul>												
</div>

Answer 1

I support Dmitry Kuznetsov , either on flex and the grid and the columns themselves, so that the columns themselves are stretched to the maximum in a row, and inside the column the photo itself is stretched for the most part. But there are nuances when multiline text appears.
I would still make a fixed area for the photos (proportional and square), and center the image itself in this area and not let it stretch any of the sides of this area. Thus, all blocks with pictures will be the same size. Example

Answer 2

As I understand it, you have images of different sizes. From here, you should either make images the same size, or use flex.
...That's all I wanted to say)