CSS Multi-Column Layout

Definition:

In your webpage, as per your requirement, you use the multi-column property.

When you write some content in your paragraph, this property splits it into one or more columns, and the content appears in a newspaper-style format.

syntax:

.element {
column-count: 3; /* number of columns */
column-gap: 20px; /* space between columns */
column-rule: 1px solid #000; /* This creates two or more columns with a thin black divider line between them */
}

Example:

.column-container {
 column-count: 3; /* Creates 3 columns */
 column-gap: 20px; /* 20px gap between columns */
 column-rule: 1px solid #000;/* This adds a 1px solid black line to separate two or more columns */
 width: 600px;
 margin: 20px auto;
font-size: 16px;
 line-height: 1.5;
}

This example demonstrates the CSS multi-column property.

Output:

After running this example in the browser, it displays three columns with a 20px gap between them, and a thin black line appears separating the columns.

CSS Multi-Column Layout

belong to Us

Important to You

Special Pages

Join Us