Codexpal - Learn Programming Interactively

Lesson Content

Advanced Layout Techniques

Master advanced layout techniques for creating complex, responsive, and maintainable layouts.

CSS Grid Advanced Features

/* Named grid lines */
.grid {
  display: grid;
  grid-template-columns: [start] 1fr [middle] 1fr [end];
  grid-template-rows: [header-start] auto [header-end main-start] 1fr [main-end];
}

.item {
  grid-column: start / end;
  grid-row: header-start / header-end;
}

/* Grid areas */
.grid {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

Flexbox Advanced

/* Flexbox with auto margins */
.container {
  display: flex;
}

.item {
  margin-left: auto;  /* Pushes to right */
}

/* Flexbox gap (modern) */
.container {
  display: flex;
  gap: 20px;  /* Space between items */
}

/* Flexbox alignment */
.container {
  display: flex;
  align-items: center;      /* Vertical alignment */
  justify-content: space-between;  /* Horizontal distribution */
}

Multi-column Layout

.content {
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid #ccc;
}

/* Break across columns */
.heading {
  column-span: all;
}

Positioning Strategies

/* Sticky positioning */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Absolute with relative parent */
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Container Queries (Modern)

@container (min-width: 600px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

Layout Patterns

Holy Grail Layout: Header, footer, 3 columns (sidebar, main, aside)
Sticky Header: Header stays at top when scrolling
Masonry Layout: Pinterest-style grid
Split Screen: Two equal sections
Card Grid: Responsive card layouts

Example Code

Build a layout using CSS Grid areas for header, sidebar, main, and footer.

<!DOCTYPE html>
<html>
<head>
<style>
.grid {
  display: grid;
  /* Create grid with areas:
     "header header header"
     "sidebar main aside"
     "footer footer footer"
  */
  gap: 10px;
  min-height: 100vh;
}

.header { grid-area: header; background: #3b82f6; padding: 20px; }
.sidebar { grid-area: sidebar; background: #10b981; padding: 20px; }
.main { grid-area: main; background: #f3f4f6; padding: 20px; }
.aside { grid-area: aside; background: #f59e0b; padding: 20px; }
.footer { grid-area: footer; background: #6366f1; padding: 20px; }
</style>
</head>
<body>
  <div class="grid">
    <header class="header">Header</header>
    <aside class="sidebar">Sidebar</aside>
    <main class="main">Main Content</main>
    <aside class="aside">Aside</aside>
    <footer class="footer">Footer</footer>
  </div>
</body>
</html>

Expected Output:

Grid area layout

Study Tips

•Read the theory content thoroughly before practicing
•Review the example code to understand key concepts
•Proceed to the Practice tab when you're ready to code