Module CSS3 columns describes a multi-column layout that allows content to be organized so that it spans multiple vertical containers, similar to a newspaper or magazine. Columns can contain headings, text, tables, pictures and any other inline elements.

Multi-column model

Browser Support

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, among 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.

Figure 1. An example of a multi-column layout

1. Number and width of columns

Determining the number and width of columns is fundamental when building a multi-column layout. The column-count and column-width properties are used to set the number and width of columns.

The third property, columns , is a shorthand property that sets the width and number of columns at the same time.

Other factors such as explicit column breaks, content, and height constraints can affect the actual number and width of columns.

1.1. Column width: column-width property

The column-width property specifies the minimum width each column should occupy.

The property is not inherited.

Syntax

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

1.2. Number of columns: column-count property

The column-count property describes the number of columns, and their width will be calculated based on the width of the available space. If column-width is specified at the same time as column-count , then the value of column-count will be considered the maximum number of columns.

The property is not inherited.

Syntax

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

1.3. Setting columns with a single columns property

The columns property is a shorthand property for setting column-width and column-count . The omitted values ​​are set to their initial values.

The property is not inherited.

Syntax

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. Column spacing and dividing lines

Column spacing and separator lines are placed between columns in a single multi-column container. The length of the spaces and separators is equal to the height of the column. Column gaps take up space, that is, they push apart content in adjacent columns.

The dividing line is drawn in the middle of the gap between columns without taking up any space. That is, the presence or thickness of the dividing line will not change the placement of anything else.

The lines are filled just above the border of the multi-column element. If the element has a scroll area, the separator lines scroll along with the columns. Separation lines are only displayed between two columns that have content.

2.1. Gap between columns: column-gap property

The column-gap property defines the gap between columns. If columns have a separator line set using the column-rule property, then this line will be located in the middle of the gap, and its width will not change the overall width.

The property is not inherited.

Syntax

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

2.2. Separator line color: column-rule-color property

The column-rule-color property specifies the color of the separator line.

The property is not inherited.

Syntax

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. Separator line style: column-rule-style property

The column-rule-style property sets the style of the separator line.

The property is not inherited.

column-rule-style
Values:
none	The value evaluates to 0 . Default value.
hidden	Likewise with a value of none , the line is hidden.
dotted	Displays a line as a set of square dots.
dashed	Displays a line as a series of dashes.
solid	Normal line.
double	Displays the dividing line as two parallel thin lines spaced apart. The width of the separator line is not specified, but the sum of the lines and the spacing between them is equal to the value of column-rule-width .
groove	Displays a 3D line pressed into the canvas. This is achieved by creating a shadow with two colors, one darker and one lighter.
ridge	Displays the dividing line of the volume, i.e. the opposite effect of groove .
inset	Displays a solid line that is darker than the specified line color.
outset	Displays a solid line in the color specified by the column-rule-color property.
initial	Sets the value of a property to its default value.
inherit	Inherits the property value from the parent element.

Syntax

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. Separator line width: column-rule-width property

The column-rule-width property sets the width of the separator line. Negative values ​​are not allowed. Doesn't work without the column-rule-style property.

The property is not inherited.

Syntax

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. Separator line properties shorthand: column-rule property

The column-rule property is shorthand for the column-rule-width properties column-rule-style column-rule-color .

The property is not inherited.

Syntax

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

3. Column break

When content is placed in multiple columns, the browser must determine where the column breaks are placed. The problem of splitting content into columns is similar to splitting content into pages. To address this issue, three new properties have been introduced that allow column breaks to be described in the same properties as page breaks: break-before , break-after , and break-inside .

4. Column span: column-span property

The column-span property allows an element to span multiple columns. It is specified not for the container block, but for a specific element inside, for example, for the header.

In the future it will be possible to specify the number of columns to span, similar to the colspan attribute that can be applied to a table cell, but in the CSS3 specification there are only two possible values: none and all .

