grid-template-areas ले तपाईंलाई regions को नाम राखेर दृश्यात्मक तरिकामा grid लेआउट गर्न दिन्छ, जसले जटिल पृष्ठ लेआउटलाई पठनीय र responsive रूपमा पुनर्व्यवस्थित गर्न सजिलो बनाउँछ।
नामकरण गरिएका क्षेत्रहरू परिभाषित गर्दै
.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 लेआउट नै हो — तपाई एक नजरमा संरचना देख्न सक्नुहुन्छ, र नाम दोहोर्याउँदा एक क्षेत्र बहुविध सेलमा फैलिन्छ।
मोबाइलको लागि पुनर्व्यवस्थित गर्दै — केवल नक्सा पुनः कोर्नुहोस्
@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 ले प्रस्ताव गरेको सबैभन्दा स्पष्ट, सबैभन्दा रक्षणीय लेआउट प्रविधिहरू मध्ये एक हो।