Как сделать

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

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

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

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

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

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

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

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

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

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

<div class = "content"> 
<h1> Заголовок вашей статьи </ h1>
<p> Представьте себе множество абзацев текста здесь ... </ p>
</ div>

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

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

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

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

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

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

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

Вот пример HTML:

<div class = "content"> 
<div class = "news">
<h2> Последние новости </ h2>
<p> Контент будет идти сюда… </ p>
<div>
<div class = "blog»>
<h2 > Из нашего блога </ h2>
<p> контент будет идти сюда… </ p>
<div>
<div class = "events»>
<h2> Предстоящие события </ h2>
<p> контент будет идти сюда… </ p>
<div>
</ div>

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

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

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

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

.content div { 
display: inline-block;
}


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

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

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

.content { 
-moz-column-width: 500px;
-webkit-column-width: 500px;
ширина столбца: 500 пикселей;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
пробел в колонке: 30 пикселей;
}
.content div {
display: inline-block;
}

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

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

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

Похожие посты
Как сделать

Как получить возмещение за покупки в iTunes или App Store

Как сделать

Поверхностное перо не работает? Вот как это исправить

Как сделать

Как настроить и использовать Fire TV Recast

Как сделать

Как изменить рингтон по умолчанию на вашем iPhone