लचीले लेआउट

Pixels के बजाय relative units

❌ width: 960px — एक आकार पर locked। ✓ width: 100% — container में फिट होता है। ✓ max-width: 1200px — चौड़ाई को limit करते हुए flexible रहता है। Relative units (%, em, rem, vw, vh) automatically adapt होते हैं।

Percentage-based layout

तीन columns जो छोटी स्क्रीन पर automatically adjust होते हैं।

.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%; }
}

Consistency के लिए em और rem का उपयोग करना

em current element के font-size के relative है। rem root (html) के relative है। Scale पर rem maintain करना आसान है।

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 आवश्यक है

डिफ़ॉल्ट रूप से, padding और borders एक element की चौड़ाई में add होते हैं। box-sizing: border-box padding और borders को चौड़ाई का भाग बनाता है, जिससे percentage-based layouts को predict करना बहुत आसान हो जाता है।