सीएसएस ग्रिड जेनरेटर

ग्रिड-टेम्पलेट-क्षेत्र घोषणा सीएसएस के सबसे पठनीय टुकड़ों में से एक है, लेकिन केवल एक बार यह अस्तित्व में है - हाथ से वहां पहुंचने का अर्थ है उद्धृत स्ट्रिंग्स की गिनती करना और पंक्ति की लंबाई का मिलान करना, और एक बेमेल सेल चुपचाप पूरे लेआउट को तोड़ देता है। यह जनरेटर इसे सीधे हेरफेर में बदल देता है: कॉलम और पंक्ति गणना सेट करें, लाइव ग्रिड के किसी भी सेल में एक नाम टाइप करें, और मिलान नाम स्वचालित रूप से एक नामित क्षेत्र में विलय हो जाते हैं।

हुड के तहत, आपके द्वारा खाली छोड़ी गई प्रत्येक कोशिका उत्पन्न ग्रिड-टेम्पलेट-क्षेत्र स्ट्रिंग में एक बिंदु बन जाती है, और आपके द्वारा नाम दिया गया प्रत्येक कोशिका उस नाम के आयत का हिस्सा बन जाती है। सीएसएस केवल एक नामित क्षेत्र को एक साफ आयताकार ब्लॉक पर कब्जा करने की अनुमति देता है, इसलिए जैसे ही आप टाइप करते हैं, टूल इसकी जांच करता है और आपको सटीक रूप से बताता है कि कोई नाम अभी तक एक वैध आयत नहीं बना रहा है - चुपचाप सीएसएस का उत्पादन करने के बजाय ब्राउज़र अस्वीकार कर देगा।

कॉलम-गैप और पंक्ति-गैप 8px पर डिफ़ॉल्ट होते हैं और जब वे मेल खाते हैं तो एक एकल गैप लाइन में संयोजित होते हैं, और लाइव पूर्वावलोकन ग्रिड हमेशा आपके ग्रिड-टेम्पलेट-कॉलम और ग्रिड-टेम्पलेट-पंक्तियों ट्रैक को प्रतिबिंबित करता है, जिसमें होली ग्रेल के 200px साइड रेल जैसे प्रीसेट से निश्चित पिक्सेल कॉलम शामिल होते हैं। कॉपी करने योग्य आउटपुट दोनों पक्षों को कवर करता है: आपकी स्टाइलशीट के लिए तैयार एक सीएसएस ब्लॉक और प्रत्येक नामित क्षेत्र में एक ग्रिड-क्षेत्र div के साथ एक मिलान HTML कंकाल।

ग्रिड और फ्लेक्सबॉक्स विभिन्न लेआउट समस्याओं को हल करते हैं, और इस साइट पर सीएसएस-फ्लेक्सबॉक्स-जनरेटर एक-आयामी लेआउट के लिए बेहतर शुरुआती बिंदु है - लचीली वस्तुओं की एक पंक्ति या स्तंभ जैसे कि नेव बार या कार्ड का ढेर। इसके बजाय जब आपको द्वि-आयामी नियंत्रण, स्पष्ट पंक्तियों और स्तंभों, या हेडर/एनएवी/मेन/फुटर जैसे नामित क्षेत्रों की आवश्यकता हो तो इस ग्रिड जनरेटर तक पहुंचें; दोनों उपकरण अक्सर एक ही पेज पर होते हैं, पेज शेल के लिए ग्रिड और उसके टुकड़ों के अंदर फ्लेक्सबॉक्स। इस साइट के प्रत्येक टूल की तरह, यह पूरी तरह से आपके ब्राउज़र में चलता है - कोई अपलोड नहीं, कोई खाता नहीं।