CSS Flexbox और Grid प्लेग्राउंड

CSS Flexbox और Grid प्लेग्राउंड क्या है?

CSS Flexbox और Grid प्लेग्राउंड CSS के दो मुख्य लेआउट मॉडल सीखने और प्रोटोटाइप बनाने के लिए एक मुफ़्त विज़ुअल सैंडबॉक्स है, जो फ्रंट-एंड डेवलपरों, छात्रों और डिज़ाइनरों के लिए बनाया गया है। मोड टॉगल से Flex या Grid चुनें, फिर सादे ड्रॉपडाउन और संख्या इनपुट से कंटेनर गुण सेट करें: Flex मोड में आप flex-direction, flex-wrap, justify-content और align-items नियंत्रित करते हैं; Grid मोड में आप कितने कॉलम और रो (repeat(n, 1fr) के रूप में रेंडर) तथा justify-items और align-items सेट करते हैं। एक gap मान और आइटम संख्या दोनों पर लागू होती है। नंबर वाली टाइलों का लाइव पूर्वावलोकन ठीक-ठीक दिखाता है कि आपका संरेखण और अंतराल कैसा व्यवहार करता है, और पूरा .container CSS नियम कॉपी करने के लिए जनरेट होता है। जब भी आप अपनी परियोजना में पेस्ट करने से पहले देखना चाहें कि कोई flex या grid सेटिंग वास्तव में कैसी दिखती है, इसका उपयोग करें।

CSS Flexbox और Grid प्लेग्राउंड का उपयोग कैसे करें

1. कौन सा लेआउट मॉडल बनाना है यह चुनने के लिए मोड टॉगल से Flex या Grid चुनें।
2. Flex मोड में, ड्रॉपडाउन से flex-direction, flex-wrap, justify-content और align-items सेट करें।
3. Grid मोड में, कॉलम और रो की संख्या, तथा justify-items और align-items सेट करें।
4. gap (px में अंतराल) और पूर्वावलोकन में दिखाए गए आइटमों की संख्या बदलने के लिए सेटिंग्स खोलें।
5. हर गुण बदलने पर लाइव टाइल पूर्वावलोकन को पुनर्व्यवस्थित होते देखें।
6. जनरेट किए गए .container CSS नियम को कॉपी करके अपनी स्टाइलशीट में पेस्ट करें।

उदाहरण

Flex · direction row · justify-content center · align-items center · gap 12

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

Grid · columns 3 · rows 2 · justify-items start · align-items stretch · gap 16

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · direction column · justify-content space-between · align-items stretch · gap 8

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 8px;
}

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

यहाँ Flexbox और Grid में क्या अंतर है?

Flex मोड आइटमों को एक ही अक्ष के साथ व्यवस्थित करता है और flex-direction, flex-wrap, justify-content और align-items दिखाता है। Grid मोड आइटमों को grid-template-columns और grid-template-rows (repeat(n, 1fr) के रूप में लिखा) के साथ justify-items और align-items का उपयोग करके द्वि-आयामी ग्रिड में व्यवस्थित करता है। यह तुलना करने के लिए टॉगल से मोड बदलें कि प्रत्येक मॉडल समान संरेखण को कैसे संभालता है।

gap मान क्या करता है?

gap, CSS gap गुण के ज़रिए Flex और Grid दोनों लेआउट में हर आइटम के बीच की जगह को पिक्सेल में सेट करता है। टाइलों को दूर फैलाने के लिए इसे बढ़ाएं या सटे हुए लेआउट के लिए 0 सेट करें; पूर्वावलोकन और जनरेट CSS दोनों तुरंत अपडेट होते हैं।

Grid में justify-content और align-items अलग तरह क्यों लिखे जाते हैं?

Grid, justify-items और align-items के लिए start, end, center और stretch कीवर्ड का उपयोग करता है, जबकि Flex flex-start और flex-end का उपयोग करता है। यह टूल आप जिस भी मोड में हों उसके लिए सही कीवर्ड देता है, इसलिए कॉपी किया गया CSS हमेशा वैध रहता है।

क्या मैं बदल सकता हूँ कि कितने आइटम दिखाए जाएं?

हाँ। सेटिंग्स खोलें और नंबर वाली पूर्वावलोकन टाइलें जोड़ने या हटाने के लिए आइटम संख्या बदलें (24 तक)। यह केवल स्क्रीन पर प्रदर्शन को प्रभावित करता है; जनरेट किया गया CSS कंटेनर का वर्णन करता है, आइटमों का नहीं।

क्या मेरा डेटा कहीं अपलोड होता है?

नहीं। यह प्लेग्राउंड पूरी तरह आपके ब्राउज़र में JavaScript के साथ चलता है, इसलिए आपकी सेटिंग और जनरेट किया गया CSS कभी सर्वर पर नहीं भेजा जाता। पेज लोड होने के बाद यह निजी रूप से और ऑफ़लाइन भी काम करता है।