CSS Multiple Columns

The CSS Multiple Columns layout allows content to be split into multiple columns, much like in a newspaper. This can enhance readability, especially for long texts, by presenting information in a more visually appealing and organized way.

Key CSS Properties for Multiple Columns

`column-count`: Specifies the number of columns the content should be divided into.
`column-width`: Defines the ideal width of each column. The browser will determine the number of columns based on available space and the width specified.
`column-gap`: Sets the gap between the columns.
`column-rule`: Adds a line (rule) between columns for better separation.
`column-span`: Specifies how many columns an element should span across.
`column-fill`: Controls how content is distributed between columns.

Examples of CSS Multiple Columns

Example: Basic Multi-Column Layout


/* Basic Multi-Column Layout Example */
.multicolumn {
    column-count: 3;
    column-gap: 20px;
    column-rule: 2px solid #ddd;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque, nulla nec tincidunt tincidunt, lacus mi malesuada arcu, non vestibulum erat ligula eget lectus. Nullam bibendum ultricies velit, vel convallis lorem varius a.

Pellentesque vitae elit a nulla volutpat placerat. Integer varius malesuada felis, non tempor nisi scelerisque sit amet. Integer ullamcorper est ac urna bibendum, sit amet pulvinar turpis interdum.

Sed sit amet eros sit amet nulla varius tincidunt. Fusce nec malesuada urna, et posuere purus. Curabitur sed quam at magna elementum vehicula non at magna.

Example: Multi-Column with Fixed Column Width


/* Multi-Column with Fixed Column Width Example */
.fixed-column-width {
    column-width: 200px;
    column-gap: 15px;
}

Pellentesque vitae elit a nulla volutpat placerat. Integer varius malesuada felis, non tempor nisi scelerisque sit amet. Integer ullamcorper est ac urna bibendum, sit amet pulvinar turpis interdum.

Sed sit amet eros sit amet nulla varius tincidunt. Fusce nec malesuada urna, et posuere purus. Curabitur sed quam at magna elementum vehicula non at magna.

Example: Multi-Column with Column Span


/* Multi-Column with Column Span Example */
.column-span {
    column-count: 3;
    column-gap: 20px;
}

.column-span p {
    break-inside: avoid;
}

.column-span h2 {
    column-span: all;
    margin-top: 20px;
}

Column Span Example

Pellentesque vitae elit a nulla volutpat placerat. Integer varius malesuada felis, non tempor nisi scelerisque sit amet. Integer ullamcorper est ac urna bibendum, sit amet pulvinar turpis interdum.

Sed sit amet eros sit amet nulla varius tincidunt. Fusce nec malesuada urna, et posuere purus. Curabitur sed quam at magna elementum vehicula non at magna.

Explanation of CSS Multiple Columns Properties

- `column-count: 3;`: Splits the content into 3 columns.
- `column-width: 200px;`: Defines a fixed column width of 200px. The browser adjusts the number of columns based on available space.
- `column-gap: 20px;`: Sets a 20px gap between columns for clear separation.
- `column-rule: 2px solid #ddd;`: Adds a solid line of 2px between columns for visual distinction.
- `column-span: all;`: Makes an element span across all columns, often used for headings or other elements meant to break the column flow.
- `break-inside: avoid;`: Prevents an element from being broken across multiple columns, ensuring it stays in one column.