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