CSS multiple columns are used to create a multi-column layout for text, allowing content to flow across several columns rather than a single column. This is particularly useful for long-form text or articles.
This example demonstrates a basic multi-column layout with two columns. The text is automatically flowed into two columns, creating a more readable and visually appealing format for longer content.
Adding more text will fill the columns, and the content will flow from the first column to the second column. This layout is useful for articles and long paragraphs where traditional single-column layouts might be less effective.
This example shows a simple multi-column layout using the column-count property to specify the number of columns. The text is evenly distributed across the specified columns.
<div class="multi-column" style="column-count: 2;">
<p>This example demonstrates a basic multi-column layout with two columns.</p>
<p>Adding more text will fill the columns, and the content will flow from the first column to the second column.</p>
</div>This example demonstrates a multi-column layout with three columns and a gap between them. The column-gap property is used to specify the space between columns, improving readability and visual separation.
Adjusting the column gap can enhance the design and spacing of text columns, making the content more appealing and easier to read.
This example uses the column-gap property to add spacing between columns, making the text more readable. The column-count property is set to three to create three columns of text.
<div class="multi-column" style="column-count: 3; column-gap: 20px;">
<p>This example demonstrates a multi-column layout with three columns and a gap between them.</p>
<p>Adjusting the column gap can enhance the design and spacing of text columns.</p>
</div>This example demonstrates a multi-column layout where each column has a fixed width. The column-width property specifies the width of each column, and the number of columns is adjusted to fit the content.
Using a fixed column width ensures consistency in the appearance of columns, regardless of the content length. This can be useful for creating specific column widths for design purposes.
This example uses the column-width property to set a fixed width for each column. The column-count property is used to specify the number of columns, and the width of each column is adjusted accordingly.
<div class="multi-column" style="column-count: 3; column-width: 150px;">
<p>This example demonstrates a multi-column layout where each column has a fixed width.</p>
<p>Using a fixed column width ensures consistency in the appearance of columns.</p>
</div>