CSS Multi-Column Layout

Create beautiful, responsive multi-column layouts that adapt to any screen size with pure CSS

What are CSS Multi-Column Layouts?

CSS Multi-Column Layout allows you to arrange content into multiple columns, similar to newspaper layouts. It's perfect for creating readable, space-efficient designs that work across all devices.

📰 Newspaper Style

Perfect for articles, blogs, and text-heavy content

📱 Responsive

Automatically adapts to different screen sizes

⚡ Performance

Lightweight and efficient compared to JavaScript solutions

Basic Column Properties

Core Properties:

column-count - Number of columns
column-width - Minimum column width
column-gap - Space between columns
column-rule - Line between columns
column-span - Make element span all columns

Basic Column Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic CSS Columns</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      padding: 2rem;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      background: white;
      border-radius: 20px;
      padding: 3rem;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }
    
    h1 {
      color: #2d3748;
      margin-bottom: 2rem;
      text-align: center;
      font-size: 2.5rem;
    }
    
    /* Basic Column Properties */
    .basic-columns {
      column-count: 3;
      column-gap: 2rem;
      column-rule: 2px solid #e2e8f0;
      margin-bottom: 3rem;
    }
    
    .basic-columns p {
      margin-bottom: 1rem;
      text-align: justify;
      color: #4a5568;
    }
    
    /* Column Width Example */
    .column-width-example {
      column-width: 250px;
      column-gap: 2rem;
      column-rule: 1px dashed #cbd5e0;
      margin-bottom: 3rem;
    }
    
    .column-width-example p {
      margin-bottom: 1rem;
      color: #4a5568;
    }
    
    /* Column Span Example */
    .column-span-example {
      column-count: 3;
      column-gap: 2rem;
    }
    
    .full-span {
      column-span: all;
      background: #667eea;
      color: white;
      padding: 2rem;
      border-radius: 10px;
      margin: 2rem 0;
      text-align: center;
    }
    
    .card {
      background: #f7fafc;
      padding: 1.5rem;
      border-radius: 10px;
      margin-bottom: 1rem;
      break-inside: avoid;
    }
    
    .demo-section {
      background: #f8fafc;
      padding: 2rem;
      border-radius: 15px;
      margin: 2rem 0;
      border-left: 4px solid #667eea;
    }
    
    .demo-section h3 {
      color: #2d3748;
      margin-bottom: 1rem;
    }
    
    .code-example {
      background: #2d3748;
      color: #81e6d9;
      padding: 1rem;
      border-radius: 8px;
      font-family: monospace;
      margin: 1rem 0;
      font-size: 0.9rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>CSS Multi-Column Layout</h1>
    
    <div class="demo-section">
      <h3>Basic Column Count</h3>
      <div class="code-example">
        column-count: 3;<br>
        column-gap: 2rem;<br>
        column-rule: 2px solid #e2e8f0;
      </div>
      <div class="basic-columns">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
        <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
        <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt.</p>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>Column Width Based Layout</h3>
      <div class="code-example">
        column-width: 250px;<br>
        column-gap: 2rem;
      </div>
      <div class="column-width-example">
        <p>This layout creates as many columns as needed to fill the container, with each column being at least 250px wide. The browser will adjust the number of columns based on available space.</p>
        <p>As you resize the browser window, watch how the columns automatically adjust to maintain the minimum width while filling the available space efficiently.</p>
        <p>This approach is particularly useful for responsive designs where you want columns to adapt to different screen sizes without fixed column counts.</p>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>Column Spanning</h3>
      <div class="code-example">
        column-span: all;
      </div>
      <div class="column-span-example">
        <div class="card">
          <h4>Card 1</h4>
          <p>This card stays within the column flow.</p>
        </div>
        <div class="card">
          <h4>Card 2</h4>
          <p>Another card in the column layout.</p>
        </div>
        <div class="full-span">
          <h3>This Element Spans All Columns!</h3>
          <p>Using column-span: all breaks the element out of the column flow and makes it span across all columns.</p>
        </div>
        <div class="card">
          <h4>Card 3</h4>
          <p>Content continues after the spanning element.</p>
        </div>
        <div class="card">
          <h4>Card 4</h4>
          <p>Final card in the column layout.</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Responsive Multi-Column Layouts

Media Query Approach

Use media queries to adjust column count based on screen size for optimal readability.

@media (max-width: 768px) {

column-count: 2;

}

Auto-Fill Columns

Use column-width to create flexible columns that adapt automatically.

column-width: 250px;

column-count: auto;

Responsive Columns Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive CSS Columns</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      min-height: 100vh;
      padding: 2rem;
    }
    
    .container {
      max-width: 1400px;
      margin: 0 auto;
      background: white;
      border-radius: 20px;
      padding: 3rem;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }
    
    h1 {
      color: #2d3748;
      margin-bottom: 2rem;
      text-align: center;
      font-size: 2.5rem;
    }
    
    /* Responsive Column System */
    .responsive-columns {
      margin: 3rem 0;
    }
    
    .breakpoint-demo {
      column-count: 4;
      column-gap: 2rem;
      column-rule: 1px solid #e2e8f0;
      padding: 2rem;
      background: #f8fafc;
      border-radius: 15px;
      margin-bottom: 2rem;
    }
    
    @media (max-width: 1200px) {
      .breakpoint-demo {
        column-count: 3;
      }
    }
    
    @media (max-width: 768px) {
      .breakpoint-demo {
        column-count: 2;
        column-gap: 1.5rem;
      }
    }
    
    @media (max-width: 480px) {
      .breakpoint-demo {
        column-count: 1;
        column-gap: 1rem;
      }
    }
    
    .breakpoint-demo .item {
      break-inside: avoid;
      background: white;
      padding: 1rem;
      margin-bottom: 1rem;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    /* Auto-fit Grid vs Columns */
    .comparison-section {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      margin: 3rem 0;
    }
    
    .grid-example {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
    }
    
    .columns-example {
      column-count: auto;
      column-width: 200px;
      column-gap: 1rem;
    }
    
    .example-item {
      background: #4facfe;
      color: white;
      padding: 1rem;
      border-radius: 8px;
      margin-bottom: 1rem;
      break-inside: avoid;
    }
    
    .info-box {
      background: #e3f2fd;
      padding: 1.5rem;
      border-radius: 10px;
      margin: 1rem 0;
      border-left: 4px solid #2196f3;
    }
    
    .demo-section {
      background: #f8fafc;
      padding: 2rem;
      border-radius: 15px;
      margin: 2rem 0;
    }
    
    .code-example {
      background: #2d3748;
      color: #81e6d9;
      padding: 1rem;
      border-radius: 8px;
      font-family: monospace;
      margin: 1rem 0;
      font-size: 0.9rem;
    }
    
    .breakpoint-indicator {
      position: fixed;
      top: 20px;
      right: 20px;
      background: #2d3748;
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 8px;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <div class="breakpoint-indicator" id="breakpoint">Desktop: 4 columns</div>
  
  <div class="container">
    <h1>Responsive Multi-Column Layout</h1>
    
    <div class="info-box">
      <h3>📱 Responsive Breakpoints</h3>
      <p>This demo shows how CSS columns adapt to different screen sizes using media queries. Resize your browser to see the changes!</p>
    </div>
    
    <div class="demo-section">
      <h3>Adaptive Column Layout</h3>
      <div class="code-example">
        /* Default: 4 columns */<br>
        column-count: 4;<br><br>
        
        /* Large tablets: 3 columns */<br>
        @media (max-width: 1200px) {<br>
        &nbsp;&nbsp;column-count: 3;<br>
        }<br><br>
        
        /* Tablets: 2 columns */<br>
        @media (max-width: 768px) {<br>
        &nbsp;&nbsp;column-count: 2;<br>
        }<br><br>
        
        /* Mobile: 1 column */<br>
        @media (max-width: 480px) {<br>
        &nbsp;&nbsp;column-count: 1;<br>
        }
      </div>
      
      <div class="breakpoint-demo">
        <div class="item">Item 1 - Content that flows across columns</div>
        <div class="item">Item 2 - Automatic column balancing</div>
        <div class="item">Item 3 - Responsive column adjustment</div>
        <div class="item">Item 4 - Mobile-first approach</div>
        <div class="item">Item 5 - Flexible layout system</div>
        <div class="item">Item 6 - CSS column properties</div>
        <div class="item">Item 7 - Media query integration</div>
        <div class="item">Item 8 - Breakpoint optimization</div>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>CSS Grid vs Multi-Column Layout</h3>
      
      <div class="comparison-section">
        <div>
          <h4>CSS Grid (auto-fit)</h4>
          <div class="code-example">
            display: grid;<br>
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          </div>
          <div class="grid-example">
            <div class="example-item">Grid Item 1</div>
            <div class="example-item">Grid Item 2</div>
            <div class="example-item">Grid Item 3</div>
            <div class="example-item">Grid Item 4</div>
            <div class="example-item">Grid Item 5</div>
          </div>
        </div>
        
        <div>
          <h4>CSS Columns (auto-fill)</h4>
          <div class="code-example">
            column-count: auto;<br>
            column-width: 200px;
          </div>
          <div class="columns-example">
            <div class="example-item">Column Item 1</div>
            <div class="example-item">Column Item 2</div>
            <div class="example-item">Column Item 3</div>
            <div class="example-item">Column Item 4</div>
            <div class="example-item">Column Item 5</div>
          </div>
        </div>
      </div>
      
      <div class="info-box">
        <h4>Key Differences:</h4>
        <p><strong>CSS Grid:</strong> Two-dimensional layout system, perfect for complex grid structures</p>
        <p><strong>CSS Columns:</strong> One-dimensional flow, ideal for newspaper-like text content</p>
        <p><strong>Use Columns when:</strong> You want content to flow naturally from one column to the next</p>
        <p><strong>Use Grid when:</strong> You need precise control over both rows and columns</p>
      </div>
    </div>
  </div>

  <script>
    function updateBreakpointIndicator() {
      const width = window.innerWidth;
      const indicator = document.getElementById('breakpoint');
      
      if (width >= 1200) {
        indicator.textContent = "Desktop: 4 columns";
      } else if (width >= 768) {
        indicator.textContent = "Tablet: 3 columns";
      } else if (width >= 480) {
        indicator.textContent = "Mobile Large: 2 columns";
      } else {
        indicator.textContent = "Mobile: 1 column";
      }
    }
    
    updateBreakpointIndicator();
    window.addEventListener('resize', updateBreakpointIndicator);
  </script>
</body>
</html>

Advanced Column Techniques

Masonry Layouts

Create Pinterest-style masonry layouts using break-inside: avoidto prevent items from breaking across columns.

.masonry-item {

break-inside: avoid;

margin-bottom: 1.5rem;

}

Column Balancing

Control how content is distributed across columns with column-fill property.

/* Balanced columns (default) */

column-fill: balance;

/* Sequential filling */

column-fill: auto;

Complex Column Rules

Style the lines between columns with various border styles and offsets.

column-rule: 3px double #ff6b6b;

column-rule-offset: 1rem;

Advanced Techniques Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Advanced CSS Columns</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
      min-height: 100vh;
      padding: 2rem;
    }
    
    .container {
      max-width: 1400px;
      margin: 0 auto;
      background: white;
      border-radius: 20px;
      padding: 3rem;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }
    
    h1 {
      color: #2d3748;
      margin-bottom: 2rem;
      text-align: center;
      font-size: 2.5rem;
    }
    
    /* Advanced Column Techniques */
    .masonry-layout {
      column-count: 4;
      column-gap: 1.5rem;
      margin: 2rem 0;
    }
    
    .masonry-item {
      break-inside: avoid;
      margin-bottom: 1.5rem;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      transition: transform 0.3s ease;
    }
    
    .masonry-item:hover {
      transform: translateY(-5px);
    }
    
    .masonry-item img {
      width: 100%;
      height: auto;
      display: block;
    }
    
    .masonry-content {
      padding: 1rem;
    }
    
    .masonry-item.small { height: 150px; background: #ffebee; }
    .masonry-item.medium { height: 200px; background: #e3f2fd; }
    .masonry-item.large { height: 280px; background: #e8f5e8; }
    .masonry-item.xlarge { height: 350px; background: #f3e5f5; }
    
    /* Column Fill Balancing */
    .balance-example {
      column-count: 3;
      column-gap: 2rem;
      column-fill: balance;
      height: 400px;
      border: 2px solid #e2e8f0;
      padding: 1rem;
      margin: 2rem 0;
      background: #f8fafc;
    }
    
    .balance-example.auto {
      column-fill: auto;
    }
    
    /* Complex Column Rules */
    .fancy-columns {
      column-count: 3;
      column-gap: 3rem;
      column-rule: 3px double #ff6b6b;
      column-rule-offset: 1rem;
      padding: 2rem;
      margin: 2rem 0;
    }
    
    .demo-section {
      background: #f8fafc;
      padding: 2rem;
      border-radius: 15px;
      margin: 2rem 0;
      border-left: 4px solid #ff6b6b;
    }
    
    .code-example {
      background: #2d3748;
      color: #81e6d9;
      padding: 1rem;
      border-radius: 8px;
      font-family: monospace;
      margin: 1rem 0;
      font-size: 0.9rem;
    }
    
    .info-box {
      background: #ffeaa7;
      padding: 1.5rem;
      border-radius: 10px;
      margin: 1rem 0;
      border-left: 4px solid #fdcb6e;
    }
    
    .comparison {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      margin: 2rem 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Advanced CSS Column Techniques</h1>
    
    <div class="demo-section">
      <h3>Masonry Layout with Columns</h3>
      <div class="code-example">
        column-count: 4;<br>
        column-gap: 1.5rem;<br><br>
        
        .masonry-item {<br>
        &nbsp;&nbsp;break-inside: avoid;<br>
        &nbsp;&nbsp;margin-bottom: 1.5rem;<br>
        }
      </div>
      
      <div class="masonry-layout">
        <div class="masonry-item small">
          <div class="masonry-content">
            <h4>Small Card</h4>
            <p>Short content that fits nicely in columns.</p>
          </div>
        </div>
        <div class="masonry-item large">
          <div class="masonry-content">
            <h4>Large Card</h4>
            <p>This card has more content and demonstrates how masonry layout handles varying heights while maintaining column flow.</p>
          </div>
        </div>
        <div class="masonry-item medium">
          <div class="masonry-content">
            <h4>Medium Card</h4>
            <p>Medium-sized content that flows naturally between columns.</p>
          </div>
        </div>
        <div class="masonry-item xlarge">
          <div class="masonry-content">
            <h4>Extra Large Card</h4>
            <p>This is a much larger card with extensive content. Masonry layout ensures it doesn't break across columns while maintaining the visual flow.</p>
          </div>
        </div>
        <div class="masonry-item small">
          <div class="masonry-content">
            <h4>Small Card</h4>
            <p>Another compact card.</p>
          </div>
        </div>
        <div class="masonry-item medium">
          <div class="masonry-content">
            <h4>Medium Card</h4>
            <p>Balanced content for testing.</p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>Column Fill Balancing</h3>
      
      <div class="comparison">
        <div>
          <h4>column-fill: balance (Default)</h4>
          <div class="code-example">
            column-fill: balance;<br>
            height: 400px;
          </div>
          <div class="balance-example">
            <p>This example uses balanced column filling. The browser attempts to make each column approximately the same length.</p>
            <p>Balanced columns work well for text content where you want equal distribution across columns.</p>
            <p>This is particularly useful for magazine-style layouts where visual balance is important.</p>
          </div>
        </div>
        
        <div>
          <h4>column-fill: auto</h4>
          <div class="code-example">
            column-fill: auto;<br>
            height: 400px;
          </div>
          <div class="balance-example auto">
            <p>This example uses auto column filling. Columns are filled sequentially without balancing.</p>
            <p>Auto fill is useful when you have a fixed height and want content to flow naturally from one column to the next.</p>
            <p>This approach mimics traditional newspaper column behavior.</p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>Advanced Column Rules</h3>
      <div class="code-example">
        column-rule: 3px double #ff6b6b;<br>
        column-rule-offset: 1rem;<br>
        column-gap: 3rem;
      </div>
      
      <div class="fancy-columns">
        <p>This demonstrates advanced column rule styling with double lines and offset spacing.</p>
        <p>Column rules can be styled just like borders with various styles: solid, dashed, dotted, double, etc.</p>
        <p>The offset property creates space between the column content and the rule line.</p>
        <p>This is particularly useful for creating visually appealing magazine-style layouts.</p>
      </div>
    </div>
    
    <div class="info-box">
      <h3>💡 Advanced Tips</h3>
      <p><strong>break-inside: avoid</strong> - Prevents elements from breaking across columns</p>
      <p><strong>column-fill: balance</strong> - Balances content evenly across columns</p>
      <p><strong>column-rule-offset</strong> - Adds space between content and column rules</p>
      <p><strong>Masonry Layout</strong> - Use columns with varying height items for Pinterest-style layouts</p>
    </div>
  </div>
</body>
</html>

Practical Real-World Examples

📰 News Layout

Magazine-style article layouts with balanced columns

🛍️ Product Grid

E-commerce product listings with masonry effect

💰 Pricing Tables

Multi-column pricing comparison tables

Practical Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Practical Column Examples</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
      min-height: 100vh;
      padding: 2rem;
    }
    
    .container {
      max-width: 1400px;
      margin: 0 auto;
    }
    
    h1 {
      color: #2d3748;
      margin-bottom: 2rem;
      text-align: center;
      font-size: 2.5rem;
    }
    
    /* News Layout */
    .news-layout {
      column-count: 3;
      column-gap: 2rem;
      margin: 2rem 0;
    }
    
    .news-article {
      break-inside: avoid;
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      margin-bottom: 2rem;
      overflow: hidden;
    }
    
    .news-image {
      width: 100%;
      height: 200px;
      background: linear-gradient(45deg, #667eea, #764ba2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.5rem;
    }
    
    .news-content {
      padding: 1.5rem;
    }
    
    .news-title {
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
      color: #2d3748;
    }
    
    .news-meta {
      color: #718096;
      font-size: 0.9rem;
      margin-bottom: 1rem;
    }
    
    /* Product Grid */
    .product-grid {
      column-count: 4;
      column-gap: 1.5rem;
      margin: 2rem 0;
    }
    
    .product-card {
      break-inside: avoid;
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      margin-bottom: 1.5rem;
      padding: 1rem;
      text-align: center;
    }
    
    .product-image {
      width: 100%;
      height: 120px;
      background: linear-gradient(45deg, #ff9a9e, #fad0c4);
      border-radius: 8px;
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
    }
    
    .product-price {
      color: #48bb78;
      font-weight: 600;
      font-size: 1.1rem;
    }
    
    /* Pricing Table */
    .pricing-columns {
      column-count: 3;
      column-gap: 0;
      margin: 2rem 0;
      background: white;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    }
    
    .pricing-tier {
      break-inside: avoid;
      padding: 2rem;
      text-align: center;
      border-right: 1px solid #e2e8f0;
    }
    
    .pricing-tier:last-child {
      border-right: none;
    }
    
    .pricing-tier.featured {
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: white;
    }
    
    .pricing-tier.featured .price {
      color: white;
    }
    
    .price {
      font-size: 2.5rem;
      font-weight: 700;
      color: #667eea;
      margin: 1rem 0;
    }
    
    .feature-list {
      list-style: none;
      text-align: left;
      margin: 1.5rem 0;
    }
    
    .feature-list li {
      padding: 0.5rem 0;
      border-bottom: 1px solid #f7fafc;
    }
    
    .btn {
      display: inline-block;
      padding: 0.75rem 2rem;
      background: #667eea;
      color: white;
      text-decoration: none;
      border-radius: 25px;
      font-weight: 600;
      transition: all 0.3s ease;
    }
    
    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
    }
    
    .demo-section {
      background: rgba(255, 255, 255, 0.9);
      padding: 2rem;
      border-radius: 15px;
      margin: 2rem 0;
      backdrop-filter: blur(10px);
    }
    
    @media (max-width: 768px) {
      .news-layout,
      .product-grid,
      .pricing-columns {
        column-count: 2;
      }
    }
    
    @media (max-width: 480px) {
      .news-layout,
      .product-grid,
      .pricing-columns {
        column-count: 1;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Practical Multi-Column Examples</h1>
    
    <div class="demo-section">
      <h2>📰 News Magazine Layout</h2>
      <div class="news-layout">
        <article class="news-article">
          <div class="news-image">Breaking News</div>
          <div class="news-content">
            <h3 class="news-title">New CSS Features Revolutionize Web Design</h3>
            <div class="news-meta">By John Doe • 2 hours ago</div>
            <p>Discover how latest CSS column features are changing the way we create magazine-style layouts on the web.</p>
          </div>
        </article>
        
        <article class="news-article">
          <div class="news-image">Tech Update</div>
          <div class="news-content">
            <h3 class="news-title">Responsive Design Best Practices 2024</h3>
            <div class="news-meta">By Jane Smith • 5 hours ago</div>
            <p>Learn the latest techniques for creating responsive multi-column layouts that work across all devices.</p>
          </div>
        </article>
        
        <article class="news-article">
          <div class="news-image">Tutorial</div>
          <div class="news-content">
            <h3 class="news-title">Mastering CSS Column Layouts</h3>
            <div class="news-meta">By Mike Johnson • 1 day ago</div>
            <p>Step-by-step guide to creating professional multi-column layouts using pure CSS without frameworks.</p>
          </div>
        </article>
      </div>
    </div>
    
    <div class="demo-section">
      <h2>🛍️ Product Grid Layout</h2>
      <div class="product-grid">
        <div class="product-card">
          <div class="product-image">Product 1</div>
          <h3>Wireless Headphones</h3>
          <p>High-quality sound with noise cancellation</p>
          <div class="product-price">$199.99</div>
        </div>
        
        <div class="product-card">
          <div class="product-image">Product 2</div>
          <h3>Smart Watch</h3>
          <p>Track your fitness and stay connected</p>
          <div class="product-price">$299.99</div>
        </div>
        
        <div class="product-card">
          <div class="product-image">Product 3</div>
          <h3>Laptop Stand</h3>
          <p>Ergonomic design for better posture</p>
          <div class="product-price">$49.99</div>
        </div>
        
        <div class="product-card">
          <div class="product-image">Product 4</div>
          <h3>Phone Case</h3>
          <p>Protective case with stylish design</p>
          <div class="product-price">$29.99</div>
        </div>
      </div>
    </div>
    
    <div class="demo-section">
      <h2>💰 Pricing Table Layout</h2>
      <div class="pricing-columns">
        <div class="pricing-tier">
          <h3>Basic</h3>
          <div class="price">$19<span>/mo</span></div>
          <ul class="feature-list">
            <li>✓ 10 Projects</li>
            <li>✓ 5GB Storage</li>
            <li>✓ Basic Support</li>
            <li>✗ Advanced Features</li>
          </ul>
          <a href="#" class="btn">Get Started</a>
        </div>
        
        <div class="pricing-tier featured">
          <h3>Professional</h3>
          <div class="price">$49<span>/mo</span></div>
          <ul class="feature-list">
            <li>✓ Unlimited Projects</li>
            <li>✓ 50GB Storage</li>
            <li>✓ Priority Support</li>
            <li>✓ All Features</li>
          </ul>
          <a href="#" class="btn">Get Started</a>
        </div>
        
        <div class="pricing-tier">
          <h3>Enterprise</h3>
          <div class="price">$99<span>/mo</span></div>
          <ul class="feature-list">
            <li>✓ Everything in Pro</li>
            <li>✓ Custom Solutions</li>
            <li>✓ Dedicated Manager</li>
            <li>✓ SLA Guarantee</li>
          </ul>
          <a href="#" class="btn">Get Started</a>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Best Practices & Performance

✅ Do

Use break-inside: avoid for cards
Set appropriate column-gap for readability
Test on different screen sizes
Use semantic HTML structure
Consider mobile-first approach
Balance content across columns
Use relative units for responsiveness

❌ Don't

Use too many columns on mobile
Forget to test column balancing
Ignore browser support considerations
Use fixed heights without overflow handling
Mix column layouts with complex floats
Overuse column-span
Forget about accessibility

📊 Browser Support & Performance

CSS Multi-Column Layout is well-supported across modern browsers with excellent performance characteristics.

Chrome

✓ Full Support

Firefox

✓ Full Support

Safari

✓ Full Support

Edge

✓ Full Support

Master CSS Multi-Column Layouts Today!

Experiment with our comprehensive examples that showcase different multi-column patterns, from basic text flows to advanced masonry layouts and responsive designs.

< Previous Next >