Примеры сайтов с колонками – двухколоночные сайты / Тренды / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY

Верстка сайта колонками: способы и их реализация

От автора: практически на любом веб-сайте нужно реализовывать две или больше колонок. В этой статье я предлагаю рассмотреть, какими способами реализуется верстка сайта колонками.

Как можно сделать колонки

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

С помощью плавающих блоков. Сегодня это самый популярный способ сделать колонки, хотя потихоньку его начинает теснить флексбокс. По умолчанию два блока в нормальном потоке не могут стоять на одной строке, но это поведение можно легко изменить, прописав обоим свойство float: left | right. Они начнут прижиматься к левому или правому краю. Чтобы идущий за ними блок воспринял плавающие блоки и разместился правильно, ему нужно прописать clear: both.

С помощью флоатов чаще всего делают 2 или 3 колонки. Верстка сайта с плавающими блоками не очень сложна, нужно знать всего лишь некоторые нюансы их поведения. Например, если вам нужно сделать область для вывода статей, а справа – боковую колонку с меню, то плавающие блоки очень легко реализуют такое расположение.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Поскольку ячейкам в таблице можно задавать любые размеры, раньше с их помощью верстали почти все сайты. Например, для реализации простейшего макета (шапка, контент, сайдбар, футер), в таблице делали три строки (строка таблицы формируется тегом tr). Каждая строка содержит две ячейки, потому что контент и сайдбар должны располагаться отдельно друг от друга. А в шапке и футере эти ячейки просто соединяли с помощью атрибута colspan у тега td, если это было необходимо.

У ячеек можно легко убрать рамку, что позволяло веб-разработчикам верстать сложные по структуре шаблоны достаточно легко.

С помощью флексбокса. Это современная технология, которая начала распространяться в 2014 году, хотя существовала и до этого. Ее суть заключается в следующем: создается один общий блок контейнер, в который помещаются другие блоки, которые нужно будет сделать в виде колонок, потом этому контейнеру нужно прописать display: flex.

Далее обычно задается свойство flex-direction, которое определяет направление главной оси, по которой будут расположены блоки. В качестве значений можно задать: row и column. Первое значение направит блоки по горизонтали справа налево, второе – вниз. Также можно задать реверс: flex-direction: row-reverse. Блоки расположатся справа налево.

А дальше начинается игра с другими свойствами флекс-контейнера: выравнивание по главной и поперечной оси, управление переносом блоков на новую строку.

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

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

Разбиение текста на колонки

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

Итак, нижеперечисленные свойства применяются к блоку, в котором текст нужно разбить в несколько колонок.

Column-count – свойство задает количество колонок, на которое нужно разбить текст. Рекомендуется выставлять значение от 2 до 4, в зависимости от того, как вам больше нравится.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Column-width – задает количество символов текста в одной колонке. Я подчеркиваю, ширина колонки в данном случае задается не пикселами, а количеством символов. Оптимально: 30-50 символов в одной колонке. Также это свойство никак нельзя назвать кроссбраузерным, потому что вы выставляете только желаемое количество символов, но поступит ли браузер в согласии с вашими пожеланиями, это еще неизвестно.

Column-gap – определяет промежуток между колонками. Можно задавать в пикселях.

Column-rule – рисует линию, разделяющую колонки. Синтаксис свойства полностью повторяет свойство border. Сначала записывается толщина линии, потом ее тип, а потом цвет.

Также я хотел бы упомянуть, что все эти css-свойства являются относительно новыми. Например, Internet Explorer поддерживает их только с десятой версии. Это свойства из стандарта CSS3, поэтому если вы их собираетесь применять на своем сайте, то нужно позаботиться о кроссбраузерности, иначе в старых версиях оперы и IE никаких колонок не будет.

Примеры

Плавающие блоки. Верстка сайта в две колонки чаще всего делается очень просто с помощью плавающих блоков. В css это реализуется примерно так:

.float-block1{ float: left } .float-block2{ float: left } блок, который должен стоять ниже плавающих{ clear: left | both }

.float-block1{ float: left } .float-block2{ float: left } блок, который должен стоять ниже плавающих{ clear: left | both }

То есть нижнему блоку нужно указать это свойство обязательно, чтобы он правильно разместился. Таким образом, плавающие блоки станут в одну строку, если им хватает ширины в родительском элементе. Естественно, нужно указать также ширину, высоту и рамку у блоков, чтобы получилось как на этом скриншоте:

А теперь сделаем самое интересное. Давайте добавим много случайного текста в основной блок и попробуем отображать его там в три колонки, как в газете или журнале. Для этого в код этому блоку нужно дописать такие правила:

-webkit-column-count: 3; -webkit-column-width: 33; -webkit-column-rule: 1px solid red; -webkit-column-gap: 5px

-webkit-column-count: 3; -webkit-column-width: 33; -webkit-column-rule: 1px solid red; -webkit-column-gap: 5px

Как видите, я везде поставил префикс webkit, чтобы свойства работали в Google Chrome. Для Mozilla нужно использовать префикс –moz. Итак, что же получилось?

Итак, верстка в 3 колонки на css возможна даже без добавления новых блоков. Мы задали количество колонок, их ширину, разделитель и горизонтальный отступ между ними. Конечно, свойства имеют огромный минус – они не кроссбраузерны.

Сегодня мы рассмотрели с вами множество способов сделать колонки с помощью html и css. Подписывайтесь на наш блог и получайте еще больше полезной информации по сайтостроению.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Как с помощью CSS создать макет сайта из двух колонок

В этой статье мы поэтапно рассмотрим правила верстки сайта с двумя колонками. Код, приведенный нами, позволит вам добавить шапку и подвал, охватывающие эти две колонки.

