Свойство break-inside определяет принципы расстановки разрыва страниц и колонок внутри текущем элементом. По умолчанию, разрывы страниц или колонок расстанавливаются автоматически и не наследуются от родительских элементов. Значение avoid-page используются только при форматировании страничных документов, например, при печати, и игнорируются для представлений без разбивки, например, во время отображения в браузере. Значение avoid-column используются для многоколоночного текста.

Допустимые значения

• CSS2 CSS3 auto - автоматический разрыв страницы или колоноки перед текущим элементом (по умолчанию)
• CSS2 CSS3 avoid
• CSS3 avoid-page - отмена разрыва страницы внутри текущего элемента
• CSS3 avoid-column - отмена разрыва колонки внутри текущего элемента

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

break-inside: auto; - равномерное распределение

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

Style { column-count: 3; column-gap: 2em; column-rule: 1px solid #666; }

Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

break-inside: avoid-column; - отмена разрыва колонок

Style { column-count: 3; column-gap: 2em; column-rule: 1px solid #666; } .style div { break-inside: avoid-column; }

1-ый блок текст текст текст текст текст текст текст текст текст

2-ой блок текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

3-ий блок текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

Свойство break-inside определено в спецификации CSS 3 модуль Multi-column Layout (многоколоночная разметка) , применяется к блочным элементам, и действует на всех страничные носителях, его значение не наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение auto. На данный момент свойство поддерживается во всех основных браузерах.

Смотри также:

• break-after - правила установки разрыва колонки или страницы после элемента
• break-before - правила установки разрыва колонки или страницы перед элементом
• -webkit-column-break-after - правила установки разрыва колонки после элемента
• -webkit-column-break-before - правила установки разрыва колонки перед элементом
• -webkit-column-break-inside - правила установки разрыва колонки внутри элемента

Модуль CSS3 columns описывает многоколоночный макет, который позволяет организовать содержимое так, чтобы оно занимало несколько вертикальных контейнеров, подобно газете или журналу. Колонки могут содержать заголовки, текст, таблицы, картинки и любые другие inline -элементы.

Многоколоночная модель

Поддержка браузерами

IE: 10
Edge: 12
Firefox: 52, 2 -moz
Chrome: 50, 4 -webkit-
Safari: 9, 3.1 -webkit-
Opera: 37, 11.5 -webkit-
iOS Safari: 9, 3.2 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 5, 4 -webkit-

The old post

November 24, 2012

15 Most Charming Small Towns In England

1. Berwick-upon-Tweed

Berwick was founded as an Anglo-Saxon settlement during the time of the Kingdom of Northumbria, which was annexed by England in the 10th century. The area was for more than 400 years central to historic border wars between the Kingdoms of England and Scotland, and several times possession of Berwick changed hands between the two kingdoms. The last time it changed hands was when Richard of Gloucester retook it for England in 1482. To this day many Berwickers feel a close affinity to Scotland.

Nowadays Berwick-upon-Tweed is much-visited for its highly visible history: medieval town walls, Elizabethan ramparts, 13th century castle ruins, its 17th century ‘Old Bridge’, town hall, Britain’s earliest army barracks, England’s northernmost hotel, amongst others.

2. Rye

Ancient Rye is all cobbled streets and tumbledown rows of houses by the sea. Originally part of the Cinque Ports Confederation, five strategic towns important for trade and military purposes in medieval times, today Rye is practically a living museum. Rye Castle, popularly known as Ypres Tower, was built in 1249 by Henry III to protect against frequent raids by the French; even older, the Norman-era St. Mary’s Church looks over the town. Rye is also just a few minutes away from one of England’s most famous beaches, Camber Sands, a two-mile-long playground for kitesurfers and beachlovers.

Фигура 1. Пример многоколоночной разметки

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

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

Третье свойство, columns , является сокращенным свойством, которое устанавливает ширину и количество колонок одновременно.

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

1.1. Ширина колонок: свойство column-width

Свойство column-width указывает минимальную ширину, которую должен занимать каждый столбец.

Свойство не наследуется.

Синтаксис

Column-width: auto; column-width: 100px; column-width: 10em; column-width: 3.3vw; column-width: inherit; column-width: initial;

1.2. Количество колонок: свойство column-count

Свойство column-count описывает количество колонок, а их ширина будет рассчитываться, исходя из ширины доступного пространства. Если одновременно с column-count задается column-width , то значение column-count будет считаться максимальным числом колонок.

Свойство не наследуется.

Синтаксис

Column-count: auto; column-count: 2; column-count: inherit; column-count: initial;

1.3. Установка колонок с помощью одного свойства columns

Свойство columns — это сокращенное свойство для установки column-width и column-count . Опущенные значения устанавливаются в их начальные значения.

Свойство не наследуется.

Синтаксис

Columns: 12em; /* column-width: 12em; column-count: auto */ columns: auto 12em; /* column-width: 12em; column-count: auto */ columns: 2; /* column-width: auto; column-count: 2 */ columns: 2 auto; /* column-width: auto; column-count: 2 */ columns: auto; /* column-width: auto; column-count: auto */ columns: auto auto; /* column-width: auto; column-count: auto */ columns: inherit; columns: initial;

2. Промежутки между колонками и разделительные линии

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

Разделительная линии рисуется в середине промежутка между колонками, не занимая места. То есть наличие или толщина разделительной линии не изменит размещение чего-либо еще.

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

2.1. Промежутки между колонками: свойство column-gap

Свойство column-gap определяет разрыв между колонками. Если для колонок установлена разделительная линия с помощью свойства column-rule , то эта линия будет расположена посередине промежутка, а ее ширина не изменит общую ширину.

Свойство не наследуется.

Синтаксис

Column-gap: normal; column-gap: 3px; column-gap: 2.5em; column-gap: 3%; column-gap: inherit; column-gap: initial;

2.2. Цвет разделительной линии: свойство column-rule-color

Свойство column-rule-color определяет цвет разделительной линии.

Свойство не наследуется.

Синтаксис

Column-rule-color: pink; column-rule-color: #D71C3B; column-rule-color: rgb(192, 56, 78); column-rule-color: transparent; column-rule-color: hsla(0, 100%, 50%, 0.6); column-rule-color: inherit; column-rule-color: initial;

2.3. Стиль разделительной линии: свойство column-rule-style

Свойство column-rule-style устанавливает стиль разделительной линии.

Свойство не наследуется.

Синтаксис

Column-rule-style: none; column-rule-style: hidden; column-rule-style: dotted; column-rule-style: dashed; column-rule-style: solid; column-rule-style: double; column-rule-style: groove; column-rule-style: ridge; column-rule-style: inset; column-rule-style: outset; column-rule-style: inherit; column-rule-style: initial;

2.4. Ширина разделительной линии: свойство column-rule-width

Свойство column-rule-width устанавливает ширину разделительной линии. Отрицательные значения не допускаются. Не работает без свойства column-rule-style .

Свойство не наследуется.

Синтаксис

Column-rule-width: thin; column-rule-width: medium; column-rule-width: thick; column-rule-width: 1px; column-rule-width: 2.5em; column-rule-width: inherit; column-rule-width: initial;

2.5. Краткая запись свойств разделительной линии: свойство column-rule

Свойство column-rule является сокращенной записью свойств column-rule-width column-rule-style column-rule-color .

Свойство не наследуется.

Синтаксис

Column-rule: dotted; column-rule: solid 8px; column-rule: solid blue; column-rule: thick inset blue; column-rule: inherit; column-rule: initial;

3. Разрыв колонок

Когда содержимое размещено в нескольких колонках, браузер должен определить, где размещаются разрывы колонок. Проблема разбиение контента на колонки аналогична разбиению контента на страницы. Для решения этого вопроса было введено три новых свойства, позволяющих описывать разрывы столбцов в тех же свойствах, что и разрывы страниц: break-before , break-after и break-inside .

4. Охват колонок: свойство column-span

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

В будущем будет возможно указать количество колонок для охвата, подобно атрибуту colspan , который может быть применен к ячейке таблицы, но в спецификации CSS3 есть только два возможных значения: none и all .

Свойство не работает по умолчанию в Firefox. Пользователь должен явно включить функцию, в layout.css.column-span.enabled должно быть установлено значение true . Чтобы изменить настройки в Firefox, зайдите в about:config .

Свойство не наследуется.

Синтаксис

Column-span: none; column-span: all; column-span: inherit; column-span: initial;

5. Заполнение колонок содержимым: свойство column-fill

Свойство column-fill контролирует заполнение колонок содержимым. Существует две стратегии заполнения колонок: колонки могут быть выровнены по высоте или нет. Если колонки выровнены, браузеры должны попытаться минимизировать изменения высоты колонки, учитывая при этом вынужденные разрывы, widows , orphans и другие свойства, которые могут влиять на высоту колонок. Если колонки не выровнены, они заполняются последовательно, некоторые из них могут быть частично заполнены или вообще не заполнены.

Свойство не наследуется.

Синтаксис

Column-fill: auto; column-fill: balance; column-fill: balance-all; column-fill: inherit; column-fill: initial;

6. Переполнение

6.1. Переполнение внутри многоколоночных контейнеров

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

Img { display: block; /*убираем нижний отступ под картинкой*/ width: 100%; /*растягиваем изображение на всю ширину блока-контейнера*/ }

6.2. Разбивка на страницы и переполнение вне многоколоночных контейнеров

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

Многоколоночный контейнер может иметь больше колонок, чем у него есть для этого места из-за ограничения высоты колонок (например, с помощью height или max-height) и явных разрывов колонок. В этом случае дополнительные колонки создаются в направлении строки, перемещаясь на следующие страницы.

The CSS Multi-column Layout Module extends the block layout mode to allow the easy definition of multiple columns of text. People have trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. Therefore, to make maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do.

Unfortunately this is impossible to do with CSS and HTML without forcing column breaks at fixed positions, or severely restricting the markup allowed in the text, or using heroic scripting. This limitation is solved by adding new CSS properties to extend the traditional block layout mode.

Using columns

Column count and width

Two CSS properties control whether and how many columns will appear: column-count and column-width .

The column-count property sets the number of columns to a particular number. E.g.,

Example 1

HTML

CSS

Result

Will display the content in two columns (if you"re using a multi-column compliant browser):

The column-width property sets the minimum desired column width. If column-count is not also set, then the browser will automatically make as many columns as fit in the available width.

Example 2

HTML

CSS

Result

In a multi-column block, content is automatically flowed from one column into the next as needed. All HTML, CSS and DOM functionality is supported within columns, as are editing and printing.

The columns shorthand

Most of the time, a Web designer will use one of the two CSS properties: column-count or column-width . As values for these properties do not overlap, it is often convenient to use the shorthand columns . E.g.

The CSS declaration column-width: 12em can be replaced by columns: 12em .

Example 3

HTML

CSS

The CSS declaration column-count: 4 can be replaced by columns: 4 .

Example 4

HTML

CSS

Result

The two CSS declarations column-width: 8em and column-count: 12 can be replaced by columns: 12 8em .

Example 5

HTML

CSS

Result

Height Balancing

The CSS3 Column specification requires that the column heights must be balanced: that is, the browser automatically sets the maximum column height so that the heights of the content in each column are approximately equal. Firefox does this.

However, in some situations it is also useful to set the maximum height of the columns explicitly, and then lay out content starting at the first column and creating as many columns as necessary, possibly overflowing to the right. Therefore, if the height is constrained, by setting the CSS height or max-height properties on a multi-column block, each column is allowed to grow to that height and no further before adding new column. This mode is also much more efficient for layout.

Column Gaps

There is a gap between columns. The recommended default is 1em . This size can be changed by applying the column-gap property to the multi-column block:

Example 6

HTML

CSS

Result

Graceful Degradation

The column properties will just be ignored by non-columns-supporting browsers. Therefore it"s relatively easy to create a layout that will display in a single column in those browsers and use multiple columns in supporting browsers.

Conclusion

CSS3 columns are a layout primitive that will help Web developers make the best use of screen real estate. Imaginative developers may find many uses for them, especially with the automatic height balancing feature.

Как расположить текст на странице в несколько колонок? И можно ли это делать автоматически? Наверняка, многие из тех из вас, кто занимается или занимался раньше веб-разработкой, сталкивались с такой задачей — и часто упирались в сложные решения, требующие хитрых стилей , либо применения дополнительных библиотек на JavaScript (см. например Columnizer-плагин для jQuery).

Многоколоночная верстка контента (не путать с задачей общей многоколоночной верстки страницы, которая скорее ближе к проблеме расположения блоков по сетке) долго пробивала себе дорогу в мире веб-стандартов и, наконец-то, не просто достигла статуса Candidate Recommendation в виде соответствующего модуля CSS3 Multi-column Layout , но и получила достаточно широкую поддержку в браузерах : где-то с префиксами (-moz- или -webkit-) и где-то в актуальных (Opera 11.1+) и планируемых версиях (IE10+), причем сразу без префиксов.

Замечание
В случае Internet Explorer 10 это автоматически означает возможность использования CSS3 Multi-column при разработке приложений в стиле Metro для Windows 8 с использованием HTML/CSS/JS.

В рамках статьи я не буду использовать браузерные префиксы, чтобы на запутывать код, но при реальном использовании не забудьте добавить поддержку префиксов для Firefox, Safari и Chrome.

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

Во-вторых, многоколоночное отображение хорошо сочетается с возможностями Media Queries (и идеями отзывчивого дизайна, ), например, при разных размерах экрана можно форматировать текст в разное количество колонок:

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

В этом смысле горизонтальная природа колонок лучше сочетается с горизонтальным скроллом (как это, используется во многих приложениях для Win8 — например, это хорошо видно по приложению USA Today):

В общем, колонки — это прекрасно, но не забывайте об удобстве пользователей. А теперь в бой!

Колонки

Чтобы превратить такой элемент в многоколоночный нужно через стили в CSS выставить одно из свойств: column-width или column-count в значение, отличное от auto . Например,
чтобы разбить текст на две колонки, достаточно сделать так:

Article { column-count: 2; }

Все остальное сделает браузер:

Альтернативное свойство — column-width — позволяет задать оптимальную ширину колонок:

Article { column-width: 150px; }

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

Такое поведение определено спецификацией и позволяет (автоматически) добиться большей гибкости при разработке адаптивной разметки:

Например, если у вас контейнер шириной 100px и вы задали колонки шириной 45px, то браузер посчитает, что влезет только две колонки, а чтобы заполнить все место, увеличит размер каждой до 50px. (Здесь также учитывается отступ между колонками, о чем будет рассказано в следующем разделе.)

В определенном смысле, это можно рассматривать как альтернативу указанию с помощью Media Queries разного количества колонок в зависимости от размера окна и с автоматическим рассчетом ширины колонок:

@media (min-width:400px) { article { column-count: 2; } } @media (min-width:600px) { article { column-count: 3; } } ...

Я второй раз говорю про альтернативу — и вот почему.

count vs. width

• column-count позволяет указать число колонок, на которые нужно поделить контент, при этом ширину колонок определяет браузер с учетом доступного пространства.
• column-width заходит с обратной стороны: указывает, какими примерно должны быть колонки, однако, оставляет рассчет их количества на усмотрение браузера.

Columns: 12em; /* column-width: 12em; column-count: auto; */ columns: 2; /* column-width: auto; column-count: 2; */ columns: auto; /* column-width: auto; column-count: auto; */ columns: auto 12em; /* column-width: 12em; column-count: auto; */ columns: 2 auto; /* column-width: auto; column-count: 2; */

Что будет, если указать и количество колонок, и оптимальную ширину? Согласно спецификации, в этом случае column-count определяет максимальное количество колонок:

Article { columns: 150px 3; /* column-width: 150px; column-count: 3; */ }

По существу дела, следя за развитием веб-стандартов, в том числе по некоторым моим статьям про CSS3 (см. например, ), я надеюсь, вы с не меньшим вдохновением смотрите на открывающиеся перед веб-разработчиками возможностями. Адаптивные, гибкие и мощные средства для управления размещением контента все ближе и доступнее. А решение сложных задач — все проще.

Интерактив

Пробуйте, эксперементируйте. Сообщайте разработчикам браузеров о багах. И не забывайте продумать, что увидят пользователи старых (и вроде бы современных, но все еще не полностью поддерживающих стандарт) браузеров — например, можно использовать плагин для jQuery Columnizer . Помните об адаптивности и зрителях маленьких и больших экранов.

Как расположить текст на странице в несколько колонок? И можно ли это делать автоматически? Наверняка, многие из тех из вас, кто занимается или занимался раньше веб-разработкой, сталкивались с такой задачей — и часто упирались в сложные решения, требующие хитрых стилей , либо применения дополнительных библиотек на JavaScript (см. например Columnizer-плагин для jQuery).

Многоколоночная верстка контента (не путать с задачей общей многоколоночной верстки страницы, которая скорее ближе к проблеме расположения блоков по сетке) долго пробивала себе дорогу в мире веб-стандартов и, наконец-то, не просто достигла статуса Candidate Recommendation в виде соответствующего модуля CSS3 Multi-column Layout , но и получила достаточно широкую поддержку в браузерах : где-то с префиксами (-moz- или -webkit-) и где-то в актуальных (Opera 11.1+) и планируемых версиях (IE10+), причем сразу без префиксов.

Замечание
В случае Internet Explorer 10 это автоматически означает возможность использования CSS3 Multi-column при разработке приложений в стиле Metro для Windows 8 с использованием HTML/CSS/JS.

В рамках статьи я не буду использовать браузерные префиксы, чтобы на запутывать код, но при реальном использовании не забудьте добавить поддержку префиксов для Firefox, Safari и Chrome.

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

Во-вторых, многоколоночное отображение хорошо сочетается с возможностями Media Queries (и идеями отзывчивого дизайна, ), например, при разных размерах экрана можно форматировать текст в разное количество колонок:

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

В этом смысле горизонтальная природа колонок лучше сочетается с горизонтальным скроллом (как это, используется во многих приложениях для Win8 — например, это хорошо видно по приложению USA Today):

В общем, колонки — это прекрасно, но не забывайте об удобстве пользователей. А теперь в бой!

Колонки

Чтобы превратить такой элемент в многоколоночный нужно через стили в CSS выставить одно из свойств: column-width или column-count в значение, отличное от auto . Например,
чтобы разбить текст на две колонки, достаточно сделать так:

Article { column-count: 2; }

Все остальное сделает браузер:

Альтернативное свойство — column-width — позволяет задать оптимальную ширину колонок:

Article { column-width: 150px; }

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

Такое поведение определено спецификацией и позволяет (автоматически) добиться большей гибкости при разработке адаптивной разметки:

Например, если у вас контейнер шириной 100px и вы задали колонки шириной 45px, то браузер посчитает, что влезет только две колонки, а чтобы заполнить все место, увеличит размер каждой до 50px. (Здесь также учитывается отступ между колонками, о чем будет рассказано в следующем разделе.)

В определенном смысле, это можно рассматривать как альтернативу указанию с помощью Media Queries разного количества колонок в зависимости от размера окна и с автоматическим рассчетом ширины колонок:

@media (min-width:400px) { article { column-count: 2; } } @media (min-width:600px) { article { column-count: 3; } } ...

Я второй раз говорю про альтернативу — и вот почему.

count vs. width

• column-count позволяет указать число колонок, на которые нужно поделить контент, при этом ширину колонок определяет браузер с учетом доступного пространства.
• column-width заходит с обратной стороны: указывает, какими примерно должны быть колонки, однако, оставляет рассчет их количества на усмотрение браузера.

Columns: 12em; /* column-width: 12em; column-count: auto; */ columns: 2; /* column-width: auto; column-count: 2; */ columns: auto; /* column-width: auto; column-count: auto; */ columns: auto 12em; /* column-width: 12em; column-count: auto; */ columns: 2 auto; /* column-width: auto; column-count: 2; */

Что будет, если указать и количество колонок, и оптимальную ширину? Согласно спецификации, в этом случае column-count определяет максимальное количество колонок:

Article { columns: 150px 3; /* column-width: 150px; column-count: 3; */ }

По существу дела, следя за развитием веб-стандартов, в том числе по некоторым моим статьям про CSS3 (см. например, ), я надеюсь, вы с не меньшим вдохновением смотрите на открывающиеся перед веб-разработчиками возможностями. Адаптивные, гибкие и мощные средства для управления размещением контента все ближе и доступнее. А решение сложных задач — все проще.

Интерактив

Пробуйте, эксперементируйте. Сообщайте разработчикам браузеров о багах. И не забывайте продумать, что увидят пользователи старых (и вроде бы современных, но все еще не полностью поддерживающих стандарт) браузеров — например, можно использовать плагин для jQuery Columnizer . Помните об адаптивности и зрителях маленьких и больших экранов.