Делаем колонки одинаковой высоты с помощью JS

Есть много способов сделать колонки одинаковой высоты, но самый удобный для меня – с помощью js

// Make all the columns of the same height
function setEqualHeight(columns){
  var tallestcolumn = 0;

  columns.each( function(){
    currentHeight = $(this).height();
    if(currentHeight > tallestcolumn){
      tallestcolumn = currentHeight;
    }
  });

  columns.height(tallestcolumn);
}

setEqualHeight($(".column"));

Высота задается для блоков .column внутри родителя с классом .columns-wrap (вы можете использовать другие классы и родителя). Можно использовать даже несколько таких блоков с колонками, копируя и изменяя только последнюю строку – вызов функции со своими параметрами.

В моем примере для такой структуры HTML (у вас он может быть любой другой, с другими классами или другим количеством колонок):

<div class="columns-wrap">
  <div class="column">...</div>
  <div class="column">...</div>
  <div class="column">...</div>
  <div class="column">...</div>
</div>

Для моего примера прописаны такие стили (стили так же не являются обязательными, дайте волю фантазии):

.columns-wrap {
  font-size: 0;
}
.column {
  box-sizing: border-box;
  padding: 20px;
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
  width: 24%;
  margin: 0.5%;
  background-color: #ddd;
}
.columns-wrap div p {
  margin: 0;
  padding: 10px;
  background-color: #fefefe;
}
@media only screen and (max-width: 768px) {
  .column {
    width: 49%;
  }
}

В чем минус этого решения – что высота блока рассчитывается при загрузке страницы, и поэтому при изменении ширины экрана, нужно обновить страницу, чтобы высота блоков просчиталась по новой. То есть, это проблема только при тестировании адаптивности, а на пользовательских экранах при статической одинаковой ширине окна проблем возникнуть не должно.

Примитивный пример (при включении вкладок HTML, SASS или JS нажмите в нижнем правом углу кнопку RERUN):

See the Pen Columns Same Height by Denis (@deniscreative) on CodePen.0