grid-template-areas आपको क्षेत्रों को नाम देकर ग्रिड को दृश्य रूप से लेआउट करने देता है, जटिल पृष्ठ लेआउट को पठनीय और प्रतिक्रियाशील तरीके से पुनः व्यवस्थित करना आसान बनाता है।
{
: grid;
: fr;
: auto fr auto;
:
;
: ;
}
{ : header; }
{ : sidebar; }
{ : main; }
{ : footer; }
ASCII-आर्ट grid-template-areas ही लेआउट है — आप एक नज़र में संरचना देख सकते हैं, और किसी नाम को दोहराने से एक क्षेत्र कोशिकाओं में फैल जाता है।
@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 असाइनमेंट समान रहते हैं। यह प्रत्येक तत्व को व्यक्तिगत रूप से स्थिति बदलने से बहुत ज़्यादा स्वच्छ है।
main को पहले रखने के लिए अच्छा है पहुंच के लिए, फिर भी साइडबार को दृश्य रूप से पहले प्रदर्शित करता है)।नामित ग्रिड क्षेत्र पृष्ठ-स्तरीय लेआउट (हेडर/साइडबार/मुख्य/फूटर) को पठनीय और तुच्छ रूप से प्रतिक्रियाशील दोनों बनाते हैं — पुनर्गठन एक ASCII मानचित्र को संपादित करने का मामला है, स्थितियों को फिर से जोड़ने का नहीं।
यह CSS द्वारा दिए जाने वाले सबसे स्पष्ट, सबसे रखरखाव योग्य लेआउट तकनीकों में से एक है।