CSS - Multi columns

Basic Syntax

To create a multi-column layout in CSS, you can use the column-count, column-width, and columns properties. The column-count property sets the number of columns you want in your layout. For example, if you set column-count: 3, your content will be split into three equal-width columns.

.container {
  column-count: 3;
}

The column-width property sets the width of each column. When you use column-width, the browser will automatically calculate the number of columns based on the available space. For instance, setting column-width: 200px will create as many columns as possible, each with a width of 200 pixels.

.container {
  column-width: 200px;
}

If you want to set both the number of columns and their width, you can use the columns shorthand property. It takes two values: the first value sets the column-width, and the second value sets the column-count. For example, columns: 200px 3 will create three columns, each with a width of 200 pixels.

.container {
  columns: 200px 3;
}

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  <p>Nulla facilisi. Sed auctor eros vitae risus aliquam...</p>
  <p>Phasellus id metus vel velit malesuada fringilla...</p>
</div>

.container {
  column-count: 3;
  column-width: 200px;
  column-gap: 20px;
}

The content inside the .container element will be divided into three columns, each with a width of 200 pixels. The column-gap property is used to set the spacing between the columns.

By using these basic properties, you can easily create multi-column layouts in CSS and organize your content in a more readable and visually appealing way.

Column Gap and Rule

In addition to setting the number and width of columns, you can also control the spacing between columns and add decorative rules using the column-gap and column-rule properties.

The column-gap property sets the size of the gap between columns. It takes a length value, such as pixels or ems. By default, there is no gap between columns, but you can add space to improve readability and separation of content.

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

To add a vertical line or rule between columns, you can use the column-rule property. It is a shorthand property that combines column-rule-width, column-rule-style, and column-rule-color.

The column-rule-width property sets the width of the rule, the column-rule-style property defines the style of the line (e.g., solid, dotted, dashed), and the column-rule-color property sets the color of the rule.

.container {
  column-count: 3;
  column-gap: 20px;
  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: #ccc;
}

Instead of setting each property individually, you can use the column-rule shorthand property to set all three values at once. The order of values is column-rule-width, column-rule-style, and column-rule-color.

.container {
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid #ccc;
}

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  <p>Nulla facilisi. Sed auctor eros vitae risus aliquam...</p>
  <p>Phasellus id metus vel velit malesuada fringilla...</p>
</div>

.container {
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid #ccc;
}

In the example, the content inside the .container element is split into three columns with a gap of 20 pixels between them. A solid, 1-pixel wide rule with a color of #ccc is added between the columns, providing visual separation.

By using the column-gap and column-rule properties, you can fine-tune the appearance of your multi-column layout, making it more visually appealing and easier to read.

Column Span

The column-span property lets you make an element span across multiple columns in a multi-column layout. This helps when you want to create a heading or a block of content that breaks the column flow and stretches across all columns.

The column-span property accepts two values: none and all. The default value is none, which means the element does not span across columns. When you set column-span: all, the element will span across all columns, breaking the column flow.

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

h2 {
  column-span: all;
}

The <h2> element within the .container will span across all three columns. It will break the column flow, and any content after the <h2> will continue in the next column.

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  <h2>Heading Spanning Across Columns</h2>
  <p>Nulla facilisi. Sed auctor eros vitae risus aliquam...</p>
  <p>Phasellus id metus vel velit malesuada fringilla...</p>
</div>

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

h2 {
  column-span: all;
}

In this code snippet, the <h2> element with the text "Heading Spanning Across Columns" will span across all three columns defined in the .container element. The paragraphs before and after the heading will flow within the columns normally.

When an element spans across columns, it creates a new block formatting context. This means that the spanned element will not be influenced by the column layout and will act as a separate block-level container.

Using the column-span property can help you create appealing layouts and break the column flow when needed, such as for headings or important sections of content.

Column Break

When working with multi-column layouts, you may want to control where the content breaks between columns. CSS provides the break-before, break-after, and break-inside properties to handle column breaks.

The break-before property specifies whether a column break should occur before an element. It accepts values such as auto, avoid, column, page, left, and right. Setting break-before: column on an element will force a column break before that element, pushing it to the top of the next column.

.container {
  column-count: 3;
}

h2 {
  break-before: column;
}

The break-after property works similarly but specifies whether a column break should occur after an element. It accepts the same values as break-before. Setting break-after: column on an element will force a column break after that element, pushing the following content to the top of the next column.

.container {
  column-count: 3;
}

.paragraph {
  break-after: column;
}

The break-inside property controls whether a break should occur inside an element. It accepts values such as auto, avoid, and avoid-column. By default, it is set to auto, allowing breaks to occur naturally within the element. Setting break-inside: avoid prevents breaks from occurring inside the element, keeping its content together in the same column.

