Разработка, создание и продвижение сайтов на cms WordPress

Блог о разработке, создании и продвижении сайтов на cms WordPress. Полезные, интересные и познавательные статьи для новичков и профи.
31.01.20

UL LI: списки в две и более колонок только с помощью css

UL LI: списки в две и более колонок только с помощью css

Салют коллеги и читатели моего блога, с вами Дмитрий! Сегодня речь пойдет о том, как сделать упорядоченные и неупорядоченные списки в две и более колонок только при помощи css.

Статья будет совсем короткой так как в принципе описывать нечего, пробегусь по вариантам, а их всего три и вкратце расскажу, какие стили я применил и почему.

Float

Эту вариацию используют еще со времен «Человека умелого», решение конечно же кроссбраузерное и подходит практически под все проекты, но к float привыкать не стоит. Ведь сейчас есть же flex, которое только стремительно набирает обороты, да и оно на много удобнее.


Читайте также:


Flex

Этот вариант я использую всегда, удобно, быстро и актуально. Не нужно что-то мудрить, тем более, что добавить нужно всего 2 свойства: flex и ширину одного li.

Column

На мой взгляд, самый простой вариант при помощи которого сразу указывается количество столбцов. А что самое главное, при таком свойстве второй пункт списка будет под первым, а не как двух предыдущих примерах друг за другом.

Пример на Codepen

Вот и все на сегодня, не забудьте, встречаемся в следующей статье!