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

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

CSS Flexbox और Grid प्लेग्राउंड CSS के दो मुख्य लेआउट मॉडल सीखने और प्रोटोटाइप बनाने के लिए एक मुफ़्त विज़ुअल सैंडबॉक्स है, जो फ्रंट-एंड डेवलपरों, छात्रों और डिज़ाइनरों के लिए बनाया गया है। Flex या Grid चुनें, कंटेनर गुण सेट करें, और अलग-अलग संतानों को स्टाइल देने के लिए सेटिंग्स खोलें: Flex मोड में order, flex-grow, flex-shrink, flex-basis और align-self, या Grid मोड में कॉलम/रो स्पैन और align-self। Grid मोड कस्टम ट्रैक आकार भी देता है — 200px 1fr या repeat(auto-fit, minmax(120px, 1fr)) जैसा कोई भी grid-template-columns/rows मान लिखें — और एक विज़ुअल grid-template-areas संपादक जहाँ आप हर सेल को नाम देते हैं, जो नामित ग्रिड लाइनें भी बनाता है। नंबर वाली टाइलों का लाइव पूर्वावलोकन हर बदलाव को दर्शाता है, और आप केवल .container नियम या कंटेनर के साथ प्रति-आइटम CSS निर्यात कर सकते हैं।

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

1. कौन सा लेआउट मॉडल बनाना है यह चुनने के लिए मोड टॉगल से Flex या Grid चुनें।
2. कंटेनर गुण सेट करें — flex-direction/wrap और justify/align, या justify-items/align-items के साथ कॉलम और रो की संख्या।
3. gap और आइटम संख्या बदलने और हर संतान को स्टाइल देने (order, flex-grow/shrink/basis, align-self, या कॉलम/रो स्पैन) के लिए सेटिंग्स खोलें।
4. Grid में ट्रैक आकार को कस्टम पर स्विच करके अपने खुद के grid-template-columns/rows लिखें — px, fr, minmax() या repeat(auto-fit/auto-fill, …)।
5. grid-template-areas संपादक चालू करें और आइटमों को क्षेत्र के अनुसार रखने के लिए हर सेल को नाम दें।
6. केवल कंटेनर CSS या कंटेनर के साथ प्रति-आइटम 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 · custom columns: repeat(auto-fit, minmax(120px, 1fr)) · gap 16

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

Grid · areas: header row, sidebar + main, footer row

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · export container + items · item 2 flex-grow 1

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

.container > :nth-child(2) {
  flex-grow: 1;
}

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

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

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

मैं अलग-अलग आइटमों को स्टाइल कैसे दूँ?

सेटिंग्स खोलें और प्रति-आइटम नियंत्रणों से हर संतान पर order, flex-grow, flex-shrink, flex-basis और align-self (Flex) या कॉलम/रो स्पैन और align-self (Grid) सेट करें। निर्यात को 'कंटेनर + आइटम' पर रखें, और टूल आपके द्वारा अनुकूलित हर आइटम के लिए एक .container > :nth-child(n) नियम जोड़ता है।

क्या मैं auto-fit या minmax() जैसे कस्टम ट्रैक आकार उपयोग कर सकता हूँ?

हाँ। Grid मोड में ट्रैक आकार को कस्टम पर स्विच करें और कोई भी मान्य grid-template-columns/rows मान लिखें — पिक्सेल, fr इकाइयाँ, minmax() या रिस्पॉन्सिव कॉलम के लिए repeat(auto-fit/auto-fill, minmax(120px, 1fr))। लिखते ही पूर्वावलोकन और जनरेट CSS अपडेट होते हैं।

grid-template-areas संपादक क्या करता है?

इसे Grid मोड में चालू करें और ग्रिड की हर सेल को नाम दें; टूल एक grid-template-areas घोषणा बनाता है और खाली सेल एक बिंदु बन जाती हैं। क्षेत्रों को नाम देना नामित ग्रिड लाइनें भी बनाता है, और आप उस आइटम के grid-area फ़ील्ड में नाम लिखकर किसी संतान को किसी क्षेत्र में रख सकते हैं।

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

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