Для выполнения заданий этой статьи вы должны иметь навыки написания кода как на HTML, так и на CSS. Если это не так, тогда вам лучше использовать визуальный редактор.

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

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

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

HTML часть кода довольно проста. Нам нужно только два блока div, по одному для каждого столбца:

<div>
  <div>Контент</div>
  <div>Меню навигации</div>
</div>

Слова «Меню навигации» и «Контент» являются лишь указателями для боковой панели навигации и основного контента. Позже вы удалите эти слова, когда расположите в блоках реальный контент. div «container» — это блок, содержащий два столбца. Его можно использовать, если нужно применить определенные стили к обоим столбцам.

Приведенный ниже CSS код использует проценты («%») для определения ширины обеих колонок. Так как они измеряются в относительных единицах, то будут расширяться или сжиматься, чтобы заполнить все окно браузера независимо от того, какую ширину оно имеет. Например, если вы измените размер окна браузера, шаблон перестроит столбец так, чтобы он максимально соответствовал границам окна.

Код CSS очень прост:

#content {
  float: right ;
  width: 80% ;
}
#navbar {
  float: right;
  width: 20%;
}

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

Как приведенный выше код работает на практике, можно увидеть здесь.

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

В приведенном выше примере «#content» первым сдвигается вправо и для него задается ширина в 80% от ширины окна браузера. Наше следующее правило также выводит «#navbar» из потока документа и смещает его вправо.

Так как у нас уже есть плавающий элемент в таком положении. Согласно заданным правилам адаптивной верстки, второй блок помещается слева от существующего элемента, если для него есть достаточно пространства. Иначе он будет размещен под первым элементом. С учетом этого сумма сторон обоих блоков должна быть равна 100% или менее, иначе у нас не будет достаточно места, чтобы разместить их рядом.

Приведенный ранее код размещает меню навигации в левой колонке. Если нужно, чтобы меню навигации размещалось справа, измените код следующим образом:

#content {
  float: left ;
  width: 80% ;
}
#navbar {
  float: left ;
  width: 20% ;
}

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

Согласно установленным техническим правилам верстки, приведенные выше стили, задают для боковой колонки ширину в 20% от ширины окна браузера, а для колонки контента — 80%, что в сумме дает 100%.

Если вы планируете изменить эти значения, убедитесь, что их общая сумма равна или меньше 100%, иначе браузер поместит одну колонку ниже другой.

Если вы обнаружили, что одна из колонок помещается под другой вместо того, чтобы располагаться бок о бок, это означает, что общая ширина обеих колонок составляет более 100% от ширины окна браузера.

Это может произойти, даже если вы используете мои значения «20%» и «80%«. Например, если добавить поля, рамки и отступы для одной или обеих колонок. Ширина этих столбцов также увеличится, что приведет к тому, что общая сумма будет превышать 100%.

Кроссбраузерность и правила верстки подразумевают два способа решения этой проблемы:

• Уменьшить значение ширины колонок, пока браузер не выведет их так, как вы хотите. Но помните, что проценты являются относительной единицей измерения. Она привязана к ширине окна браузера пользователя. Поэтому, если вы тестировали макет на своей системе, и обнаружили, что при добавлении к padding-left 10 px к одной из колонок и уменьшении ширины на 1%, все работает прекрасно, то нельзя делать вывод, что 1% = 10 пикселей. Иными словами, 1% от 1024 пикселей отличается от 1% от 1920 пикселей, и так далее. Убедитесь, что вы учитываете различия ширины окна в других браузерах и диагоналях экрана;
• Решение, которое предпочитаю я, заключается в том, чтобы создать внутри блоков «#navbar» и «#content» вложенный DIV, и поместить в него все отступы, поля, рамки и фактический контент. Таким образом, для внешних блоков можно оставить старые 20% и 80%, не заботясь о поправках на поля, отступы и т.д.

Например, в демо-сайте с двумя колонками используется следующий HTML-код для создания вложенного блока DIV:

<div>
<div>
  <div>
  Контент
  </div>
</div>
<div>
  <div>
  Меню навигации
  </div>
</div>
</div>

К написанным ранее стилям CSS добавьте следующие свойства для «#innercontent» и «#innernavbar«:

#innercontent {
  padding-left: 10px ;
  padding-right: 10px ;
}
#innernavbar {
  padding-left: 5px ;
  padding-right: 5px ;
}

CSS для «#content» и «#navbar» остаются такими же, как описано в первой половине этой статьи.

Так как отступ применяется к внутреннему блоку DIV, размеры наружных блоков остаются неизменными, и у нас сохраняется макет с двумя колонками.

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

Чтобы создать шапку и подвал, используя макет с двумя колонками, измените HTML-код и добавьте два дополнительных блока DIV:

<div>
  <div>Шапка</div>
  <div>Контент</div>
  <div>Меню навигации</div>
  <div>Подвал</div>
</div>

Добавьте следующий код CSS в существующую таблицу стилей. Поместите его после стилей, которые были заданы ранее:

#footer {
  clear: both ;
}

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

#header {
  text-align: center ;
}

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

Приведенный выше код можно увидеть в действии на демо-сайте с шапкой, подвалом и двумя колонками.

С помощью приведенного выше кода CSS вы сможете самостоятельно создавать сайты с двумя колонками.

Данная публикация представляет собой перевод статьи «How to Design a Two Column Layout for Your Website Using CSS» , подготовленной дружной командой проекта Интернет-технологии.ру

Вёрстка колонками средствами CSS3 / Habr

Отличительной особенностью полиграфического дизайна является повсеместное применение колоночной верстки. И тому есть веские основания.