.container {
  column-count: 3;
}

.image-container {
  break-inside: avoid;
}

<div class="container">
  <h2>Section 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  <div class="image-container">
    <img src="image.jpg" alt="Example Image">
    <p>Image Caption</p>
  </div>
  <p>Nulla facilisi. Sed auctor eros vitae risus aliquam...</p>
  <h2>Section 2</h2>
  <p>Phasellus id metus vel velit malesuada fringilla...</p>
</div>

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

h2 {
  break-before: column;
}

.image-container {
  break-inside: avoid;
}

The <h2> elements have break-before: column applied, forcing a column break before each section heading. The .image-container element has break-inside: avoid set, preventing the image and its caption from breaking across columns.

By using the break-before, break-after, and break-inside properties, you can fine-tune the column breaks in your multi-column layout, making sure that your content is presented in a logical and visually appealing way.

Responsive Multi-Column Layouts

When creating multi-column layouts, it's important to consider responsiveness and how the layout will adapt to different screen sizes. CSS media queries allow you to apply different styles based on the viewport width, making it possible to create responsive multi-column layouts that adjust to various devices.

To make a multi-column layout responsive, you can use media queries to modify the column properties based on the screen size. You might have a three-column layout on larger screens, but on smaller screens, you can reduce the number of columns or stack them vertically.

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

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

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

In this code snippet, the .container element has a default column-count of 3, creating a three-column layout. The first media query targets screens with a maximum width of 768 pixels (typical for tablets) and reduces the column-count to 2, creating a two-column layout. The second media query targets screens with a maximum width of 480 pixels (typical for mobile devices) and sets the column-count to 1, creating a single-column layout.

You can further adjust other column properties within the media queries to fine-tune the layout for different screen sizes. For instance, you can modify the column-width, column-gap, or column-rule to optimize the reading experience on various devices.

.container {
  column-count: 3;
  column-width: 200px;
  column-gap: 20px;
}

@media screen and (max-width: 768px) {
  .container {
    column-count: 2;
    column-width: 150px;
    column-gap: 15px;
  }
}

@media screen and (max-width: 480px) {
  .container {
    column-count: 1;
    column-width: auto;
    column-gap: 0;
  }
}

In this example, the .container element has an initial column-width of 200 pixels and a column-gap of 20 pixels. On tablet-sized screens (max-width: 768px), the column-count is reduced to 2, the column-width is decreased to 150 pixels, and the column-gap is set to 15 pixels. On mobile-sized screens (max-width: 480px), the layout changes to a single column by setting column-count to 1, column-width to auto, and removing the column-gap.

By using media queries and adjusting the column properties based on screen size, you can create responsive multi-column layouts that adapt to different devices and provide an optimal reading experience for your users.

Practical Examples

Multi-column layouts have various practical uses in web design and can create visually appealing and readable content. Here are some real-world use cases and examples of websites and designs that use multi-column layouts.

One common use case for multi-column layouts is in news websites or blogs. These sites often have articles or blog posts with long text content. By using a multi-column layout, they can break up the text into smaller, more readable sections. This makes it easier for users to scan and read the content without feeling overwhelmed by a wall of text.

<div class="news-article">
  <h2>Article Title</h2>
  <div class="article-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    <p>Nulla facilisi. Sed auctor eros vitae risus aliquam...</p>
    <p>Phasellus id metus vel velit malesuada fringilla...</p>
  </div>
</div>

.news-article {
  column-count: 2;
  column-gap: 20px;
}

.article-content {
  text-align: justify;
}

Another practical application of multi-column layouts is in product listings or galleries. E-commerce websites often display products in a grid or multi-column format to make efficient use of space and allow users to browse multiple items at once.

<div class="product-grid">
  <div class="product">
    <img src="product1.jpg" alt="Product 1">
    <h3>Product 1</h3>
    <p>Description of Product 1</p>
  </div>
  <div class="product">
    <img src="product2.jpg" alt="Product 2">
    <h3>Product 2</h3>
    <p>Description of Product 2</p>
  </div>
  <div class="product">
    <img src="product3.jpg" alt="Product 3">
    <h3>Product 3</h3>
    <p>Description of Product 3</p>
  </div>
</div>

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

.product {
  break-inside: avoid;
  text-align: center;
}

.product img {
  max-width: 100%;
}

Multi-column layouts can also be used in responsive designs to adapt to different screen sizes. By using media queries, you can adjust the number of columns based on the available screen space.

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

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

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

These are a few examples of how multi-column layouts can be used in practical scenarios. Multi-column layouts provide a powerful tool for structuring and presenting information in a visually appealing and user-friendly way.