CSS Grid Template Areas — शब्दों में Layout बनाएँ

घर का नक़्शा सोचिए। उसे बताने के दो तरीक़े हैं। एक numbers से: कमरा 1 तीन metre चौड़ा है, कमरा 2 चार metre चौड़ा है, वग़ैरह। दूसरा नाम से: kitchen यहाँ, bedroom वहाँ, hall बीच में। नाम पढ़ना कहीं आसान है — और दोबारा जमाना भी कहीं आसान। Grid template areas नाम वाले तरीक़े से काम करते हैं। आप अपने page का layout शब्दों में बनाते हैं, हर zone को नाम देते हैं, और browser आपकी drawing से layout बना देता है।

Diagram — देखें, यह सब कैसे जुड़ता है

नक़्शा बनाना

नक़्शा grid container पर grid-template-areas में लिखा जाता है। हर quoted string layout की एक row है, और string का हर शब्द एक cell है। एक शब्द को cells पर दोहराने से वह एक बड़े zone में जुड़ जाते हैं:

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: 80px 1fr 60px;
}

यहाँ header दोनों columns पर फैला है, sidebar और main बीच की row बाँटते हैं, और footer फिर दोनों columns पर फैला है। Dot (.) ख़ाली cell बताता है जिसे कुछ नहीं भरता। हर row string में cells की संख्या एक जैसी होनी चाहिए, वरना पूरा नक़्शा ग़लत है और browser उसे ignore कर देता है।

नाम से जगह देना

grid के हर child को अपना zone grid-area property से मिलता है: .header { grid-area: header; }, .sidebar { grid-area: sidebar; }, वग़ैरह। item को यह जानने की ज़रूरत नहीं कि वह कौनसी row या column में है — उसका नाम सारा काम कर देता है। sizes फिर भी grid-template-columns और grid-template-rows से आते हैं: sidebar column 200px चौड़ा है, main column बाक़ी जगह लेता है, और rows 80px, flexible, और 60px ऊँची हैं।

मोबाइल के लिए फिर से जमाना

यहीं named areas चमकते हैं। phone पर sidebar main content के बग़ल में नहीं, उसके नीचे होना चाहिए। number वाले columns से हर item की placement दोबारा लिखनी पड़ती; areas से media query के अंदर सिर्फ़ नक़्शा दोबारा लिखना होता है, वही नाम नई तरतीब में:

@media (max-width: 600px) {
  .page {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

कुछ और नहीं बदलता — items अपने grid-area नाम बनाए रखते हैं, और browser नए नक़्शे से पूरा page दोबारा बहा देता है।

आम गलतियाँ

• rows में cells की अलग-अलग संख्या लिखना — हर row string में शब्दों की संख्या एक जैसी होनी चाहिए, वरना नक़्शा ग़लत है।
• किसी item को grid-area देना भूलना — बिना नाम का item browser खुद जगह पर रख देता है, जो अक्सर वहाँ नहीं होता जहाँ आप चाहते थे।
• अंक से शुरू होने वाला area नाम इस्तेमाल करना, जैसे 2nd-column — पूरा declaration गिरा दिया जाता है।
• यह उम्मीद करना कि नक़्शा अकेला zones का size तय कर देगा — नक़्शा सिर्फ़ जगह बताता है; grid-template-columns और grid-template-rows फिर भी size तय करते हैं।
• mobile media query में हर item की placement दोबारा लिखना — areas से सिर्फ़ नक़्शा दोबारा लिखना होता है, items अपने नाम बनाए रखते हैं।

याद रखें

• grid-template-areas layout शब्दों में बनाता है: हर row के लिए एक quoted string, हर cell के लिए एक शब्द।
• शब्द को cells पर दोहराने से वह एक बड़े zone में जुड़ जाता है; dot ख़ाली cell बताता है।
• children अपना zone grid-area: नाम; से लेते हैं — वह कभी row या column नहीं गिनते।
• हर row string में cells की संख्या एक जैसी होनी चाहिए, और नाम अंक से शुरू नहीं हो सकते।
• mobile के लिए media query में सिर्फ़ नक़्शा दोबारा लिखिए — items अपने नाम बनाए रखते हैं।

उदाहरण समझिए

• grid-template-areas: "header header" "sidebar main" "footer footer"; — नक़्शा: header ऊपर दोनों तरफ़, बीच में sidebar के बग़ल main, footer नीचे दोनों तरफ़।
• grid-template-columns: 200px 1fr; — sidebar column 200px पर fixed है और main column जो जगह बचती है वह ले लेता है।
• .header { grid-area: header; } — header header zone लेता है, जो दोनों columns पर फैला है क्योंकि शब्द नक़्शे में दोहराता है।
• .main { grid-area: main; } — main content main zone लेता है, चौड़ी screen पर sidebar के बग़ल में।
• @media (max-width: 600px) — पतली screen पर नक़्शा एक column में दोबारा लिखा जाता है: header, main, sidebar, footer, इसी order में stacked।