Во-первых, глаз лучше воспринимает строки текста состоящие из 8 до 12 слов. Во-вторых, можно гораздо лучше организовать колонки и уменьшить количество пустого пространства на странице. Долгое время это являлось исключительным преимуществом полиграфии. В вебе же приходилось всячески извращаться. Но теперь CSS3 позволяет создавать колоночную верстку без использования JavaScript.

Колоночная модель

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

Существенным в спецификации является то, что у колоночного элемента должны быть явно указано значение количества колонок и/или ширина колонок. Браузеры должны отображать колоночные элементы образом схожим с отображением таблиц, но содержимое будет распределяться по колонкам динамически.

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

Количество и ширина колонок

Для создания колоночного элемента необходимо задать свойства сolumn-count и/или column-width.

column-count

По-умолчанию, column-count имеет значение auto. Т.е. если задать column-width, браузер самостоятельно вычислит количество колонок необходимое для отображения многоколоночного элемента. Такое поведение не всегда удобно, потому зададим количество колонок, в которых находится контент.

.column
{
  -webkit-column-count:2;
  -moz-column-count:2;
}

column-width

Как сказано выше, можно задать ширину колонок не указывая количество колонок, а браузер вычислит его динамически. Ширину колонок можно указывать любыми единицами измерения доступными в CSS: em, px, %.

.column
{
  -webkit-column-width:15em;
  -moz-column-count:15em;
}

Конечно же можно комбинировать column-width и column-height:

.column
{
  -webkit-column-count:2;
  -moz-column-count:2;

  -webkit-column-width:15em;
  -moz-column-width:15em;
}

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

Интервал колонки – это именно то, что написано, размер пустого свободного пространства между колонками, указанный в единицах CSS.

colomn-gap

Спецификация W3C определяет значение интервала по-умолчанию в 1em, в примере мы и будем его использовать:

.column
{
  -webkit-column-gap:1em;
  -moz-column-gap:1em;
}

column-rule

Линейка тоже пришла из полиграфии. Изначально, линейки – это тонки линии между колонками, облегчающие чтение или разделяющие отдельные рассказы. CSS3 предоставляет три различных свойства настройки линейки: column-rule-size, column-rule-style и column-rule-color, а можно использовать column-rule для указания всех трёх свойств.

Как вы уже наверно догадались, могут использоваться все обычные единицы измерения, стили и цвета:

.column
{
  -webkit-column-rule:1em solid #000;
  -moz-column-rule:1em solid Black;
}

Приколы использования

На текущий момент семейство свойств column поддерживаются браузерами на основе WebKit или Mozilla.

Как вы уже заметили, в коде используются модификаторы движков. Если не указать модификатор, то даже поддерживающие браузеры проигнорируют свойства column-xxx.

Что будет если колонки ограничить по высоте

Браузер добавит колонок, чтобы уместить текст.

Спасает overflow:hidden.

Отображение линейки в одной колонке

Если текст умещается в одной колонке, Mozilla не рисует линейку, а WebKit рисует.
WebKit:

Mozilla:

Свойства, которые есть в спецификации, но не поддерживаются

Это свойства column-break и column-span.

Первое задумано как указатель того, что необходимо начать следующую колонку. Например перед тегами h3.

.column h3
{
  column-break-before:always;
}

Второй позволяет отобразить элемент через все колонки, наподобие газетной врезки.

.column h2
{
  column-span:all;
}

Заключение

Спектр применения свойств column пока еще очень узок. Даже не из-за того, что не все браузеры их поддерживают (Mozilla + WebKit дают уже более половины рынка), а по причине неполной реализации функций. Хотя функционал вполне интересный и заслуживает внимания.

---

По теме:
Спецификация W3C: www.w3.org/TR/css3-multicol
Статья, которую я перевел, но когда количество моих комментариев стало сопоставимо с текстом, написал свою собственную: www.kmsm.ca/2010/an-almost-complete-guide-to-css3-multi-column-layouts
Хороший набор примеров: www.quirksmode.org/css/multicolumn.html
Мой пример: unconnected.info/multicolumn.htm (мой сайт боится хабраэффектов, если не открылось, ай эм сорри)
Снэпшот моего примера: http://www.peeep.us/a1660973 (спасибо kuzvac)

Web-разработка • HTML и CSS

Две колонки

Две колонки, резиновый

Свойство float принимает одно из трех значений: left, right или none. Это свойство, примененное к тегу <div> с содержимым, позволяет создать боковое меню:

#sidebar {
  float: left;
  width: 200px;
}
#content {
  margin-left: 200px;
}

На рисунке ниже показаны эти два css-свойства в действии:

Здесь блок #left перемещен к левому краю. У него есть фиксированная ширина, однако у главного содержимого #content ее нет, что делает этот дизайн резиновым. Главный раздел страницы просто расширяется, заполняя окно браузера.

<!DOCTYPE html>
<html>
<head>
<title>Шаблон, две колонки</title>
</head>
<body>
<div></div>
<div>Левая колонка</div>
<div>Основной контент</div>
<div></div>
</body>
</html>

body {
  margin: 0;
  padding: 0;
}
#header {
  height: 100px;
  background: #2277aa;
}
#left {
  float: left;
  width: 250px;
  background: #ddd;
}
#content {
  margin-left: 250px;
  overflow: hidden;
  background: #eee;
}
#footer {
  clear: both;
  height: 50px;
  background: #2277aa;
}

Давайте немного улучшим шаблон и добавим отступы:

body {
  margin: 0;
  padding: 0;
}
#header {
  height: 100px;
  background: #2277aa;
}
#left {
  float: left;
  width: 250px;
  padding: 10px;
  background: #ddd;
}
#content {
  margin-left: 270px;
  padding: 10px;
  background: #eee;
}
#footer {
  clear: both;
  height: 50px;
  background: #2277aa;
}

