CSS module: multicol

files/en-us/web/css/css_multicol_layout/index.md

@@ -6,41 +6,37 @@ spec-urls: https://drafts.csswg.org/css-multicol/
 ---
 
 {{CSSRef("CSS3 Multicol")}}
+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.
 
-The **CSS multi-column layout** module provides support for multi-column layouts, including support for establishing the number of columns in a layout, how content should flow from column to column, gap sizes between columns, and column dividing lines (known as column rules) along with their appearance.
+## Multi-column layout in action
 
-## Basic example
+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.
 
-In the following example, the {{cssxref("column-count")}} property has been applied to the `<div>` element with the class `container`. As the value of `column-count` is `3`, the content is arranged into three columns of the same size.
+{{EmbedGHLiveSample("css-examples/modules/multicol.html", '100%', 650)}}
 
-{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}
+To see the code for this columned layout, [view the source on GitHub](https://github.com/mdn/css-examples/blob/main/modules/multicol.html).
 
-## Relationship to fragmentation
-
-Multi-column layout is closely related to [paged media](/en-US/docs/Web/CSS/CSS_paged_media), in that each column box becomes a fragment, much like a printed page becomes a fragment of an overall document. Therefore, the properties now defined in the [CSS fragmentation](/en-US/docs/Web/CSS/CSS_fragmentation) specification are required to control how content breaks between columns.
+> **Note:** Multiple-column layout is closely related to [paged media](/en-US/docs/Web/CSS/CSS_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](/en-US/docs/Web/CSS/CSS_fragmentation) module, you can control how content breaks between columns and pages.
 
 ## Reference
 
-### Properties for multi-column layout
+### Properties
 
-- {{cssxref("column-count")}}
+- {{cssxref("break-after")}}
+- {{cssxref("break-before")}}
+- {{cssxref("break-inside")}}
 - {{cssxref("column-fill")}}
 - {{cssxref("column-gap")}}
-- {{cssxref("column-rule")}}
-- {{cssxref("column-rule-color")}}
-- {{cssxref("column-rule-style")}}
-- {{cssxref("column-rule-width")}}
 - {{cssxref("column-span")}}
-- {{cssxref("column-width")}}
-- {{cssxref("columns")}}
+- {{cssxref("column-rule")}} shorthand
+  - {{cssxref("column-rule-color")}}
+  - {{cssxref("column-rule-style")}}
+  - {{cssxref("column-rule-width")}}
+- {{cssxref("columns")}} shorthand
+  - {{cssxref("column-count")}}
+  - {{cssxref("column-width")}}
 
-### Properties related to CSS fragmentation
-
-- {{cssxref("break-after")}}
-- {{cssxref("break-before")}}
-- {{cssxref("break-inside")}}
-- {{cssxref("orphans")}}
-- {{cssxref("widows")}}
+> **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](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) states that even when the text size is doubled, content should not need to be scrolled.
 
 ## Guides
 
@@ -49,19 +45,31 @@ Multi-column layout is closely related to [paged media](/en-US/docs/Web/CSS/CSS_
 - [Styling columns](/en-US/docs/Web/CSS/CSS_multicol_layout/Styling_columns)
   - : How to use column rules and manage the spacing between columns.
 - [Spanning and balancing](/en-US/docs/Web/CSS/CSS_multicol_layout/Spanning_balancing_columns)
-  - : How to make elements span across all columns and controlling the way columns are filled.
+  - : How to make elements span across all columns and control the way columns are filled.
 - [Handling overflow in multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout/Handling_overflow_in_multicol_layout)
   - : 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.
 - [Handling content breaks in multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout/Handling_content_breaks_in_multicol_layout)
   - : Introduction to the Fragmentation specification and how to control where column content breaks.
 
+## Related concepts
+
+- {{cssxref("orphans")}} CSS property
+- {{cssxref("widows")}} CSS property
+- {{cssxref("overflow")}} CSS property
+- {{cssxref("gap")}} CSS property
+- {{cssxref("height")}}, {{cssxref("max-height")}}, and {{cssxref("block-size")}} CSS properties
+- {{cssxref("width")}}, {{cssxref("max-width")}}, and {{cssxref("inline-size")}} CSS properties
+- {{cssxref("line-style")}} enumerated data type
+- [Block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context) guide
+
 ## Specifications
 
 {{Specifications}}
 
 ## See also
 
-Other CSS layout technologies include:
-
-- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) (CSS flexbox)
-- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout)
+- [Learn: multiple-column layout](/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
+- [CSS fragmentation](/en-US/docs/Web/CSS/CSS_fragmentation) module
+- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module
+- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module
+- [CSS paged media](/en-US/docs/Web/CSS/CSS_paged_media) module