Как установить количество элементов либо высоту первой колонки в двухколоночном списке?

#html #css

Помогите разобраться с двухколоночным списком. В пример я навел код. Где то видел
что "управлять" количеством элементов в колонке можно с помощью увеличения высоты самого
списка, но как вижу это не получается. 

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



ul{
  list-style: none;
  columns: 2;
  height: 500px
}

Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8
Item9
Item10
Item11
Item12
Item13
Item14
Item15




    

Ответы

Ответ 1

Если в кратце, то есть св-во columns-fill, по умолчанию оно равно balance, что подразумевает
равномерное заполнение контентом. Если поставить auto, то высота будет влиять на кол-во
элементов в столбце

P.S.
добавил css переменные для наглядности, что бы можно было считать автоматически с
помощью функции calc. Можно обойтись и только добавление св-ва columns-fill и правильной
высотой



:root {
  --columns-count: 2; /* кол-во столбцов */
  --row-height: 20px; /* высота строчки в столбце */
  --rows-count: 10; /* кол-во строчек */
}


ul {
  list-style: none;
  column-fill: auto; /* теперь колонки будут заполняться до конца */
  columns: var(--columns-count);
  height: calc(var(--row-height)*var(--rows-count));
}

li {
  height: var(--row-height);
  line-height: var(--row-height);
}

Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8
Item9
Item10
Item11
Item12
Item13
Item14
Item15