CSS – Multiple-column Layout Explained with Examples

In web design, the layout of content plays a crucial role in creating an aesthetically pleasing and user-friendly website. One popular layout technique is the multiple-column layout, which allows you to divide your content into multiple columns, similar to a newspaper or magazine.

How to Create a Multiple-column Layout with CSS

To create a multiple-column layout in CSS, you can use the column-count property. This property specifies the number of columns you want to divide your content into. Here’s an example:

    .multi-column {
      column-count: 3;
    }
  

In the above example, the .multi-column class is applied to the element containing the content you want to divide into columns. The column-count property is set to 3, indicating that the content should be divided into three columns.

Controlling the Column Width

By default, the width of each column is automatically calculated based on the available space. However, you can also control the width of the columns using the column-width property. Here’s an example:

    .multi-column {
      column-count: 3;
      column-width: 200px;
    }
  

In the above example, the column-width property is set to 200px, indicating that each column should have a width of 200 pixels.

Adding Column Gap

To add a gap between the columns, you can use the column-gap property. Here’s an example:

    .multi-column {
      column-count: 3;
      column-gap: 20px;
    }
  

In the above example, the column-gap property is set to 20px, creating a 20-pixel gap between each column.

Creating Balanced Columns

By default, the browser tries to balance the content evenly across all columns. However, if you want to ensure that each column has an equal amount of content, you can use the column-fill property. Here’s an example:

    .multi-column {
      column-count: 3;
      column-fill: balance;
    }
  

In the above example, the column-fill property is set to balance, ensuring that each column has an equal amount of content.

Responsive Multiple-column Layout

When designing for different screen sizes, it’s important to create a responsive multiple-column layout. You can achieve this by using media queries to change the number of columns based on the screen width. Here’s an example:

    .multi-column {
      column-count: 3;
    }

    @media (max-width: 768px) {
      .multi-column {
        column-count: 2;
      }
    }

    @media (max-width: 480px) {
      .multi-column {
        column-count: 1;
      }
    }
  

In the above example, the column-count property is set to 3 by default. However, when the screen width is less than or equal to 768 pixels, it changes to 2 columns. And when the screen width is less than or equal to 480 pixels, it changes to 1 column.

Conclusion

The multiple-column layout in CSS is a powerful tool for dividing your content into visually appealing and organized sections. By using properties like column-count, column-width, column-gap, and column-fill, you can create flexible and responsive layouts that adapt to different screen sizes. Experiment with these properties and unleash your creativity in designing beautiful websites.