Как грамотно выровнять сетку товаров?

Question

[foxayb]

Есть страница с товарами, кажется, что самое адекватное это сместить наименование товара на один уровень, подскажите, пжл, как это сделать?


код:

<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

[Вадим Белкин]

Поддерживаю Дмитрий Кузнецов, либо на флексах и сетку и сами колонки делать, чтобы сами колонки растягивались по максимальной в ряду, и внутри колонки сама фотка расстягивалась на большу часть. Но тут есть нюансы, при появлении многострочного текста.
Я бы все же сделал фиксированную область под фотки (пропорциональная и квадратная), а само изображение отцентровать в этой области и не давать ему растягиваться большой любой из сторон этой области. Тем самым все блоки с фотками будут одного размера. Пример

Comments

[foxayb]

Ваш способ мне помог. Спасибо за пример!

Answer 2

[Дмитрий Кузнецов]

Как я понял, у вас изображения разных размеров. От сюда следует либо делать изображения одного размера, либо использовать flex.
...у меня всё)