Multicolumn Layout

Multicolumn Layout is a CSS feature that lets you divide content into multiple columns automatically. Just like a newspaper layout, the text flows from one column to the next without you having to split the content manually in HTML.

This feature is very useful for long articles, documents, or content you want to display in a multi-column format without JavaScript. CSS automatically calculates and distributes the content across the available columns.

The main properties: column-count for the number of columns, column-width for the minimum width of each column, column-gap for the space between columns, and column-rule for a divider line.

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  body {
    font-family: Georgia, serif;
    padding: 40px;
    background: #fafafa;
  }

  .article {
    max-width: 900px;
    margin: 0 auto;
    column-count: 3;
    column-gap: 30px;
    column-rule: 1px solid #ddd;
    line-height: 1.8;
    text-align: justify;
  }

  .article h3 {
    column-span: all;
    text-align: center;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
    margin-bottom: 20px;
  }

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

  .newspaper .headline {
    column-span: all;
    background: #1a1a2e;
    color: white;
    padding: 15px 20px;
    margin-bottom: 15px;
    text-align: center;
  }

  .newspaper .headline h2 {
    margin: 0;
    font-size: 1.8em;
    text-transform: uppercase;
    letter-spacing: 2px;
  }

  .newspaper p {
    font-size: 0.9em;
    line-height: 1.6;
    text-align: justify;
    margin-bottom: 10px;
  }

  .masonry-like {
    column-count: 3;
    column-gap: 15px;
  }

  .masonry-like .card {
    break-inside: avoid;
    background: white;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    break-after: avoid;
  }

  .masonry-like .card img {
    width: 100%;
    border-radius: 4px;
    margin-bottom: 10px;
  }

  .masonry-like .card h4 {
    margin: 0 0 8px 0;
    color: #333;
  }

  .masonry-like .card p {
    font-size: 0.9em;
    color: #666;
    margin: 0;
  }

  .auto-columns {
    column-width: 250px;
    column-gap: 25px;
    column-rule: 2px dashed #4ecdc4;
  }

  .auto-columns p {
    line-height: 1.7;
    margin-bottom: 12px;
  }
</style>
</head>
<body>
  <h2>Multi-Column Article</h2>
  <div class="article">
    <h3>The History of Cascading Style Sheets</h3>
    <p>CSS was first developed in 1996 by Hkon Wium Lie and Bert Bos. They wanted to separate presentation from HTML document structure. Initially, CSS only supported very basic styling.</p>
    <p>CSS2 was released in 1998 and brought many new features such as positioning, z-index, and media types. However, browser implementations at the time were very inconsistent.</p>
    <p>CSS3 began in 2011 and was split into independent modules. This modular approach allows new features to be implemented separately without waiting for the entire specification to be finished.</p>
    <p>Today, CSS continues to evolve with modern features such as Grid, Custom Properties, and Container Queries, among many others.</p>
  </div>

  <h2>Newspaper Layout</h2>
  <div class="newspaper">
    <div class="headline">
      <h2>Technology Daily</h2>
    </div>
    <p>Web development continues to grow rapidly. New frameworks and tools emerge every year, helping developers build applications faster.</p>
    <p>Modern CSS can now do things that previously were only possible with JavaScript. Features such as scroll-driven animations and view transitions open up new possibilities.</p>
    <p>Website performance has become an important factor. Google uses Core Web Vitals as a determinant of SEO rankings. This drives developers to pay more attention to performance.</p>
    <p>Accessibility is also receiving increasing attention. WCAG standards help ensure that websites can be accessed by everyone, including people with disabilities.</p>
  </div>

  <h2>Masonry-Like Layout</h2>
  <div class="masonry-like">
    <div class="card">
      <img src="https://picsum.photos/400/250?random=1" alt="Image 1">
      <h4>UI Design</h4>
      <p>Principles of good interface design for an optimal user experience.</p>
    </div>
    <div class="card">
      <img src="https://picsum.photos/400/350?random=2" alt="Image 2">
      <h4>CSS Grid</h4>
      <p>Powerful two-dimensional layout for the modern web.</p>
    </div>
    <div class="card">
      <img src="https://picsum.photos/400/200?random=3" alt="Image 3">
      <h4>Responsive Design</h4>
      <p>Making a website display optimally on all screen sizes.</p>
    </div>
    <div class="card">
      <img src="https://picsum.photos/400/300?random=4" alt="Image 4">
      <h4>CSS Animation</h4>
      <p>Making a website more lively with smooth animations.</p>
    </div>
  </div>

  <h2>Auto Width Columns</h2>
  <div class="auto-columns">
    <p>These columns use column-width instead of column-count. CSS automatically determines the number of columns based on the container width and the specified minimum width.</p>
    <p>This provides more flexibility because the number of columns changes automatically as the container size changes. Ideal for responsive design.</p>
    <p>Also note the dashed lines as separators between columns using column-rule.</p>
  </div>
</body>
</html>

Code Explanation

column-count: Sets the number of columns. CSS will calculate the width of each column based on the number of columns and the available gap.

column-width: Sets the minimum width of each column. The number of columns is calculated automatically based on the container width and this minimum width.

column-gap: Sets the space between columns. Can be in px, em, or other values. The default is normal (usually around 1em).

column-rule: Creates a divider line between columns. Accepts a shorthand such as column-rule: 1px solid #ddd. Similar to a border, but it only appears between the columns.

column-span: all: Makes a specific element occupy the full width (spanning all columns). Useful for titles or sections that must stand out.

break-inside: avoid: Prevents an element from being split across two columns. Very important for cards or boxes to keep them intact.

Everyday Use Cases

Long blog articles: Use 2-3 columns for long articles to make them easier to read, similar to a newspaper or magazine layout.

Technical documentation: Multicolumn is a good fit for text-heavy documentation so it does not get too long vertically.

Website brochure: For landing pages that present information in a brochure format, multi-column gives a professional look.

Gallery captions: A thumbnail grid with captions can be used as a masonry-like layout using column-count.

Conclusion

Multicolumn Layout is a native CSS solution for multi-column layouts without needing Grid or Flexbox. The column-count and column-width properties determine the number and width of columns, while column-gap and column-rule control the spacing and the visual divider. Use column-span: all for elements that need to occupy the full width, and break-inside: avoid to keep elements intact.