The property does not work by default in Firefox. The user must explicitly enable the feature, layout.css.column-span.enabled must be set to true . To change settings in Firefox, go to about:config .

The property is not inherited.

Syntax

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

5. Filling columns with content: the column-fill property

The column-fill property controls how columns are filled with content. There are two strategies for filling columns: columns can be height-aligned or not. If columns are aligned, browsers should try to minimize column height changes while taking into account forced breaks, widows , orphans, and other properties that can affect column heights. If the columns are not aligned, they are filled sequentially, some of them may be partially filled or not filled at all.

The property is not inherited.

Syntax

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

6. Overflow

6.1. Overflow inside multicolumn containers

Except where this would cause the column to break, content that extends beyond the column's bounds extends beyond the column's bounds and is not truncated. This applies primarily to images. To solve this problem, you need to set the following properties for images:

Img ( display: block; /* remove the bottom padding under the image */ width: 100%; /* stretch the image to the full width of the container block */ )

6.2. Pagination and overflow outside multicolumn containers

Content and separator lines that extend beyond columns at the edges of a multi-column container are clipped according to the overflow property.

A multi-column container may have more columns than it has room for, due to column height constraints (e.g. via height or max-height) and explicit column breaks. In this case, additional columns are created in the direction of the row, moving to the next pages.

How to arrange text on a page in multiple columns? And can it be done automatically? Surely, many of those of you who are or have been involved in web development have faced such a task - and often ran into complex solutions that require tricky styles, or the use of additional JavaScript libraries (see, for example, the Columnizer plugin for jQuery).

Multi-column content layout (not to be confused with the task of general multi-column page layout, which is closer to the problem of placing blocks on a grid) has been making its way in the world of web standards for a long time and, finally, has not just reached Candidate Recommendation status in the form of the corresponding CSS3 Multi module -column Layout , but also received fairly wide support in browsers: somewhere with prefixes (-moz- or -webkit-) and somewhere in current (Opera 11.1+) and planned versions (IE10+), and immediately without prefixes.

Comment
In the case of Internet Explorer 10, this automatically means you can use CSS3 Multi-column when developing Windows 8 Metro-style apps using HTML/CSS/JS.

For the purposes of this article, I won't be using browser prefixes to confuse code, but in real use, don't forget to add prefix support for Firefox, Safari, and Chrome.

I will immediately note two more important details.
Firstly, in most cases, the use of multi-column layout for text can be considered as the development of the display of site content along the Progressive Enhancement path, within which users of more modern sites will receive more goodies:

Secondly, multi-column display works well with the capabilities of Media Queries (and responsive design ideas, ), for example, at different screen sizes, you can format text into a different number of columns:

And the last thing I would like to note in the introduction, so as not to dwell on this further and move on with a clear conscience to technical details: when using multi-column text layout, one must remember that such an arrangement also implies a certain reading order (for European languages ​​from left to right). Therefore, it is important that in order to transfer the gaze from one column to another, it is necessary to perform as few additional actions as possible, especially for vertical scrolls:

In this sense, the horizontal nature of columns is better combined with horizontal scrolling (as it is used in many applications for Win8 - for example, this is clearly seen in the USA Today application):

In general, speakers are great, but do not forget about the convenience of users. And now to fight!

speakers

So, we have text (content) that we want to place in several columns. Where to begin?

To turn such an element into a multi-column element, you need to set one of the following properties through CSS styles: column-width or column-count to a value other than auto. For example,
To split text into two columns, just do this:

Article ( column-count: 2; )

The browser will do the rest:

Alternative property − column-width- allows you to set the optimal width of the columns:

Article ( column-width: 150px; )

At the same time, the browser itself breaks the content into the required number of columns to fill the outer container, adjusting to the specified column width. The important point is that the actual width may differ from the specified up or down: in the picture above, the gray bar is exactly 150px wide - and as you can see, it is smaller than the actual width of the column.