Элемент #left по высоте меньше элемента #content, но мы можем это исправить, добавив в разметку еще один элемент <div> и установив для него background-image шириной 270px, высотой 1px и цветом #ddd:

<body>
<div></div>
<div>
  <div>Левая колонка</div>
  <div>Основной контент</div>
</div>
<div></div>
</body>

#bg-left {
  background: url(images/bg-left.png) left top repeat-y;
}

Две колонки, фиксированный

Ограничим шаблон по ширине и зададим выравнивание по центру, для этого добавим еще один элемент <div>:

<body>
<div>
  <div></div>
  <div>
    <div>Левая колонка</div>
    <div>Основной контент</div>
  </div>
  <div></div>
</div>
</body>

#wrapper {
  width: 1000px;
  margin: 0 auto;
}

Совместим достоинства фиксированной и резиновой верстки:

#wrapper {
  min-width: 1000px;
  max-width: 1200px;
  margin: 0 auto;
}

Аналогично создаем шаблон с двумя колонками, где блок #right перемещен к правому краю:

Три колонки

Три колонки, фиксированный

Теперь создадим шаблон с тремя колонками:

<!DOCTYPE html>
<html>
<head>
<title>Шаблон, три колонки</title>
</head>
<body>
<div>
  <div></div>
  <div>
  <div>
    <div>Левая колонка</div>
    <div>Правая колонка</div>
    <div>Основной контент</div>
  </div>
  </div>
  <div></div>
</div>
</body>
</html>

body {
  margin: 0;
  padding: 0;
}
#wrapper {
  width: 1000px;
  margin: 0 auto;
}
#header {
  height: 100px;
  background: #2277aa;
}
#left {
  float: left;
  width: 250px;
  padding: 10px;
  background: #ddd;
}
#bg-left {
  background: url(images/bg-left.png) left top repeat-y;
}
#right {
  float: right;
  width: 200px;
  padding: 10px;
  background: #ccc;
}
#bg-right {
  background: url(images/bg-right.png) right top repeat-y;
}
#content {
  margin-left: 270px;
  margin-right: 220px;
  padding: 10px;
  background: #eee;
}
#footer {
  clear: both;
  height: 50px;
  background: #2277aa;
}

Три колонки, фиксированный, контент сверху

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

<!DOCTYPE html>
<html>
<head>
<title>Шаблон, три колонки</title>
</head>
<body>
<div>
  <div>
  <div>
  <div></div>
  <div>
    <div>
      <h2>Lorem ipsum</h2>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit...
      </p>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit...
      </p>
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </div>
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  </div>
  <div></div>
  </div>
  </div>
</div>
</body>
</html>

body {
  margin: 0;
  padding: 0;
}
#wrapper {
  margin: 0 auto;
  width: 1000px;
}
#header {
  height: 100px;
  background: #2277aa;
}
#wrap {
  float: left;
}
#left {
  float: left;
  width: 250px;
  background: #ddd;
}
#content {
  float: right;
  width: 550px;
  background: #eee;
}
#right {
  float: right;
  /*
  вместо float: right;
  можно использовать
  margin-left: 800px;
  */
  width: 200px;
  background: #ccc;
}
#footer {
  clear: both;
  height: 50px;
  background: #2277aa;
}

Добавим отступы и выравнивание колонок по высоте:

<!DOCTYPE html>
<html>
<head>
<title>Шаблон, три колонки</title>
</head>
<body>
<div>
  <div></div>
  <div>
  <div>
  <div>
    <div>
      <h2>Lorem ipsum</h2>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit...
      </p>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit...
      </p>
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </div>
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  </div>
  <div></div>
  </div>
  </div>
</div>
</body>
</html>

body {
  margin: 0;
  padding: 0;
}
#wrapper {
  margin: 0 auto;
  width: 1000px;
}
#header {
  height: 100px;
  background: #2277aa;
}
#wrap {
  float: left;
}
#left {
  float: left;
  width: 250px;
  padding: 10px;
  background: #ddd;
}
#bg-left {
  background: url(images/bg-left.png) left top repeat-y;
}
#content {
  float: right;
  width: 490px;
  padding: 10px;
  background: #eee;
}
#right {
  float: right;
  /*
  вместо float: right;
  можно использовать
  margin-left: 780px;
  */
  width: 200px;
  padding: 10px;
  background: #ccc;
}
#bg-right {
  background: url(images/bg-right.png) right top repeat-y;
}
#footer {
  clear: both;
  height: 50px;
  background: #2277aa;
}

Три колонки, фиксированный, контент сверху

Еще один способ разместить основной контент перед контентом боковых колонок — использовать отрицательный margin. В этом случае элементы #content, #left и #right можно разместить в любом порядке в html-коде и потом расположить их произвольно на экране. Использование отрицательного поля позволяет «втянуть» элемент, описываемый в коде позже, над элементом, предшествующим ему.

<!DOCTYPE html>
<html>
<head>
<title>Шаблон, три колонки</title>
</head>
<body>
<div>
  <div></div>
  <div>
    <h2>Lorem ipsum</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </p>
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  </div>
  <div></div>
</div>
</body>
</html>

body {
  margin: 0;
  padding: 0;
}
#wrapper {
  margin: 0 auto;
  width: 1000px;
}
#header {
  height: 100px;
  background: #2277aa;
}
#content {
  width: 550px;
  float: left;
  margin-left: 250px;
  background: #eee;
}
#left {
  float: left;
  width: 250px;
  margin-left: -800px;
  background: #ddd;
}
#right {
  float: right;
  /*
  вместо float: right;
  можно использовать
  margin-left: 800px;
  */
  width: 200px;
  background: #ccc;
}
#footer {
  clear: both;
  height: 50px;
  background: #2277aa;
}

