Grid-template-areas र responsive grids कसरी काम गर्छन्?

Question

IT Interview Practice · Accepted Answer

`grid-template-areas` ले तपाईंलाई regions को नाम राखेर **दृश्यात्मक** तरिकामा grid लेआउट गर्न दिन्छ, जसले जटिल पृष्ठ लेआउटलाई पठनीय र responsive रूपमा पुनर्व्यवस्थित गर्न सजिलो बनाउँछ।

## नामकरण गरिएका क्षेत्रहरू परिभाषित गर्दै

```css
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"   /* row 1: header spans both columns */
    "sidebar main"     /* row 2: sidebar | main */
    "footer  footer";  /* row 3: footer spans both */
  min-height: 100vh;
}

.header  { grid-area: header; }   /* assign each element to a named area */
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
```

ASCII-art `grid-template-areas` *लेआउट नै हो* — तपाई एक नजरमा संरचना देख्न सक्नुहुन्छ, र नाम दोहोर्याउँदा एक क्षेत्र बहुविध सेलमा फैलिन्छ।

## मोबाइलको लागि पुनर्व्यवस्थित गर्दै — केवल नक्सा पुनः कोर्नुहोस्

```css
@media (max-width: 600px) {
  .layout {
    grid-template-columns: 1fr;        /* single column */
    grid-template-areas:
      "header"
      "main"      /* main now ABOVE sidebar on mobile */
      "sidebar"
      "footer";
  }
}
```

मोबाइलको लागि सम्पूर्ण लेआउट परिवर्तन गर्न, तपाई केवल क्षेत्र नक्सा पुनः लेख्नुहुन्छ — HTML र `grid-area` असाइनमेन्टहरू समान रहन्छन्। यो प्रत्येक तत्वलाई अलग-अलग पुनः स्थान गर्नु भन्दा धेरै स्वच्छ छ।

## यो किन शक्तिशाली छ

- **आत्म-दस्तावेज** — CSS ले दृश्यमान गरिएको लेआउटलाई दृश्यात्मक रूपमा प्रतिबिम्बित गर्छ।
- **स्रोत क्रमबाट अलग** — तत्वहरू HTML क्रमको बिना कहीपनि राख्न सक्छन् (DOM मा `main` लाई पहिलो राख्न उपयोगी, तथापि sidebar लाई दृश्यात्मक रूपमा पहिलो देखाउन)।
- **सजिलो responsive reflow** — प्रत्येक breakpoint मा क्षेत्र template स्वैप गर्नुहोस्।

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

नामकरण गरिएका grid क्षेत्रहरूले पृष्ठ-स्तरीय लेआउटहरू (header/sidebar/main/footer) लाई पठनीय र सामान्यतः responsive दुवै बनाउँछन् — पुनर्संरचना एक ASCII नक्सा सम्पादन गर्ने कुरा हो, न कि स्थितिहरू पुनः जोडी गर्न।

यो CSS ले प्रस्ताव गरेको सबैभन्दा स्पष्ट, सबैभन्दा रक्षणीय लेआउट प्रविधिहरू मध्ये एक हो।

नामकरण गरिएका क्षेत्रहरू परिभाषित गर्दै

मोबाइलको लागि पुनर्व्यवस्थित गर्दै — केवल नक्सा पुनः कोर्नुहोस्

यो किन शक्तिशाली छ

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

सम्बन्धित प्रश्नहरू