This behavior is defined by the specification and allows (automatically) more flexibility when developing responsive markup:

For example, if you have a 100px wide container and you set the columns to 45px wide, then the browser will consider that only two columns will fit, and to fill the entire space, it will increase the size of each to 50px. (This also takes into account the spacing between columns, which will be discussed in the next section.)

In a sense, this can be seen as an alternative to specifying a different number of columns using Media Queries depending on the window size and automatically calculating the column widths:

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

This is the second time I'm talking about the alternative - and here's why.

count vs. width

As it should be clear from the description above, the specification provides two ways to set the number and width of columns (by the way, it is the same for all columns!):

• column-count allows you to specify the number of columns into which you want to divide the content, while the width of the columns is determined by the browser, taking into account the available space.
• column-width comes from the back: indicates what the columns should be approximately, however, leaves the calculation of their number to the discretion of the browser.

In most cases, you will use either one or the other, operating on numbers or lengths, respectively. To simplify the notation, there is such a short property columns, which reacts to the format of the specified data:

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; */

What happens if you specify both the number of columns and the optimal width? According to the specification, in this case column-count defines the maximum number of columns:

Article ( columns: 150px 3; /* column-width: 150px; column-count: 3; */ )

In fact, following the evolution of web standards, including some of my articles on CSS3 (see for example), I hope you look at the possibilities opening up for web developers with no less inspiration. Responsive, flexible and powerful content management tools are getting closer and closer. And solving complex problems is getting easier.

interactive

You can play around with CSS3 Multi-column at ietestdrive.com :

Try, experiment. Report bugs to browser developers. And don't forget to think about what users of older (and seemingly modern, but still not fully standard-compliant) browsers will see - for example, you can use the jQuery Columnizer plugin. Be aware of adaptability and viewers on small and large screens.

(optimal column width) and column-count (optimal number of columns).

Browser Support

CSS syntax:

columns: "auto | column-width column-count | initial | inherit"; If the value is specified as an integer, then it refers to the value of the column-count property, if specified in CSS length units (px, mm, pt, etc.), then it refers to the column-width. It is allowed to specify both one and two values ​​in one declaration. columns: "auto" columns: "auto auto" /* column-width: auto; column-count: auto */

JavaScript syntax:

Object.style.columns = "auto auto"

Property values

Meaning	Description
auto	Specifies that the values ​​of the column-width and column-count properties are set to auto (the width of the columns and their number is determined automatically by the browser - meaning that the element is not multi-column). The default value is auto auto .
column-width	Specifies the optimal width for columns. The column width can be wider if there is free space, or narrower if the specified value is greater than the possible column width. The width value is specified in CSS length units (px, mm, pt, etc.). The value must be strictly positive. I draw your attention to the fact that currently the values ​​indicated in percentage are not allowed. The default value is auto .
column-count	Specifies the optimal number of columns. The value is specified as an integer. The default value is auto .
	Sets a property to its default value.
	Specifies that the value is inherited from the parent element.

CSS version

CSS3

Inherited

No.

Animated

Yes.

Usage example

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

#col ( column-count: 2; )

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

#wid (column-width: 100px; )

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

#col_short ( columns: 12em; )

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

Example 4

HTML

css

#columns_4 ( columns: 4; )

result

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

Example 5

HTML

css

#columns_12 ( columns: 12 8em; )

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

#column_gap ( column-count: 5; column-gap: 2em; )

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.

How to arrange text on a page in multiple columns? And can it be done automatically? Surely, many of those of you who are or have been involved in web development have faced such a task - and often ran into complex solutions that require tricky styles, or the use of additional JavaScript libraries (see, for example, the Columnizer plugin for jQuery).