Как видите, левое поле элемента <div> должно быть равно ширине левого бокового меню. Если для левого бокового меню мы хотим добавить отступы 10px, то margin-left будет

250px(значение width) + 10px(padding-left) + 10px(padding-right) = 270px

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

Теперь о том, как рассчитать величину отрицательного margin-left для элемента <div>. Складываем ширину элемента #content, левые и правые поля и отступы, а также левую и правую границы. Если центральный столбец имеет ширину 550px, имеет границу 1px, отступ 10px, а также левое поле 270px для размещения левого бокового меню:

550px + 1px + 1px + 10px + 10px + 270px = 842px

Давайте немного улучшим наш шаблон — добавим отступы и выравнивание колонок по высоте с помощью background-image:

<!DOCTYPE html>
<html>
<head>
<title>Шаблон, три колонки</title>
</head>
<body>
<div>
  <div></div>
  <div>
    <div>
      <h2>Lorem ipsum</h2>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit...
      </p>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit...
      </p>
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </div>
  </div>
  <div></div>
</div>
</body>
</html>

body {
  margin: 0;
  padding: 0;
}
#wrapper {
  margin: 0 auto;
  width: 1000px;
}
#header {
  height: 100px;
  background: #2277aa;
}
#content {
  width: 490px;
  float: left;
  margin-left: 270px;
  padding: 10px;
  background: #eee;
}
#left {
  float: left;
  width: 250px;
  margin-left: -780px;
  padding: 10px;
  background: #ddd;
}
#right {
  float: right;
  width: 200px;
  padding: 10px;
  background: #ccc;
}
#bg-left-right {
  background: url(bg-left.png) left top repeat-y, url(bg-right.png) right top repeat-y;
  overflow: hidden;
}
#footer {
  clear: both;
  height: 50px;
  background: #2277aa;
}

Три колонки, резиновый, контент сверху

<!DOCTYPE html>
<html>
<head>
<title>Три колонки</title>
</head>
<body>
<div>
  <div></div>
  <div>
    <div>
      <h2>Lorem ipsum</h2>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit...
      </p>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit...
      </p>
    </div>
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  </div>
  <div></div>
</div>
</body>
</html>

body {
  margin: 0;
  padding: 0;
}
#wrapper {
  min-width: 1000px;
  max-width: 1200px;
  margin: 0 auto;
}
#header {
  height: 100px;
  background: #2277aa;
}
#wrap {
  width: 100%;
  float: left;
}
#content {
  margin: 0 200px 0 250px;
}
#left {
  width: 250px;
  float: left;
  margin-left: -100%;
  background: #ddd;
}
#right {
  width: 200px;
  float: left;
  margin-left: -200px;
  background: #ccc;
}
#footer {
  clear: both;
  height: 50px;
  background: #2277aa;
}

Добавим отступы и выравнивание колонок по высоте:

<!DOCTYPE html>
<html>
<head>
<title>Три колонки</title>
</head>
<body>
<div>
  <div></div>
  <div>
    <div>
      <div>
        <h2>Lorem ipsum</h2>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit...
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit...
        </p>
      </div>
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </div>
  </div>
  <div></div>
</div>
</body>
</html>

body {
  margin: 0;
  padding: 0;
}
#wrapper {
  min-width: 1000px;
  max-width: 1200px;
  margin: 0 auto;
}
#header {
  height: 100px;
  background: #2277aa;
}
#wrap {
  width: 100%;
  float: left;
}
#content {
  margin: 0 220px 0 270px;
  padding: 10px;
}
#left {
  width: 250px;
  float: left;
  padding: 10px;
  margin-left: -100%;
  background: #ddd;
}
#right {
  width: 200px;
  float: left;
  padding: 10px;
  margin-left: -220px;
  background: #ccc;
}
#bg-left-right {
  background: url(bg-left.png) left top repeat-y, url(bg-right.png) right top repeat-y;
  overflow: hidden;
}
#footer {
  clear: both;
  height: 50px;
  background: #2277aa;
}

Поиск: CSS • HTML • Web-разработка • Верстка

seodon.ru | Трехколоночные резиновые макеты сайтов

Опубликовано: 12.05.2011 Последняя правка: 16.12.2015

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

При верстке макетов не забывайте о том, что добавление каким-то HTML-элементам рамок (свойство CSS border), внешних полей (свойство CSS margin) или внутренних отступов (свойство CSS padding) увеличивает их размер, и он становится больше указанных в width (ширина) и height (высота). Если этого не учесть, то верстка макетов может «поехать» или произойдет наложение некоторых элементов HTML друг на друга. В подобных ситуациях необходимо уменьшить ширину и высоту элементов до необходимых размеров.

Три колонки резиновые

Пример HTML и CSS: верстка макета с тремя резиновыми колонками

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Три колонки резиновой ширины</title>
  <style type="text/css">
   body {
    color: #000; /* цвет текста на странице */
    background: #fff; /* фон */
    margin: 0; /* обнуление полей */
   }
   #header {
    height: 100px; /* высота шапки */
    background: #fc0; /* фон */
   }
   #menu {
    width: 25%; /* ширина меню */
    height: 300px; /* высота */
    background: #0fc; /* фон */
    float: left; /* всплытие влево */
   }
   #sidebar {
    width: 20%; /* ширина сайдбара */
    height: 300px; /* высота */
    background: #c0f; /* фон */
    float: right; /* всплытие вправо */
   }
   #content {
    height: 300px; /* высота контента */
    background: #eee; /* фон */
    margin: 0 20% 0 25%; /* боковые поля */
   }
   #footer {
    height: 50px; /* высота футера */
    color: #fff; /* цвет текста */
    background: #000; /* фон */
    clear: both; /* прерывание обтекания */
   }
  </style>
 </head>
 <body>
   <div>Шапка</div>
   <div>Меню</div>
   <div>Сайдбар</div>
   <div>Контент</div>
   <div>Футер</div>
 </body>
