Css text layout columns

Basic concepts of multi-column layout

Multi-column layout, usually referred to as multicol layout, is a specification for laying out content into a set of column boxes much like columns in a newspaper. This guide explains how the specification works with some common use case examples.

Key properties

Multicol layout is unlike any of the other layout methods in CSS; it fragments the content, including all descendant elements, into columns. This happens in the same way that content is fragmented into pages when we work with CSS paged media by creating a print stylesheet.

In this and subsequent guides, we will be discussing the following properties defined in the CSS multi-column layout module:

• column-width
• column-count
• columns shorthand
• column-rule-color
• column-rule-style
• column-rule-width
• column-rule shorthand
• column-span
• column-fill
• column-gap
• break-after
• break-before
• break-inside

Defining columns

By adding the column-count or the column-width property to an element, or using the columns shorthand, the element becomes a multi-column container or multicol container for short. The columns are anonymous boxes; they’re described as column boxes in the specification.

Specifying the number of columns

The column-count property specifies the number of columns that you would like the content to be displayed as. The browser will then assign the correct amount of space to each column box to create the requested number of columns.

In the below example, we use the column-count property to create three columns on the .container element. The content, including the children of .container , is then split between the three columns.

In the above example, the content is wrapped within the paragraph

tags with the default styling. Therefore, there is a margin above each paragraph. You can see how this margin causes the first line of text to be pushed down. This is because a multicol container creates a block formatting context (BFC) because of which margins on child elements do not collapse with any margin on the container.

Specifying the width of columns

The column-width property is used to set the optimal width for every column box. If you declare a column width, the browser will work out how many columns of that width will fit into the multicol container and distribute any extra space equally between the columns. Therefore, the column width should be seen as minimum width because the column boxes are likely to be wider due to the additional space.

In the case of a single column with less width available than the value of column-width , the column box will shrink to be smaller than the declared column width.

In the example below, the column-width property is set to 200px . We get as many 200-pixel columns as will fit the container, with the extra space shared equally.

Specifying both number and width of columns

If you specify both the properties on a multicol container, then column-count will act as a maximum number of columns. Therefore, the behavior as described for column-width will happen, until the number of columns in column-count is reached. After this point, no more columns will be drawn, and the extra space is distributed evenly between the existing columns, even if there is enough room for more columns of the specified column-width size.

When using both properties together, you may get fewer columns than specified in the value for column-count .

In this next example, we use column-width of 200px and column-count of 2 . Even if there is space for more than two columns, we get two. If there is not enough space for two columns of at least 200 pixels each, we get one.

Shorthand for column properties

You can use the columns shorthand to set the column-count and column-width values. If you specify a length unit, the value will be used for column-width , and if you specify an integer, the value will be used for column-count . You can set both the properties, separating the two values with a space.

This CSS would give the same result as example 1, with column-count set to 3 .

This CSS would give the same result as example 2, with column-width of 200px .

This CSS would give the same result as example 3, with both column-count and column-width set.

.container  columns: 2 200px; > 

Next steps

In this guide, we’ve learned the basic use of multi-column layout. In the next guide, we will look at how much we can style the columns themselves.

Found a content problem with this page?

This page was last modified on Jun 7, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Using multi-column layouts

The properties defined in the CSS multi-column layout module extend the block layout mode , enabling 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 one line to the beginning of the next, readers can lose track of which line they were on. To provide for a better user experience when reading text making use of a large screen, you should limit the width of text by using columns of text placed side by side, just as newspapers do.

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

div id="col"> p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p> p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. p> p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. p> p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. p> div> 

CSS

Result

The content will be displayed in two columns:

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

div id="wid"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div> 

CSS

Result

In a multi-column block, content automatically flows 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

You can use either column-count or column-width . Because values for these properties do not overlap, it is often convenient to use the shorthand columns .

Example 3

In this example, the CSS declaration column-width: 12em is replaced by columns: 12em .

HTML

div id="col_short"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div> 

CSS

Example 4

In this example, the CSS declaration column-count: 4 is replaced by columns: 4 .

HTML

div id="columns_4"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div> 

CSS

Result

Example 5

The two CSS declarations column-width: 8em and column-count: 12 can be replaced by columns: 12 8em . The column-count portion of the shorthand is the maximum number of columns that will be present. The column-width is the minimum width each column should be.

HTML

div id="columns_12"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div> 

CSS

#columns_12  columns: 12 8em; > 

Result

Assuming a default 1em gap between columns, if the container is wider than 103ems (12 columns * 8em width each + 7 1em gaps), there will be 12 columns, each with a width of 8ems or more. If the container is less than 103ems wide, there will be fewer than 12 columns. If the container is less than 17ems wide ( 8em column + 8em column + 1em gap), the content will be displayed as a single column with no column gap.

Height balancing

CSS columns require 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

div id="column_gap"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div> 

CSS

#column_gap  column-count: 5; column-gap: 2em; > 

Result

Conclusion

CSS columns are a layout primitive that can help make large blocks of text easier to read when responsive content is viewed on wide viewports. Imaginative developers may find many uses for them, especially in conjunction with container queries and with the automatic height balancing feature.

Found a content problem with this page?

This page was last modified on Jun 7, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник