श्रेणी: डेवलपर टूल
CSS ग्रिड जनरेटर
grid-template लेआउट बनाएँ और CSS कॉपी करें
लाइव ग्रिड पूर्वावलोकन पर कॉलम और पंक्ति की संख्या और गैप सेट करें, चाहें तो कॉलम को minmax() ट्रैक में बदलें ताकि वे रैप होने से पहले सिकुड़ सकें, फिर तैयार कंटेनर डिक्लेरेशन कॉपी करें। यहाँ कुछ भी आपके ब्राउज़र से बाहर नहीं जाता।
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 12px;
}इस पेज पर सब कुछ आपके ब्राउज़र में संसाधित होता है। कुछ भी अपलोड नहीं होता।
यह टूल क्या करता है
grid-template-columns: repeat(n, 1fr) बराबर कॉलम देता है जो अपनी सामग्री से नीचे कभी नहीं सिकुड़ते, जो छोटी स्क्रीन पर ओवरफ़्लो करते हैं। इसकी जगह minmax(min, 1fr) डालने पर हर कॉलम एक निचली सीमा तक सिकुड़ सकता है इससे पहले कि ग्रिड हार मानकर रैप करे — यही फ़र्क़ है एक ऐसे लेआउट में जो फ़ोन पर ठीक दिखता है और एक ऐसे में जो नहीं दिखता। यह टूल दोनों रूप एक ही कंट्रोल से बनाता है ताकि फ़र्क़ सिर्फ़ डिक्लेरेशन में नहीं, असली ग्रिड पर भी दिखे।
इस्तेमाल कैसे करें
- कॉलम और पंक्तियों की संख्या सेट करें।
- सेल के बीच का गैप सेट करें।
- छोटी स्क्रीन पर सिकुड़ने के लिए minmax() कॉलम चालू करें, फिर CSS कॉपी करें।
निजता
यह टूल पूरी तरह आपके ब्राउज़र में चलता है। आपका डेटा कभी अपलोड, सेव या साझा नहीं होता — टैब बंद करते ही वह हट जाता है।
अक्सर पूछे जाने वाले सवाल
- क्या पूर्वावलोकन असली CSS ग्रिड है?
- हाँ। नंबर वाले सेल ठीक उसी grid-template-columns और grid-template-rows से लेआउट होते हैं जो आप सेट कर रहे हैं।
- minmax() असल में क्या बदलता है?
- इसके बिना, repeat(n, 1fr) कॉलम बराबर तो रहते हैं पर अपनी सामग्री से नीचे कभी नहीं सिकुड़ते, इसलिए एक संकरा कंटेनर बस ओवरफ़्लो कर जाता है। minmax(min, 1fr) हर कॉलम को न्यूनतम तक सिकुड़ने देता है इससे पहले कि ब्राउज़र उन्हें फ़िट करने का कोई और तरीका ढूँढ़े।
- क्या कुछ अपलोड होता है?
- नहीं। डिक्लेरेशन आपके सेट किए गए कंट्रोल से बना टेक्स्ट है, और पूर्वावलोकन ग्रिड पेज में स्थानीय रूप से रेंडर होता है।