आधुनिक CSS फङ्क्शन र फीचरहरू (clamp, aspect-ratio, subgrid) कसरी लेआउटलाई सरल बनाउँछन्?

Question

Accepted Answer

आधुनिक CSS ले फङ्क्शन र प्रॉपर्टीहरू थपेको छ जसले मिडिया-क्वेरी र JavaScript हैकको पूरो क्याटेगरीलाई बदलदिन्छ। मुख्य फीचरहरू:

## clamp() — फ्लुइड, बाउन्डेड भ्यालुहरू

```css
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
/*               │       │     └── maximum (never bigger than 3rem) */
/*               │       └──────── preferred (scales with viewport) */
/*               └──────────────── minimum (never smaller than 1.5rem) */
```

`clamp(min, preferred, max)` ले **फ्लुइड टाइपोग्राफी/स्पेसिङ** दिन्छ जो भ्यूपोर्टसँग सहज रूपमा स्केल हुन्छ तर सीमा भित्र रहन्छ — धेरै ब्रेकपॉइन्टको `font-size` मिडिया क्वेरीलाई एक पङ्क्तिले बदलदिन्छ।

## aspect-ratio — अनुपात कायम गर्नुहोस्

```css
.video { aspect-ratio: 16 / 9; width: 100%; } /* height auto-computed to keep 16:9 */
.avatar { aspect-ratio: 1; }                    /* perfect square at any width */
```

यससम्म, रेस्पोन्सिभ 16:9 बक्स राख्न `padding-bottom: 56.25%` हैक आवश्यक थियो। अब यो एक घोषणा छ — र यसले छविहरू लोड हुनु अघि स्पेस सुरक्षित गर्छ (CLS को लागि राम्रो)।

## min() / max()

```css
.container { width: min(90%, 1200px); } /* whichever is SMALLER → fluid but capped */
.box { padding: max(1rem, 3vw); }       /* whichever is LARGER → a minimum floor */
```

`min()`/`max()` ले सानो/ठूलो मान छनोट गर्छ, जसले मिडिया क्वेरी बिना एक प्रॉपर्टीलाई रेस्पोन्सिभ बनाउन दिन्छ (उदा. "90% चौडा, तर कहिले पनि 1200px भन्दा बढी छैन")।

## subgrid — नेस्टेड ग्रिडहरू संरेखित गर्नुहोस्

```css
.card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
```

`subgrid` ले नेस्टेड ग्रिडलाई **आफ्नो अभिभावकको ट्र्याक लाइनहरू विरासतमा पाउन** दिन्छ, त्यसैले अलग कार्डहरूमा वस्तुहरू (शीर्षकहरू, निकायहरू, बटनहरू) साझा पङ्क्तिमा पूर्ण रूपमा संरेखित हुन्छ — पहिले निश्चित उचाइ बिना असम्भव थियो।

## gap सर्वत्र र तार्किक सहायकहरू

```css
.flex { display: flex; gap: 1rem; }   /* gap now works in flexbox, not just grid */
```

## किन यो महत्त्वपूर्ण छ

यी फीचरहरूले लामो समयदेखिको हैकहरूलाई हटाउँछ: `clamp()`/`min()`/`max()` फ्लुइड साइजिङको लागि मिडिया क्वेरीको स्ट्याकलाई बदलदिन्छ, `aspect-ratio` प्यादिङ हैकलाई बदलदिन्छ र लेआउट शिफ्टबाट सुरक्षा दिन्छ, र `subgrid` क्रस-कम्पोनेन्ट संरेखणलाई समाधान गर्छ।

तिनीहरूले रेस्पोन्सिभ, अनुपातिक लेआउटहरूलाई नाटकीय रूपमा सरल र अधिक मजबूत बनाउँछ — आधुनिक CSS ले घोषणात्मक रूपमा गर्छ जो पहिले JS वा नाजुक चालहरू आवश्यक थियो।