Multi-column content layout (not to be confused with the task of general multi-column page layout, which is closer to the problem of placing blocks on a grid) has been making its way in the world of web standards for a long time and, finally, has not just reached Candidate Recommendation status in the form of the corresponding CSS3 Multi module -column Layout , but also received fairly wide support in browsers: somewhere with prefixes (-moz- or -webkit-) and somewhere in current (Opera 11.1+) and planned versions (IE10+), and immediately without prefixes.

Comment
In the case of Internet Explorer 10, this automatically means you can use CSS3 Multi-column when developing Windows 8 Metro-style apps using HTML/CSS/JS.

For the purposes of this article, I won't be using browser prefixes to confuse code, but in real use, don't forget to add prefix support for Firefox, Safari, and Chrome.

I will immediately note two more important details.
Firstly, in most cases, the use of multi-column layout for text can be considered as the development of the display of site content along the Progressive Enhancement path, within which users of more modern sites will receive more goodies:

Secondly, multi-column display works well with the capabilities of Media Queries (and responsive design ideas, ), for example, at different screen sizes, you can format text into a different number of columns:

And the last thing I would like to note in the introduction, so as not to dwell on this further and move on with a clear conscience to technical details: when using multi-column text layout, one must remember that such an arrangement also implies a certain reading order (for European languages ​​from left to right). Therefore, it is important that in order to transfer the gaze from one column to another, it is necessary to perform as few additional actions as possible, especially for vertical scrolls:

In this sense, the horizontal nature of columns is better combined with horizontal scrolling (as it is used in many applications for Win8 - for example, this is clearly seen in the USA Today application):

In general, speakers are great, but do not forget about the convenience of users. And now to fight!

speakers

So, we have text (content) that we want to place in several columns. Where to begin?

To turn such an element into a multi-column element, you need to set one of the following properties through CSS styles: column-width or column-count to a value other than auto. For example,
To split text into two columns, just do this:

Article ( column-count: 2; )

The browser will do the rest:

Alternative property − column-width- allows you to set the optimal width of the columns:

Article ( column-width: 150px; )

At the same time, the browser itself breaks the content into the required number of columns to fill the outer container, adjusting to the specified column width. The important point is that the actual width may differ from the specified up or down: in the picture above, the gray bar is exactly 150px wide - and as you can see, it is smaller than the actual width of the column.

This behavior is defined by the specification and allows (automatically) more flexibility when developing responsive markup:

For example, if you have a 100px wide container and you set the columns to 45px wide, then the browser will consider that only two columns will fit, and to fill the entire space, it will increase the size of each to 50px. (This also takes into account the spacing between columns, which will be discussed in the next section.)

In a sense, this can be seen as an alternative to specifying a different number of columns using Media Queries depending on the window size and automatically calculating the column widths:

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

This is the second time I'm talking about the alternative - and here's why.

count vs. width

As it should be clear from the description above, the specification provides two ways to set the number and width of columns (by the way, it is the same for all columns!):

• column-count allows you to specify the number of columns into which you want to divide the content, while the width of the columns is determined by the browser, taking into account the available space.
• column-width comes from the back: indicates what the columns should be approximately, however, leaves the calculation of their number to the discretion of the browser.

In most cases, you will use either one or the other, operating on numbers or lengths, respectively. To simplify the notation, there is such a short property columns, which reacts to the format of the specified data:

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; */

What happens if you specify both the number of columns and the optimal width? According to the specification, in this case column-count defines the maximum number of columns:

Article ( columns: 150px 3; /* column-width: 150px; column-count: 3; */ )

In fact, following the evolution of web standards, including some of my articles on CSS3 (see for example), I hope you look at the possibilities opening up for web developers with no less inspiration. Responsive, flexible and powerful content management tools are getting closer and closer. And solving complex problems is getting easier.

interactive

You can play around with CSS3 Multi-column at ietestdrive.com :

Try, experiment. Report bugs to browser developers. And don't forget to think about what users of older (and seemingly modern, but still not fully standard-compliant) browsers will see - for example, you can use the jQuery Columnizer plugin. Be aware of adaptability and viewers on small and large screens.