<li> в 4 колонки или меньше

359

09 февраля 2017, 01:19

Хочу сделать div в котором будет ul с динамическим количеством колонок. Например как вот тут в главном меню - tonkosti.ru

Через что его делать? через css column-count + @media и просто для разной ширины менять количество колонок или как?

Внутри будет список элементов по алфавиту, поэтому нужно чтобы элементы списка выстраивались вертикально а не горизонтально.

Answer 1

Используйте display: flex;

Вот полная документация: http://frontender.info/a-guide-to-flexbox/

.category-list { 
  list-style: none; 
  height: 100px; 
  border: 1px solid red; 
  display: flex; 
  flex-direction: column;  
  flex-wrap: wrap 
} 
.category-list li { 
  page-break-inside: avoid; 
  break-inside: avoid; 
}

<ul class="category-list clearfix"> 
  <li class="category-item">1</li> 
  <li class="category-item">2</li> 
  <li class="category-item">3</li> 
  <li class="category-item">4</li> 
  <li class="category-item">5</li> 
  <li class="category-item">6</li> 
  <li class="category-item">7</li> 
  <li class="category-item">8</li> 
  <li class="category-item">9</li> 
  <li class="category-item">10</li> 
  <li class="category-item">11</li> 
  <li class="category-item">12</li> 
</ul>

Answer 2

Вот готовый пример:

ul { 
  -webkit-column-count: 3; 
  -moz-column-count: 3; 
  column-count: 3; 
   
  /* 
  Можно отталкиваться от ширины + flex для растягивания колонок 
  -webkit-column-width: 100px; 
  -moz-column-width: 100px; 
  column-width: 100px; 
  */ 
   
  -webkit-column-gap: 4em; 
  -moz-column-gap: 4em; 
  column-gap: 4em; 
}

<ul> 
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</li> 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</li> 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</li> 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</li> 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</li> 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</li> 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</li> 
</ul>