1.8.b — Common Layout Patterns

In one sentence: Most real-world layouts are combinations of a handful of battle-tested patterns — navbars, card grids, centering tricks, holy grail layouts, sidebars, and sticky footers — all achievable with flexbox, grid, and a few clever defaults.

Navigation: ← 1.8.a — Flexbox Deep Dive · 1.8.c — CSS Grid →

---

1. Navbar layout

A typical navbar has three groups: logo (left), nav links (center or left-adjacent), actions (right).

.navbar {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

.navbar .logo     { margin-right: auto; }
.navbar .nav-links { display: flex; gap: 24px; }
.navbar .actions  { margin-left: auto; }

┌──────────────────────────────────────────────┐
│ [Logo]      Home  About  Blog      [Sign In] │
│  ◄─ auto ─►                    ◄─ auto ─►    │
└──────────────────────────────────────────────┘

The margin-left: auto / margin-right: auto trick on flex items absorbs all available space in that direction, pushing siblings apart.

---

2. Card grid layout

Equal-width cards that wrap responsively — no media queries needed.

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

This creates as many columns as will fit (each at least 280px), distributing leftover space equally. Cards reflow from 4 columns on a wide screen down to 1 on mobile — all in one line of CSS.

Wide viewport:
┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐
│ Card │ │ Card │ │ Card │ │ Card │
└──────┘ └──────┘ └──────┘ └──────┘

Narrow viewport:
┌──────────────┐
│     Card     │
├──────────────┤
│     Card     │
└──────────────┘

---

3. Centering tricks

Centering is the most famous CSS puzzle. Here are the reliable solutions:

a) Flexbox centering (most common)

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

b) Grid centering (shortest)

.parent {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

c) margin: auto on a block element (horizontal only)

.box {
  width: 600px;
  margin: 0 auto; /* centers horizontally in block flow */
}

d) Absolute + transform (legacy, still useful)

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

Method	Axes	Needs size?	Best for
Flexbox	Both	No	Most cases
Grid place-items	Both	No	Quick centering
margin: auto	Horizontal	Yes (width)	Block-level centering
Absolute + transform	Both	No	Overlays, modals

---

4. Holy grail layout

The "holy grail" is a classic layout: header, footer, main content flanked by two sidebars.

.page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr 200px;
  grid-template-areas:
    "header  header  header"
    "left    main    right"
    "footer  footer  footer";
  min-height: 100vh;
}

.header { grid-area: header; }
.left   { grid-area: left; }
.main   { grid-area: main; }
.right  { grid-area: right; }
.footer { grid-area: footer; }

┌────────────────────────────────┐
│            Header              │
├────────┬──────────────┬────────┤
│  Left  │              │ Right  │
│  side  │    Main      │  side  │
│        │   content    │        │
├────────┴──────────────┴────────┤
│            Footer              │
└────────────────────────────────┘

---

5. Sidebar layout

A two-column layout where the sidebar has a fixed width and the main content fills the rest.

.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
}

Flexbox alternative:

.layout {
  display: flex;
  min-height: 100vh;
}
.sidebar { flex: 0 0 250px; }
.content { flex: 1; }

Both work. Grid is cleaner when the sidebar is a page-level decision; flex is fine for simpler cases.

---

6. Footer that sticks to the bottom

When content is short, the footer should still sit at the bottom of the viewport, not float up.

Grid approach (recommended)

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
/* header = auto, main = 1fr (fills remaining), footer = auto */

Flexbox approach

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1; /* grows to push footer down */
}

Both rely on min-height: 100vh — the container fills the viewport, and the main area absorbs all extra space.

---

7. Responsive patterns without media queries

Modern CSS can create responsive layouts **without a single @media rule:

Technique	How it adapts
repeat(auto-fill, minmax(280px, 1fr))	Columns reflow based on available space
flex-wrap: wrap + flex: 1 1 300px	Items wrap when they can't maintain minimum width
clamp(16px, 4vw, 24px)	Fluid sizing between a min and max
min(), max()	Responsive widths without breakpoints

/* Fluid card row: wraps naturally */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 300px; /* grow from 300px base, wrap when needed */
}

/* Fluid container width */
.container {
  width: min(90%, 1200px); /* whichever is smaller */
  margin: 0 auto;
}

These intrinsic patterns produce smoother, less jumpy transitions than breakpoint-based media queries.

---

8. Key takeaways

1. Navbar: flex + margin-left: auto to push actions right.
2. Card grid: repeat(auto-fill, minmax(…, 1fr)) for responsive columns.
3. Centering: flexbox or grid place-items: center — stop overthinking it.
4. Holy grail: grid with named areas.
5. Sticky footer: min-height: 100vh + flex: 1 or grid-template-rows: auto 1fr auto.
6. No-media-query responsive: clamp(), min(), auto-fill, flex-wrap.

---

Explain-It Challenge

Explain without notes:

1. How does margin-left: auto on a flex item work, and why is it useful in navbars?
2. Why does repeat(auto-fill, minmax(280px, 1fr)) create a responsive grid without media queries?
3. What is the minimum CSS needed to keep a footer at the bottom of the viewport when content is short?

---

Navigation: ← 1.8.a — Flexbox Deep Dive · 1.8.c — CSS Grid →