</html>

Результат примера

Описание макета

1. Каждой колонке этого трехколоночного макета была задана процентная ширина с помощью CSS width.
2. К колонкам с меню и сайдбаром было применено свойство CSS float для их всплытия по бокам страницы, чтобы блок с контентом поднялся на один уровень с ними.
3. Чтобы колонка с контентом не заплывала под id»menu» и id»sidebar», у нее были указаны боковые внешние поля (CSS margin) равные ширине этих боковых колонок.
4. Чтобы блок с футером не обтекал колонки, когда какая-то из них будет выше других, у id»footer» было создано прерывание обтекания (CSS clear:both).

Центральная резиновая, боковые колонки фиксированные

Пример HTML и CSS: верстка макета с центральной резиновой и боковыми фиксированными колонками

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Центральная резиновая, а боковые фиксированные колонки</title>
  <style type="text/css">
   body {
    color: #000;
    background: #fff;
    margin: 0;
   }
   #header {
    height: 100px;
    background: #fc0;
   }
   #menu {
    width: 250px;
    height: 300px;
    background: #0fc;
    float: left;
   }
   #sidebar {
    width: 200px;
    height: 300px;
    background: #c0f;
    float: right;
   }
   #content {
    height: 300px;
    background: #eee;
    margin: 0 200px 0 250px;
   }
   #footer {
    height: 50px;
    color: #fff;
    background: #000;
    clear: both;
   }
  </style>
 </head>
 <body>
   <div>Шапка</div>
   <div>Меню</div>
   <div>Сайдбар</div>
   <div>Контент</div>
   <div>Футер</div>
 </body>
</html>

Результат примера

Описание макета

В этом трехколоночном макете применены те же приемы, что и в предыдущем, за исключением того, что процентные значения заменены пикселями.

Левая резиновая, колонки справа фиксированные

Пример HTML и CSS: верстка макета с левой резиновой и правыми фиксированными колонками

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Слева резиновая, а справа фиксированные колонки</title>
  <style type="text/css">
   body {
    color: #000; /* цвет текста страницы */
    background: #fff; /* фоновый цвет */
    margin: 0; /* убираем поля по краям */
   }
   #header {
    height: 100px; /* высота шапки */
    background: #fc0; /* фон */
   }
   #sidebar {
    width: 200px; /* ширина сайдбара */
    height: 300px; /* высота */
    background: #c0f; /* фон */
    float: right; /* всплытие вправо */
   }
   #menu {
    width: 250px; /* ширина меню */
    height: 300px; /* высота */
    background: #0fc; /* фон */
    float: right; /* всплывает вправо */
   }
   #content {
    height: 300px; /* высота контента */
    background: #eee; /* фон */
    margin-right: 450px; /* размер поля справа */
   }
   #footer {
    height: 50px; /* высота футера */
    color: #fff; /* цвет его текста */
    background: #000; /* фон */
    clear: both; /* убираем обтекание */
   }
  </style>
 </head>
 <body>
   <div>Шапка</div>
   <div>Сайдбар</div>
   <div>Меню</div>
   <div>Контент</div>
   <div>Футер</div>
 </body>
</html>

Результат примера

Описание макета

1. Меню и сайдбару было задано всплытие вправо (CSS float), чтобы колонка контента могла их обтечь и подняться на один с ними уровень.
2. У колонки с было указано внешнее правое поле (CSS margin-right) равное суммарной ширине меню и сайдбара, чтобы она не заплывала под них.
3. Чтобы футер ни при каких условиях не обтекал колонки, ему было задано свойство CSS clear:both для прерывания этого обтекания.

Три колонки с резиновым контентом впереди

Пример HTML и CSS: верстка макета с резиновой колонкой контента впереди

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Макет в три колонки с контентом впереди</title>
  <style type="text/css">
   body {
    color: #000; /* цвет текста страницы */
    background: #fff; /* фон */
    margin: 0; /* обнуление полей */
   }
   #header {
    height: 100px; /* высота шапки */
    background: #fc0; /* фон */
   }
   #cont_wrap {
    float: left; /* вспрытие обертки влево */
    width: 100%; /* ее ширина */
   }
   #content {
    height: 300px; /* высота контента */
    background: #eee; /* фон */
    margin: 0 200px 0 250px; /* боковые поля */
   }
   #menu {
    width: 250px; /* ширина меню */
    height: 300px; /* высота */
    background: #0fc; /* фон */
    float: left; /* всплытие влево */
    margin-left: -100%; /* левое отрицательное поле */
   }
   #sidebar {
    width: 200px; /* ширина сайдбара */
    height: 300px; /* высота */
    background: #c0f; /* фон */
    float: left; /* всплытие влево */
    margin-left: -200px; /* левое отрицательное поле */
   }
   #footer {
    height: 50px; /* высота футера */
    color: #fff; /* цвет текста */
    background: #000; /* фон */
    clear: both; /* прерываем обтекание  */
   }
  </style>
 </head>
 <body>
  <div>Шапка</div>
  <div>
   <div>Контент</div>
  </div>
  <div>Меню</div>
  <div>Сайдбар</div>
  <div>Футер</div>
 </body>
</html>

Результат примера

Описание макета

