Prev Next

CSS Multiple Columns

CSS Multiple Columns, also known as multicol, allows you to divide content into multiple columns for better readability and layout control. It’s ideal for newspaper-style designs and formatting lengthy text.

Key Topics

Column Count

The column-count property specifies the number of columns into which the content should be split.

<style>
        .column-count {
            column-count: 3;
        }
</style>
<div class="column-count">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

Explanation: The content is divided into three equal columns for a structured layout.

Column Gap

The column-gap property defines the spacing between columns.

<style>
        .column-gap {
            column-count: 3;
            column-gap: 20px;
        }
</style>
<div class="column-gap">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

Explanation: A 20px gap is added between the columns to enhance readability.

Column Rule

The column-rule property adds a line between columns for better separation.

<style>
        .column-rule {
            column-count: 3;
            column-rule: 2px solid #007BFF;
        }
</style>
<div class="column-rule">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

Explanation: A 2px solid blue line separates the columns for better visual distinction.

Column Width

The column-width property specifies the ideal width of columns. The browser automatically adjusts the number of columns to fit the container.

<style>
        .column-width {
            column-width: 150px;
        }
</style>
<div class="column-width">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

Explanation: Columns are dynamically created with a width of 150px, adjusting to the container size.

Responsive Columns

Use media queries to make columns responsive, ensuring optimal readability on different devices.

<style>
        @media (max-width: 600px) {
            .responsive-columns {
                column-count: 1;
            }
        }
        @media (min-width: 601px) {
            .responsive-columns {
                column-count: 3;
            }
        }
</style>
<div class="responsive-columns">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

Explanation: On smaller screens, the content is displayed in a single column, while on larger screens, it splits into three columns.

Key Takeaways

  • Column Count: Define the number of columns with column-count.
  • Column Gap: Adjust spacing between columns using column-gap.
  • Column Rule: Add lines between columns for better separation.
  • Column Width: Specify ideal column widths and let the browser adjust their count.
  • Responsive Design: Use media queries to adapt columns to different screen sizes.
Prev Next