Не пойму как работает column-count

217

30 августа 2018, 13:50

Почему не выводится в 3 колонки как задано в column-count?

.photo-gallery { 
  column-count: 3; 
  column-gap: .3em; 
} 
 
.photo-item { 
  display: inline-block; 
  margin: 0 0 .3em; 
  width: 100%; 
}

<div class="photo-gallery"> 
 
  <div class="photo-item"> 
    <a href="#"><img src="https://picsum.photos/600/400" alt="image"></a> 
  </div> 
 
  <div class="photo-item"> 
    <a href="#"><img src="https://picsum.photos/600/400" alt="image"></a> 
  </div> 
 
  <div class="photo-item"> 
    <a href="#"><img src="https://picsum.photos/600/400" alt="image"></a> 
  </div> 
 
  <div class="photo-item"> 
    <a href="#"><img src="https://picsum.photos/600/400" alt="image"></a> 
  </div> 
 
</div>

Answer 1

CSS3 спецификация Колонки требует, что высота колонки должна быть выровнена: т.е., браузер автоматически устанавливает максимальную высоту колоноки, для того чтобы высота содержимого в каждой колонки была приблизительно одинаковая. MDN

Так как контента у вас для трех колонок по мнению браузера недостаточно, то и три колонки он не создаёт.