होली ग्रेल सीएसएस ग्रिड लेआउट - तैयार कोड
सीएसएस ग्रिड लेआउट को दृश्य रूप से डिज़ाइन करें: कॉलम, पंक्तियाँ और अंतराल सेट करें, फिर ग्रिड-टेम्पलेट-क्षेत्र बनाने के लिए कोशिकाओं में क्षेत्र के नाम टाइप करें - एक लाइव पूर्वावलोकन और कॉपी करने योग्य सीएसएस और एचटीएमएल के साथ।
नतीजा
यह पृष्ठ होली ग्रेल लेआउट के साथ पहले से लोड किए गए ग्रिड जनरेटर को खोलता है: तीन कॉलम और तीन पंक्तियाँ, जिसमें हेडर और फ़ूटर पूरी चौड़ाई में फैले हुए हैं और बीच में एक नेव/मेन/साइड पंक्ति है। हेडर पंक्ति ऑटो ऊंचाई का उपयोग करती है, मध्य पंक्ति शेष स्थान को भरती है, और दो साइड कॉलम 200px पर तय होते हैं जबकि मुख्य कॉलम बाकी जगह लेता है।
होली ग्रेल लेआउट ने अपना नाम इसलिए कमाया क्योंकि सीएसएस ग्रिड से पहले इसे विश्वसनीय रूप से बनाना वास्तव में कठिन था - वर्षों के फ्लोट हैक्स, टेबल लेआउट और पूर्ण पोजिशनिंग ने इस सटीक आकार को नकली बनाने की कोशिश की। ग्रिड-टेम्पलेट-क्षेत्रों के साथ यह पांच नामित क्षेत्रों और कुछ ट्रैक आकारों में सिमट जाता है, यही कारण है कि यह सीएसएस ग्रिड सिखाने के लिए मानक पहला उदाहरण बना हुआ है।
इस पृष्ठ पर प्रत्येक संख्या और अंतराल अभी भी लाइव है: साइड कॉलम को छोटा करें, चौथी पंक्ति जोड़ें, या किसी क्षेत्र का नाम बदलें और पूर्वावलोकन और कॉपी करने योग्य सीएसएस को तुरंत अपडेट करें। सीएसएस और HTML ब्लॉक को सीधे अपने प्रोजेक्ट में कॉपी करें - सब कुछ आपके ब्राउज़र में स्थानीय रूप से चलता है, कुछ भी अपलोड नहीं किया जाता है।