Modern CSS Layouts: Flexbox, Grid & Multi-Column

Introduction

Master modern CSS layouts—Flexbox, Grid, and multi-columns—for precise, responsive designs. Move beyond floats with practical examples and techniques.

Written At

2025-05-30

Updated At

2025-05-30

Reading time

12 minutes

Step 1: Flexbox for 1-Dimensional Layouts

Why it matters: Flexbox simplifies alignment and distribution of space among items in a container.

What to do:

  1. Create a flexible navigation bar:
    css
    .navbar {
       display: flex;
       justify-content: space-between;
       align-items: center;
    }
  2. Control item growth with flex properties:
    css
    .sidebar {
       flex: 0 0 250px; /* Don't grow, don't shrink, 250px base */
    }
    
    .main-content {
       flex: 1; /* Grow to fill space */
    }

Example:

A responsive card layout:

html
<div class="card-container">
   <article class="card">...</article>
   <article class="card">...</article>
</div>

<style>
   .card-container {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
   }

   .card {
      flex: 1 1 300px;
   }
</style>

Step 2: CSS Grid for 2-Dimensional Layouts

Why it matters: Grid provides precise control over both rows and columns simultaneously.

What to do:

  1. Define a grid template:
    css
    .dashboard {
       display: grid;
       grid-template-columns: minmax(200px, 1fr) 3fr;
       grid-template-rows: auto  1fr auto;
       grid-template-areas:
          "header header"
          "sidebar main"
          "footer footer";
    }
  2. Place items using grid areas:
    css
    .header { grid-area: header; }
    .sidebar { grid-area: sidebar; }
    .main { grid-area: main; }
    .footer { grid-area: footer; }

Example:

A responsive image gallery:

css
.gallery {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: 16px;
}

Step 3: CSS Multi-Column Layout

Why it matters: Perfect for newspaper-style text flows without JavaScript.

What to do:

  1. Create multi-column text:
    css
    .article-content {
       column-count: 3;
       column-gap: 2em;
       column-rule: 1px solid #ddd;
    }
  2. Control content breaks:
    css
    h2 {
       break-after: avoid-column;
    }

Example:

Responsive columns that adjust based on width:

css
.responsive-columns {
   columns: 15em;
   gap: 2em;
}

Conclusion:

Modern CSS offers powerful layout tools that eliminate the need for hacky float-based solutions. Use Flexbox for components, Grid for page layouts, and multi-column for text flows. Test your layouts in various browsers using Grid by Example resources.

Related Blogs