1. Чтобы в этом трехколоночном макете контент можно было поставить выше в HTML-коде, его пришлось заключить в дополнительный блок-обертку с. Ему было указано всплытие влево (CSS float:left), чтобы боковые колонки могли подняться на один уровень с контентом, и стопроцентная ширина (CSS width:100%), чтобы его размер не уменьшился при всплытии.
2. Чтобы колонка с контентом не подныривала под боковые колонки, у были установлены боковые внешние поля (CSS margin) равные ширине меню и сайдбара.
3. Чтобы боковые колонки заняли свое место, им было задано левое отрицательное поле с помощью свойства CSS margin-left, где у меню оно равно 100%, а у сайдбара — ширине его самого.
4. У футера было установлено прерывание обтекания (CSS clear), чтобы он всегда находился под колонками.

Где и как использовать мультиколонки (CSS Columns) / Habr

При всём ажиотаже вокруг технологий CSS Grid и Flexbox, часто упускается из виду другой метод разметки. В этой статье я хочу рассмотреть многоколоночный макет — часто называемый просто «Multicol» или «CSS Columns». Вы узнаете, для каких задач он подходит и какие нюансы следует учитывать при его использовании.

---

Что такое мультиколонки?

Основная идея мультиколонок заключается в том, что вы можете взять фрагмент содержимого и поместить его в несколько колонок, как в газете. Вы делаете это с помощью одного или двух свойств. Свойство column-count задаёт количество колонок, на которое вам бы хотелось разбить содержимое. Свойство column-width задаёт идеальную ширину, давая возможность браузеру самому определить, сколько колонок при этом поместится.

Неважно, какие элементы находятся внутри блока, который вы превращаете в многоколоночный контейнер, все элементы остаются в обычном потоке, но разбиваются на колонки. Это делает CSS Columns непохожим на другие методы вёрстки, которые у нас есть в браузерах сегодня. Flexbox и Grid, например, берут дочерние элементы контейнера, а затем эти элементы участвуют в flex или grid макете. В случае с CSS Columns, у вас всё ещё имеется обычный поток, только не внутри самой колонки.

В примере ниже я использую column-width, чтобы сделать колонки шириной как минимум 14em. CSS Columns определяет, сколько колонок шириной 14em поместятся в контейнере, а затем распределяет между ними оставшееся пространство. Колонки будут иметь ширину не меньше 14em, кроме ситуации, когда помещается только одна колонка, в этом случае она может становиться уже. CSS Columns стал первым случаем, в котором мы столкнулись с подобным поведением в CSS, создавая колонки, которые по умолчанию были отзывчивыми. Нет необходимости добавлять медиа-выражения и изменять количество колонок на разных контрольных точках, вместо этого мы указываем оптимальную ширину и браузер будет работать с ней.

Стилизация колонок

Блоки колонок, созданные с помощью свойств CSS Columns, не могут быть выбраны для стилизации. Вы не можете выбрать их с помощью JavaScript или стилизовать отдельный блок, чтобы задать ему цвет фона или настроить padding или margin. Все блоки колонок будут одинакового размера. Единственное, что вы можете сделать, — это добавить разделительную линию между колонками, используя свойство column-rule, которое работает как border. Вы также можете настраивать отступ между колонками, используя свойство column-gap, которое имеет значение по умолчанию 1em, однако вы можете изменить его на любую другую допустимую единицу длины
Это базовый функционал CSS Columns. Вы можете взять часть содержимого и разделить на колонки. Содержимое будет заполнять колонки, создавая их в линейном направлении. Вы можете контролировать промежуток между колонками и добавить разделительную линию, указав те же значения, что и у border. Пока что всё идет хорошо, а всё вышеперечисленное очень хорошо поддерживается в браузерах и уже на протяжении длительного времени, что делает эту спецификацию очень безопасной для использования с точки зрения обратной совместимости.

Существуют особенности функционала CSS Columns и некоторые потенциальные проблемы, которые следует учитывать при использовании колоночного макета в вебе.

Охват колонок

Порой вам может потребоваться разбить некоторый контент на колонки, но затем один элемент разместить поперек, охватив блоки колонок. Достигнуть этого можно, применив свойство column-span к потомку колоночного контейнера.

В примере ниже, я заставила элемент <blockquote> охватить колонки. Заметьте, когда вы делаете это, содержимое разбивается на набор полей выше этого элемента, затем начинает новый набор колонок ниже него. Содержимое не перепрыгивает через охватывающий элемент.

На данный момент свойство column-span по умолчанию работает во всех браузерах, кроме Firefox. В нём оно еще разрабатывается и скрыто за флагом

Имейте в виду, что в текущей спецификации значением свойства column-span может быть только all или none. Вы не можете охватить только некоторые колонки, но можете получить такой результат, комбинируя колоночный макет с другими методами вёрстки. В следующем примере у меня есть Grid-контейнер с двумя столбцами. Левый столбец имеет ширину 2fr, а правый — 1fr. В левом столбце я обернула статью в колоночный контейнер с двумя колонками, также имеющими охватывающий элемент.

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

Контроль переноса содержимого

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

Разделяя содержимое на колонки, вы выполняете так называемую фрагментацию. То же самое справедливо, если вы разделяете ваш контент между страницами, например, когда создаёте стили для печати. Следовательно, колонки ближе к Paged Media, чем к другим методам разметки в вебе. Из-за этого, в течение нескольких лет способом контроля переносов в содержимом было использование свойств page-break-, которые были частью CSS 2.1.

• page-break-before
• page-break-after
• page-break-inside

