Когда вы используете столбцы CSS? PlatoBlockchain Data Intelligence. Вертикальный поиск. Ай.

Когда вы используете столбцы CSS?

Это не риторика: мне действительно интересно найти отличные варианты использования многоколоночных макетов CSS.

Ответ кажется простым. Используйте столбцы, если хотите разделить любой контент на столбцы, верно? Как правило, это пример, который вы найдете в статьях, показывающих, как работают макеты с несколькими столбцами CSS, включая наши собственные. альманах:

Право на. Но является ли это реальным вариантом использования? Ммммм может быть. Если текст относительно краток, то, возможно, это приятный штрих. Вот как я продал это себе при редизайне своего веб-сайта. несколько лет назад. Сегодня это не так, но тогда это выглядело так:

Когда вы используете столбцы CSS?

Но целая длинная статья разбита на столбцы? Я люблю это в газетах, но не решаюсь прокрутить веб-страницу вниз, чтобы прочитать одну колонку, только чтобы прокрутить назад, чтобы сделать это снова.

Я полагаю, мы можем использовать его для размещения двух элементов рядом, но flexbox подходит для этого больше. Кроме того, ограничение не позволяет нам выбирать столбцы для индивидуального изменения их размера. Столбцы должны быть одинаковой ширины.

Одна из особенностей столбцов заключается в том, что они являются единственным методом компоновки CSS, который Фрагменты содержание. (То есть, если мы не считаем CSS-регионы…что с ними вообще случилось?!) Так что, если вы хотите разбить абзац на столбцы, это уже возможно без дополнительных оберток.

Когда еще вам может понадобиться разделить непрерывный блок контента на столбцы? Я помню, что мне нужно было сделать это, когда у меня был большой старый неупорядоченный список элементов. Мне нравится, как списки облегчают просмотр контента, но длинные списки могут сделать одну сторону страницы слишком тяжелой. Предположим, например, что мы перечисляем все теги постов для CSS-Tricks в алфавитных группах. Многоколоночный макет отлично подходит для этого:

Попробуйте изменить ширину области просмотра. Определены три столбца, но их число будет меняться в зависимости от объема доступного пространства. Должен любить все это отзывчивое совершенство без работы с медиа-запросами!

Я работал над демонстрацией для :left псевдокласс и потянулся к columns потому что это отличный способ фрагментировать вещи для печати демо. Итак, я думаю, есть еще один вариант использования. И во время создания демо я понял, что макет с несколькими столбцами можно использовать для создания массивной сетки элементов, например галереи изображений:

Но что еще? Ограничены ли мы короткими абзацами, длинными списками и свободными сетками?

Отметка времени:

Больше от CSS хитрости