Flexible layouts

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.

.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.

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.