संग्रह की मदद से व्यवस्थित रहें
अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.
इस क्लासिक होली ग्रेल लेआउट के लिए, हेडर, फ़ुटर, लेफ़्ट साइडबार, राइट साइडबार, और मुख्य कॉन्टेंट शामिल हैं. यह पिछले लेआउट जैसा ही है, लेकिन अब साइडबार के साथ!
कोड की एक लाइन का इस्तेमाल करके इस पूरे ग्रिड को लिखने के लिए, grid-template प्रॉपर्टी का इस्तेमाल करें. इसकी मदद से, लाइन और कॉलम, दोनों को एक साथ सेट किया जा सकता है.
प्रॉपर्टी और वैल्यू का जोड़ा है: grid-template: auto 1fr auto / auto 1fr auto. स्पेस से अलग की गई पहली और दूसरी सूचियों के बीच का स्लैश, पंक्तियों और कॉलम के बीच का ब्रेक होता है.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
पिछले उदाहरण की तरह ही, हेडर और फ़ुटर में अपने-आप साइज़ का कॉन्टेंट था, इसलिए यहां बाईं और दाईं ओर मौजूद साइडबार को बच्चों के साइज़ के हिसाब से अपने-आप साइज़ में बदल दिया जाता है. हालांकि, इस बार यह वर्टिकल (ऊंचाई) के बजाय हॉरिज़ॉन्टल साइज़ (चौड़ाई) है.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"वह जानकारी मौजूद नहीं है जो मुझे चाहिए"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"बहुत मुश्किल है / बहुत सारे चरण हैं"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"पुराना"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"अनुवाद से जुड़ी समस्या"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"सैंपल / कोड से जुड़ी समस्या"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"अन्य"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"समझने में आसान है"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"मेरी समस्या हल हो गई"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"अन्य"
}]
{"lastModified": "\u0906\u0916\u093f\u0930\u0940 \u092c\u093e\u0930 2023-10-25 (UTC) \u0915\u094b \u0905\u092a\u0921\u0947\u091f \u0915\u093f\u092f\u093e \u0917\u092f\u093e."}
[[["समझने में आसान है","easyToUnderstand","thumb-up"],["मेरी समस्या हल हो गई","solvedMyProblem","thumb-up"],["अन्य","otherUp","thumb-up"]],[["वह जानकारी मौजूद नहीं है जो मुझे चाहिए","missingTheInformationINeed","thumb-down"],["बहुत मुश्किल है / बहुत सारे चरण हैं","tooComplicatedTooManySteps","thumb-down"],["पुराना","outOfDate","thumb-down"],["अनुवाद से जुड़ी समस्या","translationIssue","thumb-down"],["सैंपल / कोड से जुड़ी समस्या","samplesCodeIssue","thumb-down"],["अन्य","otherDown","thumb-down"]],["आखिरी बार 2023-10-25 (UTC) को अपडेट किया गया."],[],[]]