इस उपकरण के बारे में
CSS Grid जनरेटर समान भागों में बँटा दो-आयामी ग्रिड बनाता है। कॉलम और पंक्तियों की संख्या 1–12 के पूर्णांक तक सीमित है। प्रीव्यू आइटम की संख्या कॉलम गुणा पंक्तियों के बराबर होती है, अधिकतम 144।
कैसे इस्तेमाल करें
- कॉलम और पंक्ति संख्या दर्ज करें; दोनों 1–12 के पूर्णांक होने चाहिए।
- कॉलम और पंक्तियों के बीच की दूरी समायोजित करें।
- तुरंत बना ग्रिड और क्रमांक वाले आइटम देखें।
- CSS कॉपी करके अपने प्रोजेक्ट के ग्रिड कंटेनर पर लागू करें।
उदाहरण
- 3 कॉलम × 2 पंक्तियाँ = 6 आइटम दिखते हैं।
- 12 कॉलम × 12 पंक्तियाँ इस पेज की अधिकतम 144 आइटम सीमा तक पहुँचती हैं।
- कॉलम के बीच 24px और पंक्तियों के बीच 12px दूरी रखकर दोनों दिशाओं के खाली स्थान की तुलना करें।
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 16px;
}कार्यविधि और CSS विवरण
repeat(n, 1fr) समान हिस्सों वाले n ट्रैक बनाता है। 1fr कंटेनर की उपलब्ध जगह का एक हिस्सा देता है। column-gap कॉलम के बीच और row-gap पंक्तियों के बीच दूरी सेट करता है। दोनों समान हों तो gap का संक्षिप्त रूप इस्तेमाल कर सकते हैं।
सामान्य उपयोग
- कार्ड सूची और चित्र गैलरी बनाना।
- डैशबोर्ड का समान भागों वाला लेआउट तैयार करना।
- repeat(), fr और gap की भूमिका समझना।
गोपनीयता
आपका इनपुट और परिणाम केवल आपके ब्राउज़र में संसाधित होते हैं; उन्हें अपलोड या अपने आप सेव नहीं किया जाता। जिन परिणामों को रखना हो, उन्हें कॉपी करके संभालकर रखें।
FAQ
CSS Grid और Flexbox में क्या अंतर है?
Grid दो-आयामी लेआउट में पंक्तियाँ और कॉलम एक साथ नियंत्रित करने के लिए उपयुक्त है। Flexbox मुख्यतः एक मुख्य अक्ष पर तत्वों को बाँटता है।
1fr का क्या अर्थ है?
fr बची हुई उपलब्ध जगह का हिस्सा दर्शाता है। सभी ट्रैक 1fr हों, तो जगह सामान्यतः बराबर हिस्सों में बँटती है।
repeat(3, 1fr) का क्या अर्थ है?
यह 1fr 1fr 1fr के बराबर है और तीन समान हिस्सों वाले ट्रैक बनाता है।
gap और margin में क्या अंतर है?
gap ग्रिड ट्रैक के बीच की दूरी तय करता है और कंटेनर के बाहर अतिरिक्त जगह नहीं जोड़ता। margin किसी तत्व का अपना बाहरी अंतर होता है।
पंक्तियों और कॉलम की संख्या अधिकतम 12 क्यों है?
हर दिशा में 12 की सीमा से प्रीव्यू में अधिकतम 144 तत्व बनते हैं। इससे बहुत बड़े इनपुट के कारण पेज धीमा होने से बचता है।