Содержание
Салют коллеги и читатели моего блога, с вами Дмитрий! Сегодня речь пойдет о том, как сделать упорядоченные и неупорядоченные списки в две и более колонок только при помощи css.
Статья будет совсем короткой так как в принципе описывать нечего, пробегусь по вариантам, а их всего три и вкратце расскажу, какие стили я применил и почему.
Float
Эту вариацию используют еще со времен «Человека умелого», решение конечно же кроссбраузерное и подходит практически под все проекты, но к float привыкать не стоит. Ведь сейчас есть же flex, которое только стремительно набирает обороты, да и оно на много удобнее.
Читайте также:
- Css placeholder color или как изменить цвет placeholder css
- Плавная прокрутка к якорю jquery со смещением и скоростью анимации
- Lazyframe: ленивая загрузка Google Maps, Youtube, Vimeo
Flex
Этот вариант я использую всегда, удобно, быстро и актуально. Не нужно что-то мудрить, тем более, что добавить нужно всего 2 свойства: flex и ширину одного li.
Column
На мой взгляд, самый простой вариант при помощи которого сразу указывается количество столбцов. А что самое главное, при таком свойстве второй пункт списка будет под первым, а не как двух предыдущих примерах друг за другом.
Пример на Codepen
codepen.io/CmsWp/pen/ExaBbxY
Вот и все на сегодня, не забудьте, встречаемся в следующей статье!
