Layout with Flexbox & Grid

🧩 1. The Problem Flexbox and Grid Solve

• Tables (outdated), floats/clears (clunky), inline-block hacks (inconsistent)
• Flexbox and Grid make layouts clean, responsive, and maintainable.

💪 2. What Is Flexbox?

Flexbox arranges elements along a single axis — a row or a column.

🧱 Basic Setup

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

/* CSS */
.container {
  display: flex;
  background-color: #eee;
  padding: 10px;
}
.box {
  background-color: #0E477B;
  color: white;
  padding: 20px;
  margin: 10px;
  flex: 1;
  text-align: center;
}

3️⃣ Flex Direction

.container {
  display: flex;
  flex-direction: row; /* default: row | row-reverse | column | column-reverse */
}

🎯 4. Alignment & Spacing

.container {
  display: flex;
  justify-content: space-between; /* main axis */
  align-items: center;            /* cross axis */
  gap: 20px;                      /* spacing between items */
}

⚖️ 5. Flex Growth & Shrink

/* Equal growth */
.box { flex: 1; }

/* Custom proportions */
.box1 { flex: 2; }  /* twice as wide */
.box2 { flex: 1; }

Responsive without media queries for many row layouts.

💻 6. Hands-On: Responsive Navigation Bar

<header class="nav-bar">
  <div class="logo">StreetGeek</div>
  <nav>
    <a href="#">Home</a>
    <a href="#">Courses</a>
    <a href="#">Contact</a>
  </nav>
</header>

.nav-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#0E477B;
  color:#fff;
  padding:10px 20px;
}
.nav-bar nav{ display:flex; gap:15px; }
.nav-bar a{ color:#fff; text-decoration:none; }
.nav-bar a:hover{ text-decoration:underline; }

@media (max-width:768px){
  .nav-bar{ flex-direction:column; gap:10px; }
}

🧱 7. Introducing CSS Grid

Grid is two-dimensional — control rows and columns.

🧩 Basic Setup

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

/* CSS */
.grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
}
.item{
  background:#6EC1E4; color:#fff; padding:20px; text-align:center;
}

📏 8. Grid Template Properties

🧩 9. Building a Page Layout with Grid

<div class="layout">
  <header>Header</header>
  <nav>Nav</nav>
  <main>Main Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

.layout{
  display:grid;
  grid-template-areas:
    "header header"
    "nav    main"
    "nav    aside"
    "footer footer";
  grid-template-columns:1fr 3fr;
  gap:10px;
}
.layout header{ grid-area:header; background:#0E477B; color:#fff; padding:20px; }
.layout nav   { grid-area:nav;    background:#e5e5e5; padding:20px; }
.layout main  { grid-area:main;   background:#f8f8f8; padding:20px; }
.layout aside { grid-area:aside;  background:#ddd;    padding:20px; }
.layout footer{ grid-area:footer; background:#0E477B; color:#fff; padding:20px; }

💡 10. Responsive Tip

@media (max-width:768px){
  .grid{ grid-template-columns:1fr; }     /* stack grid */
  .nav-bar{ flex-direction:column; }      /* stack flex */
}

🧠 11. Quiz Time

• What’s the main difference between Flexbox and Grid?
• Which Flexbox property aligns items horizontally?
• What does gap: 20px; do?
• How many directions does Grid handle vs. Flexbox?
• What CSS rule creates responsive behavior below 768px?