# Flexible layouts — Responsive & Mobile-First Design

Source: https://www.geekswithgeeks.com/en/responsive-design/flexible-layouts

> Use widths in percentages, em, rem, and viewport units so containers and text scale with the screen.

## Relative units over pixels

❌ `width: 960px` — locked to one size. ✓ `width: 100%` — fits the container. ✓ `max-width: 1200px` — limits width while staying flexible. Relative units (%, em, rem, vw, vh) adapt automatically.

## Percentage-based layout

Three columns that automatically adjust width on smaller screens.

```css
.container { width: 100%; max-width: 1200px; margin: 0 auto; }
.column { width: 33.333%; float: left; padding: 16px; box-sizing: border-box; }

@media (max-width: 768px) {
  .column { width: 50%; }
}

@media (max-width: 480px) {
  .column { width: 100%; }
}
```

## Using em and rem for consistency

`em` is relative to the current element's font-size. `rem` is relative to the root (html). `rem` is easier to maintain at scale.

```css
html { font-size: 16px; }

body { font-size: 1rem; /* 16px */ line-height: 1.5; }
h1 { font-size: 2.5rem; /* 40px */ margin-bottom: 1rem; }

@media (max-width: 768px) {
  html { font-size: 14px; }
  /* All rem units now scale down proportionally */
}
```

## box-sizing: border-box is essential

By default, padding and borders add to an element's width. `box-sizing: border-box` makes padding and borders part of the width, making percentage-based layouts much easier to predict.