Css multi columns layout

CSS multi-column layout

The CSS multi-column layout module lets you divide content across multiple columns. By using the properties in this module, you can define the preferred number and width of columns, the gap size between columns, and the visual appearance of the optional column dividing lines (known as column rules). You can also define how content should flow from column to column and how to break content between columns.

Multi-column layout in action

In this example, the 1967 speech from Canada’s centennial, A Lament for Confederation, by Chief Dan George, is displayed across multiple columns, similar to the way articles are displayed in printed newspapers. If you have JavaScript enabled, controls enable changing the preferred column number and width, the width of the gap between columns, whether the title and a sample blockquote should be contained in a single column or made to span all columns, and whether breaking within the paragraphs should be avoided.

To see the code for this columned layout, view the source on GitHub.

Note: Multiple-column layout is closely related to paged media. Each column box is a fragment, much like each printed page is a fragment of a document. Using the properties defined in the CSS fragmentation module, you can control how content breaks between columns and pages.

Reference

Properties

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

  Note: Bear in mind that setting container height and line length can pose challenges for people with visual or cognitive disabilities. WCAG Success Criterion 1.4.8 states that even when the text size is doubled, content should not need to be scrolled.

  Guides

  An overview of the Multiple-column Layout specification

  How to use column rules and manage the spacing between columns.

  How to make elements span across all columns and control the way columns are filled.

  What happens when an item overflows the column it is in and what happens when there is too much columned content to fit a container.

  Introduction to the Fragmentation specification and how to control where column content breaks.

  Related concepts

  • orphans CSS property
  • widows CSS property
  • overflow CSS property
  • gap CSS property
  • height , max-height , and block-size CSS properties
  • width , max-width , and inline-size CSS properties
  • enumerated data type
  • Block formatting context guide

  Specifications

  See also

  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.

  MDN

  Support

  Our communities

  Developers

  Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
  Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

  Источник

  CSS Multiple Columns

  The CSS multi-column layout allows easy definition of multiple columns of text — just like in newspapers:

  Daily Ping

  Lorem ipsum
  dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

  CSS Multi-column Properties

  In this chapter you will learn about the following multi-column properties:

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

  Browser Support

  The numbers in the table specify the first browser version that fully supports the property.

  Property
  column-count	50.0	10.0	52.0	9.0	37.0
  column-gap	50.0	10.0	52.0	9.0	37.0
  column-rule	50.0	10.0	52.0	9.0	37.0
  column-rule-color	50.0	10.0	52.0	9.0	37.0
  column-rule-style	50.0	10.0	52.0	9.0	37.0
  column-rule-width	50.0	10.0	52.0	9.0	37.0
  column-span	50.0	10.0	71.0	9.0	37.0
  column-width	50.0	10.0	52.0	9.0	37.0

  CSS Create Multiple Columns

  The column-count property specifies the number of columns an element should be divided into.

  The following example will divide the text in the element into 3 columns:

  Example

  CSS Specify the Gap Between Columns

  The column-gap property specifies the gap between the columns.

  The following example specifies a 40 pixels gap between the columns:

  Example

  CSS Column Rules

  The column-rule-style property specifies the style of the rule between columns:

  Example

  The column-rule-width property specifies the width of the rule between columns:

  Example

  The column-rule-color property specifies the color of the rule between columns:

  Example

  The column-rule property is a shorthand property for setting all the column-rule-* properties above.

  The following example sets the width, style, and color of the rule between columns:

  Example

  Specify How Many Columns an Element Should Span

  The column-span property specifies how many columns an element should span across.

  The following example specifies that the element should span across all columns:

  Example

  Specify The Column Width

  The column-width property specifies a suggested, optimal width for the columns.

  The following example specifies that the suggested, optimal width for the columns should be 100px:

  Example

  CSS Multi-columns Properties

  The following table lists all the multi-columns properties:

  Property	Description
  column-count	Specifies the number of columns an element should be divided into
  column-fill	Specifies how to fill columns
  column-gap	Specifies the gap between the columns
  column-rule	A shorthand property for setting all the column-rule-* properties
  column-rule-color	Specifies the color of the rule between columns
  column-rule-style	Specifies the style of the rule between columns
  column-rule-width	Specifies the width of the rule between columns
  column-span	Specifies how many columns an element should span across
  column-width	Specifies a suggested, optimal width for the columns
  columns	A shorthand property for setting column-width and column-count

  Источник

  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.

  Источник