CSS ग्रिड जनरेटर

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

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

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

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