Как использовать CSS-столбцы для многоколоночных макетов сайтов

В течение многих лет CSS-плавающие элементы были хитрым, но необходимым компонентом при создании макетов веб-сайтов. Если ваш дизайн требует нескольких столбцов, вы обратились к плавающим. Проблема этого метода заключается в том, что, несмотря на невероятную изобретательность, проявленную веб-дизайнерами / разработчиками при создании сложных макетов сайтов, CSS-плавающие элементы никогда не предназначались для использования таким образом.

В то время как плавающие объекты и позиционирование CSS наверняка найдут свое место в веб-дизайне на долгие годы, более новые методы верстки, включая CSS Grid и Flexbox, теперь дают веб-дизайнерам новые способы создания макетов их сайтов. Еще одна новая техника верстки, которая показывает большой потенциал — это CSS Multiple Columns.

CSS-столбцы существуют уже несколько лет, но отсутствие поддержки в старых браузерах (в основном в старых версиях Internet Explorer) не позволяет многим веб-специалистам использовать эти стили в своей работе.

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

Основы CSS-столбцов

Как следует из названия, CSS Multiple Columns (также известный как многостолбцовый макет CSS3) позволяет разбивать содержимое на заданное количество столбцов. Самые основные свойства CSS, которые вы бы использовали:

• колонка подсчета
• Колонка зазор

Для количества столбцов вы указываете количество столбцов, которое вы хотите. Разрыв между столбцами будет представлять собой желоба или промежутки между этими столбцами. Браузер примет эти значения и равномерно разделит содержимое на количество указанных вами столбцов.

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

 Заголовок вашей статьи
 
Вообразите много параграфов текста здесь ...

Если вы тогда написали эти стили CSS:

.содержание {
 -количество столбцов moz: 3;
 -webkit-column-count: 3;
 количество столбцов: 3;
 -пробел в колонке moz: 30px;
 -пробел в колонке: 30 пикселей;
 пробел в колонке: 30 пикселей;
 }

Это правило CSS делит раздел «контент» на 3 равных столбца с промежутком в 30 пикселей между ними. Если вы хотите использовать два столбца вместо 3, вы просто измените это значение, и браузер рассчитает новые значения ширины этих столбцов, чтобы равномерно разделить содержимое. Обратите внимание, что сначала мы используем свойства с префиксом поставщика, а затем объявления без префикса.

Как бы легко это ни было, его использование таким образом сомнительно для использования веб-сайта. Да, вы можете разбить пачку контента на несколько столбцов, но это может быть не лучшим вариантом для чтения в Интернете, особенно если высота этих столбцов падает ниже «сгиба» экрана.

Читатели должны были бы прокручивать вверх и вниз, чтобы прочитать весь контент. Тем не менее, принцип CSS-столбцов так же прост, как вы видите здесь, и его можно использовать для гораздо большего, чем просто разделение содержимого некоторых абзацев — его действительно можно использовать для разметки.

Макет с помощью CSS-столбцов

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

Вот пример HTML:

 
Последние новости

 
Содержание будет идти сюда ...





 
Из нашего блога

 
Содержание будет идти сюда ...





 
Предстоящие События

 
Содержание будет идти сюда ...

CSS для создания этих нескольких столбцов начинается с того, что вы видели ранее:

 .содержание {
 -количество столбцов moz: 3;
 -webkit-column-count: 3;
 количество столбцов: 3;
 -пробел в колонке moz: 30px;
 -пробел в колонке: 30 пикселей;
 пробел в колонке: 30 пикселей;
 }

Теперь проблема заключается в том, что браузер хочет разделить этот контент равномерно, поэтому, если длина контента этих подразделений отличается, этот браузер фактически разделит содержимое отдельного подразделения, добавив начало его в один столбец, а затем продолжив в другой (вы можете увидеть это, используя этот код для запуска эксперимента и добавления различной длины контента в каждом подразделении).

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

 .content div {
 дисплей: встроенный блок;
 }
 

Это заставит те подразделения, которые находятся внутри «контента», остаться неизменными, даже если браузер разделит это на несколько столбцов. Более того, поскольку мы не указали здесь фиксированную ширину, размер этих столбцов будет автоматически изменяться по мере изменения размера браузера, что делает их идеальным приложением для адаптивных веб-сайтов. С этим стилем «inline-block» каждое из трех ваших подразделений будет отдельным столбцом контента.

Использование Column-Width

Помимо «подсчета столбцов», вы можете использовать другое свойство, и в зависимости от ваших требований к макету оно может стать лучшим выбором для вашего сайта. Это «ширина столбца». Используя ту же HTML-разметку, как показано ранее, мы могли бы вместо этого сделать это с помощью нашего CSS:

 .содержание {
 -ширина столбца moz: 500 пикселей;
 -ширина колонки webkit: 500px;
 ширина столбца: 500 пикселей;
 -пробел в колонке moz: 30px;
 -пробел в колонке: 30 пикселей;
 пробел в колонке: 30 пикселей;
 }
 .content div {
 дисплей: встроенный блок;
 }

Это работает так, что браузер использует эту «ширину столбца» в качестве максимального значения этого столбца. Поэтому, если окно браузера имеет ширину менее 500 пикселей, эти 3 деления появятся в одном столбце, одной из вершин другой. Это типичный макет, используемый для мобильных / небольших экранов.

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

Другие свойства столбца

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

Время экспериментировать

В настоящее время CSS Multiple Column Layout очень хорошо поддерживается. С помощью префиксов более 94% веб-пользователей смогут видеть эти стили, и эта неподдерживаемая группа на самом деле будет гораздо более старыми версиями Internet Explorer, которые больше не поддерживаются.

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