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