Позже спецификация CSS Fragmentation определила свойства, которые были разработаны для любого фрагментированного контекста, спецификация включает подробности для Paged Media, CSS Columns, и отложенной спецификации Regions; Regions также фрагментирует непрерывный фрагмент содержимого. Сделав эти свойства общими, их можно применять к любому будущему фрагментированному контексту, точно так же, как свойства выравнивания из Flexbox были перемещены в спецификацию Box Alignment для того, чтобы их можно было использовать в Grid и Block разметке

• break-before
• break-after
• break-inside

Как пример, я использовала свойство bread-inside: avoid для элемента <figure>, чтобы предотвратить отделение подписи от самой картинки. Браузер, поддерживающий это свойство, должен сохранить элемент цельным, даже если колонки при этом будут выглядеть неравномерными.
К сожалению, поддержка этих свойств в CSS Columns довольно неоднозначна. Но даже там, где они поддерживаются, их следует рассматривать как предложение из-за того, что необходимо делать так много запросов, чтобы контролировать перенос, что браузер, по сути, не может делать перенос в любом месте. Спецификация определяет приоритеты в этом случае, однако для вас это может быть даже более полезно контролировать только наиболее важные ситуации.

Проблема колонок в вебе

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

Если вы зафиксируете высоту контейнера, например, используя единицу измерения области просмотра vh, а содержимого будет слишком много, тогда переполнение произойдет в строчном направлении и мы получим горизонтальную прокрутку.

Указанная проблема делает использование CSS Columns в вебе тем, с чем мы должны работать очень осторожно с точки зрения количества размещаемого в нём содержимого.

Колонки, переполняющие блок

Для уровня 2 спецификации CSS Columns мы рассматриваем, как включить метод, с помощью которого переполненные колонки, те которые в данный момент приводят к появлению горизонтальной прокрутки, вместо этого увеличивались в блочном направлении.

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

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

Чем мультиколонки полезны сегодня?

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

Сокращение небольших элементов интерфейса или текста

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

Вы можете видеть пример подобного использования колонок на сайте DonarMuseum

Заранее известное небольшое количество содержимого

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

Andy Clarke разработал прекрасный пример для сайта Equfund

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

Masonry-подобное отображение контента

Другой пример, когда колоночный макет отлично работает — в ситуациях, когда вы хотите отобразить содержимое в стиле Masonry. Колонки в данный момент — это единственный метод разметки, который создаст этот тип разметки с элементами разной высоты. CSS Grid не оставит отступ или растянет элемент, чтобы строго соответствовать двухмерной сетке.

У Veerle Pieters есть отличный пример использования колонок для этих целей на её вдохновляющей странице.

Grid и Flexbox фолбеки

Свойства column- также могут быть использованы как фолбек для Grid или Flex макета. Если вы укажете одно из колоночных свойств для контейнера, а затем превратите этот контейнер во Flex или Grid макет с помощью display: flex или display: grid любое поведение колонок будет отменено. Если у вас есть, например, карточный макет, который использует CSS Grid, и при этом будет удобочитаемым в нескольких колонках, можно использовать колонки как простой запасной вариант. Браузеры, которые не поддерживают CSS Grid, получат колоночное отображение, те которые поддерживают, получат Grid-сетку.

Не забывайте про мультиколонки!

Довольно часто, отвечая на вопросы о выборе между Grid или Flexbox, вместо них я рекомендую мультиколонки. Возможно, вы не будете использовать их на каждом сайте, но когда столкнетесь с подходящей задачей, они могут стать действительно полезными. На MDN присутствуют полезные ресурсы по CSS Columns и связанным с ними fragmentation properties.

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

Многоколоночность на CSS подробнее / Habr

В продолжение своего топика Новое в CSS3: многоколоночность, flexbox, сеточная разметка предлагаю вам перевод статьи с более глубоким погружением в свойство многоколоночности с простыми и наглядными примерами.

Еще газетами и журналами на практике доказано, что разбитый на несколько колонок текст воспринимается намного проще. На веб-страницах до недавнего времени отобразить контент таким образом было проблемой, доходило до того, что верстальщик разделял текст на несколько div’ов. Но все может стать намного проще с CSS3 Multi Column Module.

Официальная спецификация, Поддержка браузерами.

Создание контента, разбитого на несколько колонок

Используем HTML5-тег article:

<article>  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et,  
    rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor.  
    Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit  
    amet tincidunt orci placerat in. Integer vitae consequat augue.  
  
    //и т.д.
</article>  

Разбиваем текст на две колонки:

article {  
    -webkit-column-count:2;  
    -moz-column-count:2;  
    column-count:2;  
}  

При помощи свойства column-width можно задать колонкам необходимую ширину:

article {  
    -moz-column-width: 150px;  
    -webkit-column-width: 150px;   
    column-width: 150px;  
}  

Интервал между колонками

Интервал задается свойством column-gap в px или em, и не может быть отрицательным:

article {     
    -webkit-column-gap: 30px;  
    -moz-column-gap: 30px;  
    column-gap: 30px;  
}  

Разделитель колонок

Свойство column-rule позволяет добавлять разделитель между колонками, принцип работы схож с border.

article {  
    -moz-column-rule: 1px dotted #ccc;  
    -webkit-column-rule: 1px dotted #ccc;  
    column-rule: 1px dotted #ccc;  
}  

Объединение колонок

Свойство column-span работает аналогично с colspan в table, объединяя нужные колонки.

article h2 {  
    -webkit-column-span: all;  
    column-span:all;  
}  

Демо всех примеров

+ исходники.

Итог

Благодаря CSS3 Multi Column Module можно очень просто и быстро разбивать тексты на удобочитаемые колонки. Список поддерживаемых браузеров уже достаточен, чтобы примерять мультиколоночность на рабочих проектах. Для устаревших браузеров можно применять специальную javascript-библиотеку.