CSS ग्रिड जनरेटर: कॉलम, पंक्तियाँ और नामित क्षेत्र

इसका इस्तेमाल कैसे करें

कॉलम (ट्रैक का आकार) और पंक्तियाँ (ट्रैक का आकार) लिखें। दो कॉलम के लिए 200px 1fr एक तय साइडबार और लचीला मुख्य क्षेत्र देता है।
कॉलम गैप (px) और पंक्ति गैप (px) तय करें, और कंटेनर को क्लास का नाम दें।
रंगने वाले क्षेत्र का नाम के नीचे एक नाम लिखें, रंगें चुना रहने दें, और उस क्षेत्र की कोशिकाओं पर क्लिक करें। कोशिकाएँ मिटाने के लिए मिटाएँ चुनें।
CSS बॉक्स कॉपी करें, या अपनी स्टाइलशीट में नियम चिपकाने से पहले पूर्वावलोकन देखें।

ट्रैक का आकार और repeat()

हर ट्रैक ग्रिड में एक आकार है: px या प्रतिशत में लंबाई, fr में लचीला आकार जो बची जगह को अपनी संख्या के अनुपात में बाँटता है, auto, min-content या max-content। minmax(न्यूनतम, अधिकतम) ट्रैक को एक सीमा देता है। CSS Grid Layout specification बताता है कि हर एक का आकार कैसे तय होता है।

repeat(3, 1fr) वही ट्रैक तीन बार लिखता है। repeat(auto-fill, minmax(200px, 1fr)) बॉक्स की चौड़ाई में जितने ट्रैक आ सकें उतने बनाता है। चूँकि यह गिनती बॉक्स पर निर्भर है, auto-fill या auto-fit के हर ट्रैक का आकार तय होना चाहिए, और टूल उस पर नामित क्षेत्र नहीं बना सकता।

grid-template-columns: 200px 1fr;  grid-template-rows: auto 1fr auto;  gap: पंक्ति-गैप कॉलम-गैप;

नामित क्षेत्र

grid-template-areas प्रॉपर्टी ग्रिड की हर पंक्ति के लिए एक स्ट्रिंग लेती है। स्ट्रिंग के नाम उस पंक्ति की कोशिकाएँ हैं, और पूर्ण विराम (.) ऐसी कोशिका है जो किसी क्षेत्र में नहीं है। हर नाम एक आयत भरना चाहिए, क्योंकि ब्राउज़र किसी नाम को L आकार या दो अलग ब्लॉकों में नहीं रख सकता।

नाम कंटेनर से ग्रिड पर रखे जाते हैं, और हर चाइल्ड grid-area से अपनी जगह लेता है। टूल हर नाम के लिए एक नियम लिखता है, ताकि उस क्लास वाला तत्व अपनी कोशिकाएँ भर दे।

ट्रैक की हर पंक्ति के लिए नामों की एक पंक्ति लिखें, और हर पंक्ति में नामों की संख्या एक जैसी।
ऐसे नाम चुनें जो पेज के हिस्से को बताएँ, जैसे header, sidebar या main, क्योंकि नियम उन्हीं नामों को क्लास मानकर लिखे जाते हैं।

हल किया हुआ उदाहरण: हेडर, साइडबार, सामग्री और फ़ुटर वाला पेज

डिफ़ॉल्ट लेआउट में दो कॉलम हैं, 200px और लचीला 1fr, और तीन पंक्तियाँ: हेडर के लिए auto, बीच के लिए 1fr और फ़ुटर के लिए auto। गैप दोनों दिशाओं में 16 px है। हेडर दोनों कॉलम पर रंगा गया है, साइडबार और मुख्य सामग्री बीच की पंक्ति बाँटते हैं, और फ़ुटर नीचे दोनों कॉलम पर रंगा गया है।

CSS की शुरुआत .layout { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr auto; gap: 16px; } से होती है, फिर तीन पंक्तियों वाला grid-template-areas: "header header", "sidebar main" और "footer footer"। हर नाम का grid-area वाला अपना नियम है, ताकि हेडर तत्व पहली पंक्ति भरे।

अक्सर पूछे जाने वाले सवाल

fr और auto में क्या अंतर है?

fr ट्रैक तय ट्रैक के बाद बची जगह को अपनी संख्या के अनुपात में बाँटता है, इसलिए 1fr 2fr में दूसरे ट्रैक की चौड़ाई पहले की दोगुनी होती है। auto ट्रैक उतना चौड़ा होता है जितना उसकी सामग्री को चाहिए, और फिर कोई बची जगह बाँटता है।

auto-fill ट्रैक पर क्षेत्र क्यों नहीं रंग सकते?

auto-fill और auto-fit ट्रैक की संख्या बॉक्स की चौड़ाई से तय करते हैं, इसलिए संपादन के समय कोशिकाओं की संख्या पता नहीं होती। नामित क्षेत्रों को तय गिनती चाहिए, इसलिए जब क्षेत्र रंगे जाते हैं तो टूल auto-fill या auto-fit हटाने को कहता है।

हर क्षेत्र का अपना नियम क्यों होता है?

grid-template-areas नामों को ग्रिड पर रखता है, पर हर आइटम को अब भी बताना पड़ता है कि वह कौन सी कोशिका भरता है, और यह grid-area करता है। टूल हर नाम के लिए एक नियम लिखता है, उसी नाम की क्लास के साथ।

जो कोशिकाएँ मैंने नहीं रंगीं, उनका क्या होता है?

किसी क्षेत्र में न आने वाली कोशिका grid-template-areas में पूर्ण विराम लिखी जाती है। नामित क्षेत्र वहाँ कुछ नहीं रखते, इसलिए वह खाली रहती है, जब तक आप किसी और तरीके से वहाँ आइटम न रखें।

कौन से ब्राउज़र CSS grid सहारते हैं?

CSS grid सभी आज के प्रमुख ब्राउज़रों में चलता है। अगर आपके विज़िटर पुराने संस्करण इस्तेमाल करते हैं, तो नामित क्षेत्रों पर भरोसा करने से पहले उन संस्करणों में लेआउट जाँचें।

क्या मेरा लेआउट कहीं भेजा या सहेजा जाता है?

नहीं। ग्रिड, पूर्वावलोकन और CSS आपके ब्राउज़र में बनते हैं। कुछ भी सहेजा या सर्वर पर भेजा नहीं जाता, इसलिए पेज छोड़ने से पहले CSS कॉपी कर लें।

स्रोत

आँकड़े और टेक्स्ट आखिरी बार मंगलवार, 10 नवंबर 2026 को जाँचे गए।