grid-template-areas ప్రాంతాలకు పేరు పెట్టడం ద్వారా గ్రిడ్ను దృశ్యపరంగా ఆకృతీకరించడానికి మిమ్మల్ని అనుమతిస్తుంది, సంక్లిష్ట పేజీ లేআউట్లను చదవదగ్గవిగా మరియు ప్రతిస్పందనశీలంగా పునర్వ్యవస్థ చేయడానికి సులభం చేస్తుంది.
పేరు పెట్టిన ప్రాంతాలను నిర్వచించండి
.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-కला 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ను మొదటిగా ఉంచడం ప్రాప్యతకు మంచిది, అయితే సైడ్బార్ను ప్రారంభంలో విజువల్గా చూపించండి). - సులభమైన ప్రతిస్పందనశీల రీఫ్లో — ప్రతి బ్రేక్పాయింట్కు ప్రాంత టెంప్లేట్ను స్వాప్ చేయండి.
ఇది ఎందుకు ముఖ్యమైనది
పేరు పెట్టిన గ్రిడ్ ప్రాంతాలు పేజీ-స్థాయి లేআউట్లను (హెడర్/సైడ్బార్/మేయిన్/ఫూటర్) చదవదగ్గవిగా మరియు తృణపర్ణీయ ప్రతిస్పందనశీలం చేస్తాయి — పునర్నిర్మాణం ASCII మ్యాప్ను సవరించడం, స్థానాలను పునర్వైరింగ్ చేయడం కాదు.
CSS అందించే స్పష్టమైన, సర్వాధిక నిర్వహణీయ లేআউట్ పద్ధతుల్లో ఇది ఒకటి.