grid-template-areas

Named Layout Regions

💡 grid-template-areas ek floor plan jaisa hai — tum literally naam se areas define karte ho ("header", "sidebar", "main", "footer"), phir har element ko uske naam wale area mein assign karte ho — visual, readable layout definition.

grid-template-areas se ek "ASCII art" jaisa visual layout define kar sakte ho — har naam ek grid area represent karta hai. Individual items phir grid-area property se batate hain wo kaunse named area mein jaayenge.

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

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
/* Layout ekdum visual/readable hai code mein hi! */

📋

grid-template-areas ek floor plan jaisa hai — tum literally naam se areas define karte ho ("header", "sidebar", "main", "footer"), phir har element ko uske naam wale area mein assign karte ho — visual, readable layout definition.

1 / 2

⚡ Quick Recap

grid-template-areas = visual, named layout definition
grid-area = item ko named area assign karta hai
Code hi layout ka "map" ban jaata hai — bahut readable

Is page mein (2 subtopics)

grid-template-areas mein "." (dot) ek KHAALI cell represent karta hai — koi item us position mein nahi jaayega, jagah blank rehti hai.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "header header header"
    "sidebar main ."
    "footer footer footer";
}
/* Bottom-right corner mein main content ke saath ek khaali cell hai */

💡Tip: Dots se empty spaces create karna asymmetric layouts ke liye useful hai — jaise ek sidebar jo poori height nahi leta, ek corner khaali chhod ke.

Ek grid item khud bhi apna alag grid container ho sakta hai — "nested grids" complex, multi-level layouts ke liye common pattern (jaise ek main grid area ke andar khud ek chhota grid).

.page {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.page .gallery {
  display: grid;   /* nested grid — page ke andar */
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

💡Tip: Nested grids independent hote hain — outer grid ki columns/rows inner grid ko directly affect nahi karti, har grid apna khud ka coordinate system define karta hai.

← Previous🔲 CSS Grid — Basics Next →📍 Grid Item Placement

Code10x

grid-template-areas

Empty Cells in grid-template-areas

Nested Grids