CSS Grid Named Areas

Named areas किसी stylesheet को page layout को text से बने एक असली visual diagram की तरह लिख देने देते हैं, उन line numbers की list के बजाय जिन्हें आपको दिमाग में count करना पड़ता।

In this page:

grid-template-areas क्या करता है
एक Area को नाम देना और एक Item Place करना
Cells को Span करने के लिए एक नाम Repeat करना
खाली Cells के लिए एक Period इस्तेमाल करना
एक Complete Page Layout Example

Syntax

css

.container {
  grid-template-areas:
    "header header"
    "sidebar main";
}
.item {
  grid-area: area-name;
}

grid-template-areas क्या करता है

grid-template-areas grid को एक text-based diagram की तरह define करता है, जहाँ हर string एक row है और उसमें हर word उस area का नाम बताता है जिससे वह cell belong करता है -- CSS खुद visually उस layout जैसा दिखता है जो यह produce करता है।

Note:

Accepted values:
grid-template-areas — area names की strings, प्रति row एक
none — default, कोई named areas नहीं
grid-area — किसी item को assign किया गया नाम
. — एक dot एक खाली cell मार्क करता है
नोट: named areas को rectangles बनाना ज़रूरी है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: What grid-template-areas Does

css

<style>
.container {
  display: grid;
  grid-template-areas:
    "header header"
    "main main";
  gap: 4px;
  background: #eee;
}
.container div {
  background: steelblue;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div>Diagram resembles the layout it produces</div>
</div>

एक Area को नाम देना और एक Item Place करना

grid-template-areas में दिया गया एक नाम (जैसे "header") उसी selector पर grid-area: header से एक item को assign किया जाता है, इसलिए item automatically उस नाम वाले हर cell में उतर जाता है। यह grid lines count करने की ज़रूरत को पूरी तरह हटा देता है -- आप बस diagram और CSS rule के बीच names match करते हैं।

Note:

Accepted values:
grid-area: header — named area में place करता है
grid-template-areas — layout define करता है
name — कोई भी custom identifier
sirf rectangular — areas को rectangle बनाना ज़रूरी है

उदाहरण: Naming an Area and Placing an Item

css

<style>
.container {
  display: grid;
  grid-template-areas: "header";
  background: #eee;
  padding: 4px;
}
.header {
  grid-area: header;
  background: steelblue;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div class="header">Matches the "header" name from the diagram</div>
</div>

Cells को Span करने के लिए एक नाम Repeat करना

diagram में कई cells में एक ही नाम को repeat करना -- horizontally, vertically, या दोनों -- उस एक item को उन सभी cells में फैला देता है; repeated cells को एक solid rectangle बनाना ज़रूरी है।

Note:

Accepted values:
"a a b" — a दो columns span करता है
"a a a" — a एक row में repeated
. — खाली cell
rule — rows में एक जैसा नाम उन्हें span करता है

उदाहरण: Repeating a Name to Span Cells

css

<style>
.container {
  display: grid;
  grid-template-areas:
    "banner banner"
    "banner banner";
  gap: 4px;
  background: #eee;
}
.banner {
  grid-area: banner;
  background: steelblue;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div class="banner">Spans all four repeated cells</div>
</div>

खाली Cells के लिए एक Period इस्तेमाल करना

template-areas string में एक single dot (.) उस cell को जानबूझकर खाली मार्क करता है, layout में एक visual gap छोड़ते हुए जहाँ कोई item नहीं है। यह किसी design में जानबूझकर की गई whitespace के लिए उपयोगी है, जैसे किसी logo और navigation menu के बीच एक खाली column।

Note:

Accepted values:
. — एक खाली cell
... — कई dots एक खाली cell में merge हो जाते हैं
name — एक occupied cell
नोट: नाम के अंदर कोई whitespace नहीं

उदाहरण: Using a Period for Empty Cells

css

<style>
.container {
  display: grid;
  grid-template-areas: "logo . nav";
  gap: 8px;
  background: #eee;
  padding: 4px;
}
.logo { grid-area: logo; background: steelblue; color: white; padding: 10px; }
.nav { grid-area: nav; background: seagreen; color: white; padding: 10px; }
</style>
<div class="container">
  <div class="logo">Logo</div>
  <div class="nav">Nav</div>
</div>

एक Complete Page Layout Example

एक typical page skeleton -- पूरी width span करने वाला header, side-by-side sidebar और main content, और पूरी width span करने वाला footer -- सीधे तीन template-areas rows की तरह पढ़ा जाता है: "header header", "sidebar main", "footer footer"।

Note:

Accepted values:
grid-template-areas — layout map
grid-template-columns — column sizes
grid-template-rows — row sizes
grid-area — हर item पर placed

उदाहरण: A Complete Page Layout Example

css

<style>
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 4px;
  background: #eee;
}
.header { grid-area: header; background: steelblue; color: white; padding: 10px; }
.sidebar { grid-area: sidebar; background: seagreen; color: white; padding: 10px; }
.main { grid-area: main; background: coral; color: white; padding: 10px; }
.footer { grid-area: footer; background: darkslategray; color: white; padding: 10px; }
</style>
<div class="page">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main</div>
  <div class="footer">Footer</div>
</div>

Live Example

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson CSS Grid Items Next Lesson → CSS Grid Item Align

CSS Grid Named Areas

grid-template-areas क्या करता है

एक Area को नाम देना और एक Item Place करना

Cells को Span करने के लिए एक नाम Repeat करना

खाली Cells के लिए एक Period इस्तेमाल करना

एक Complete Page Layout Example

Chapter Quiz — Complete all 10 topics to unlock

Login to run this code