Как на css делит список на колонки?

Question

[jenya7771]

Здравствуйте, какие нужно применять свойства для элементов списка, что бы если их более 8 штук следующие строились в отдельную колонку рядом, а если больше 16 то уже они располагались в 3х колонках?

li:nth-last-child(n+9){
		color: red;
	}
		li:nth-last-child(n+17){
		color: green;
	}

Смог вот такое решение найти, но какие стили им применять не понимаю.

Comments

[Сергей delphinpro]

Нет такого в css
но сделать можно
погуглите статью про "количественные селекторы" на хабре
и если вы в них разберетесь, вы сможете всё.

[jenya7771]

Сергей: Я читал эту статью, оттуда взял код который выше в вопросе писал, с помощью этого кода я смог разделить элементы списка на 1-8, 8-16 и 16-24, но у меня возникла проблема, какое свойство нужно применить что бы 8-16 элементы становились во вторую колонку?

[Ankhena]

jenya7771:
Без JS, по-моему, не обойтись

без JS - решение на flex, при условии, что известна высота

Answer 1

[Артур Карапетян]

Flexbox ?!

Comments

[jenya7771]

А каким свойством можно следующие 8 элементов поставить в новый столбец?

[alvvi]

jenya7771: каждому 9 элементу задавайте margin-left: auto для резинового gutter-a или margin-left: 25px для фиксированного gutter-a в 25px.

[alvvi]

jenya7771: и не очень понятно, что вы подразумеваете под колонками, вне модулей Multiple Column Layout и Grid Layout CSS не знает никаких колонок

[jenya7771]

Илья Ростопка: gutter-a это Flexbox?

[alvvi]

jenya7771: gutter = расстояние между колонками, отступ, на английском просто привычней :)

[jenya7771]

Илья Ростопка: Вы меня наверное не правильно поняли, мне нужно сделать 3 столбца со списками, вот что бы каждый цвет поставить в свой столбец.
https://codepen.io/anon/pen/VbygLJ?editors=1100#an...

[alvvi]

jenya7771: допустим можно использовать врап flex-container-a, но проблемы тут я вижу две:
1. Текст внутри каждого элемента не будет врапиться, потому что это флекс элемент c flex-direction: column.
2. А даже если будет, нужно знать фиксированный height первых 8 элементов и ставить его на родителя. А что если height динамический? А что если height первых 8 элементов не совпадает с height'ом следующих 8?

Если для вас это не проблемы, то выглядеть оно будет как-то так: https://codepen.io/Alvvi/pen/XRVOzy?editors=1100#a...

[jenya7771]

Илья Ростопка: Огромное спасибо за помощь! Как я понял ширину сделать автоматической нельзя?

[alvvi]

jenya7771: ширину всего блока или элемента? У элементов ширина резиновая по умолчанию, у блока можно задавать любую ширину относительно родителя (которог в моем примере нет, тк body я не добавил)

[jenya7771]

Илья Ростопка: Ширину родителя или ul в примере, что бы она подстраивалась на число колонок?

Answer 2

[Negwereth]

https://www.w3schools.com/css/css3_multiple_columns.asp

Comments

[jenya7771]

Здесь же к родителю применяются свойства если я правильно понял, а мне нужно к 8-16 элементу применить, что бы они стали во второй ряд, и к 16-24 что бы они стали в 3 ряд

li {
//16-24
}
li:nth-last-child(n+9){
//8-16
  }
    li:nth-last-child(n+17){
//1-8
  }

[Negwereth]

jenya7771: эммммм. А вариант, чтобы элементы сами переходили в следующую колонку никак? При суммарной высоте, например.

По другому пока никак.