Modern CSS Layouts: Flexbox, Grid & Multi-Column

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:

<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>

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:

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

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:

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