Как сделать список блоков разной высоты в несколько колонок?

301

22 декабря 2017, 00:21

Здравствуйте. Появился вот такой нюанс. Мне нужно сверстать секцию, в которой блоки расположены как-бы кирпичиками, из-за того, что высота изображения в каждом будет разная.

Я для всех блоков открыл одну строку row, потом каждый блок поместил в col-lg-4

<div class="row">
    <div class="col-lg-4">
        <div class="gallery-item">
            ...
        </div>
    </div>
    <div class="col-lg-4">
        <div class="gallery-item">
            ...
        </div>
    </div>
    <div class="col-lg-4">
        <div class="gallery-item">
            ...
        </div>
    </div>
    <div class="col-lg-4">
        <div class="gallery-item">
            ...
        </div>
    </div>
    <div class="col-lg-4">
        <div class="gallery-item">
            ...
        </div>
    </div>
    <div class="col-lg-4">
        <div class="gallery-item">
            ...
        </div>
    </div>
</div>

Но тогда получается вот так, как на картинке ниже, из-за того, что row имеет display: flex; и каждый col-lg-4 получается одинаковой высоты. А мне нужно как-то сделать чтобы колонки, которые снизу подсосались к верху, чтобы не было пустого пространства, и было все кирпичиками. Падскажите, пожалуйста, как правильно такое можно сделать?

Answer 1

Для данной задачи есть несколько решений.

Каждый столбец отдельным блоком

.el { 
  background-color: gray; 
  margin-bottom:5px; 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    
<div class="row"> 
  <div class="col-xs-6">   
    <div class="el" style="height:30px"> </div> 
    <div class="el" style="height:60px"> </div> 
    <div class="el" style="height:110px"> </div> 
  </div> 
  <div class="col-xs-6">   
    <div class="el" style="height:80px"> </div> 
    <div class="el" style="height:30px"> </div> 
    <div class="el" style="height:40px"> </div> 
 </div> 
</div>

Количество элементов в каждом столбце надо будет рассчитать вручную.

Списком, и указать `column-count`

ul { 
  column-count:2; 
  list-style-type: none; 
} 
 
li { 
  margin-bottom: 5px; 
  background-color: gray; 
}

<ul> 
  <li style="height:30px"> </li> 
  <li style="height:60px"> </li> 
  <li style="height:20px"> </li> 
  <li style="height:70px"> </li> 
  <li style="height:120px"> </li> 
  <li style="height:30px"> </li> 
  <li style="height:50px"> </li> 
  <li style="height:140px"> </li> 
</ul>

В этом случае количество элементов в колонке указывать не надо, оно будет расчитано автоматически, зато адаптивность придётся прописывать вручную, через media query менять количество столбцов.

Flexbox

.container { 
   display: flex; 
   flex-wrap: wrap; 
   flex-direction: column; 
   height: 400px; 
} 
 
.el { 
   background-color: gray; 
   margin:4px; 
}

<div class="container"> 
  <div class="el" style="height:30px"> </div> 
  <div class="el" style="height:40px"> </div> 
  <div class="el" style="height:50px"> </div> 
  <div class="el" style="height:60px"> </div> 
  <div class="el" style="height:110px"> </div> 
  <div class="el" style="height:80px"> </div> 
  <div class="el" style="height:90px"> </div> 
  <div class="el" style="height:120px"> </div> 
</div>

В данном решении высоту flex контейнера надо будет рассчитать вручную.