Hello

Here is a piece of code that is responsible for displaying product cards on the category page:

<div class="items fix"> <!-- BEGIN product --> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="col-xs-12" style="box-shadow: 0 0 5px rgba(0,0,0,0.3); display: table-cell; margin-bottom: 20px;"> <div class="col-sm-12"> <!-- BEGIN product.picture --><div class="img {product.LABEL}"><a href="item/{product.KEY}"><img src="images/product/s/{product.picture.SRC}" style="width:100%; height: auto;" alt="{product.NAME}"/></a></div><!-- END product.picture --> </div> <div class="text-center col-xs-12"> <h4><a href="item/{product.KEY}">{product.NAME}</a></h4> <div class="brief text"><p>{product.BRIEF}</p></div> <!-- BEGIN product.param --> <div class="param text-center"> <select class="form-control"> <option>Выберите {product.param.NAME}</option> <!-- BEGIN product.param.val --><option value="{product.ID}:{product.param.val.NUM}" rel="{product.param.val.PRICE}" rel2="{product.param.val.PRICE_OLD}">{product.param.val.NAME}</option><!-- END product.param.val --> </select> </div> <!-- END product.param --> <!-- BEGIN product.price_old --><div class="oldprice" style="margin-top: 10px; font-size: 18px; color: #E91E63">Старая цена: <span style="text-decoration: line-through;">{product.PRICE_OLD}</span> &#8381;</div><!-- END product.price_old --> <!-- BEGIN product.price --><div class="price" style="font-size: 24px; color: #00695C !important;">Цена: <span>{product.PRICE}</span> &#8381;</div><!-- END product.price --> <div class="actions"> <a href="item/{product.KEY}" class="button gray view">Подробнее</a> <div class="button red {BUTTON_ORDER_CLASS}" id="{product.ID}<!-- BEGIN product.param -->:0<!-- END product.param -->">{BUTTON_ORDER_TEXT}</div> </div> </div> </div> </div>

The conclusion is such a story - http://prntscr.com/ckxfi4 As far as I understand the reason for this, the different heights of the images that make the blocks different in height.

The solution I tried - fixed the height of the block (for example, 500px). But in this case, the xs content does not fit in height and a number of similar problems.

So how to make up the withdrawal of cards of goods in a beautiful grid?

  • A piece of code, we can only guess what does not work. - HamSter

1 answer 1

You have two options:

1. To fix the height of the content in the cards

Your height may vary due to the image, and because of the name of the product, which may not fit in two lines, or be short enough for one line.

The image can be limited in height like this:

 .items img { height: 100px; width: auto; }

And under the name, select 2 lines in height, clearly through height :

 .items h4 { height: 48px; }

2. Use pinterest-like mesh

Connect masonry , this library builds a pinterest-like grid of blocks of arbitrary height.

  • 1st method helped perfect! thanks - Denis Zhitnyakov