Как сделать div одинаковыми по высоте?

Question

[Антон]

Здравствуйте! Есть интернет-магазин, где витрина с товарами имеет следующий вид:

<div class="grid">
<div></div> <!--Товар 1-->
<div></div> <!--Товар 2-->
<div></div> <!--Товар 3-->
<div></div> <!--Товар 4-->
<div></div> <!--Товар 5-->
<div></div> <!--Товар 6-->
<div></div> <!--Товар 7-->
<div></div> <!--Товар 8-->
</div>

Товары выводятся по четыре в строке., но их блоки имеют разную высоту.
Как сделать, чтобы высота столбцов подстраивалсь под высоту самого длинного блока?
Было такое решение на js, но оно конфликтовало с фильтром товаров, поэтому пришлось его отключить.

$(document).ready(function(){
  var maxH = 0;
  $("div").each(function () {
    var h_block = parseInt($(this).height());
    if(h_block > maxH) {
      maxH = h_block;
    };
  });
  $("div").height(maxH);
});

Answer 1

[Никита К.]

Можете родителю задать display : table, а потомкам display: table-cell;

Answer 2

[Денис Инешин]

Только на Flexbox (см. align items).
Но это только для современных браузеров. В старье увы только на JS или забить.

Answer 3

[Александр]

Что бы сами блоки подстраивались по высоте нужен flexbox. Но если вас устроит вариант что бы выравнивались по высоте строки, а блоки были произвольного размера можно попробовать вот такой способ: https://jsfiddle.net/tvxvmdd9/1/

Comments

[Никита К.]

В вашем варианте блоки в строке разного размера https://jsfiddle.net/bonilka/tvxvmdd9/2/

[Александр]

Никита К.: Так я об этом упомянул же. Да, мой способ выравнивает только строки, но иногда этого бывает достаточно.

Answer 4

[lynnikvadim]

.grid {
display: flex;
}
яваскрипт не нужен

Answer 5

[Максим Будин]

Что вы городите. Какой флекс?
display: inline-block;
vertical-align: top;

и все

Comments

[lynnikvadim]

чем flex не нравится ?

[Максим Будин]

несовместимостью с браузерами

Answer 6

[Тимур Орлов]

Миксим, вы читаете вопрос?

Одинаковой высоты

а vertical-align это выравнивание строки относительно базовой линии. При этом блок НЕ растянется по высоте.
Поэтому варианта два, либо flex, либо JS
П.С. Один вариант, самый старый, отрицательный margin в одну из сторон, вложенного внутрь другого, блока, равный ширине этого блока.