CSS Grid & Flexbox

# CSS Grid & Flexbox

## Flexbox
```css
.container {
  display: flex;
  flex-direction: row;          /* row | column | row-reverse | column-reverse */
  justify-content: space-between; /* main axis alignment */
  align-items: center;          /* cross axis alignment */
  flex-wrap: wrap;
  gap: 1rem;
}
.item {
  flex: 1 1 200px; /* grow shrink basis */
  align-self: flex-start;
  order: 2;
}
```

## CSS Grid
```css
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  gap: 1rem;
}
.header { grid-area: header; }
.item {
  grid-column: 1 / 3;   /* span cols 1-2 */
  grid-row: span 2;
}
```

## Responsive grid (no media queries)
```css
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
```

## Common patterns
```css
/* Sticky footer */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

/* Centered card */
.page { display: grid; place-items: center; min-height: 100vh; }
```

## When to use which
- **Flexbox**: 1D (row or column), navbars, button groups, component internals.
- **Grid**: 2D page layout, card grids, overlapping elements.