CSS ग्रिड प्लेग्राउंड
CSS Grid टेम्पलेट, अंतराल और स्थान को दृश्यात्मक रूप से तैयार करें, फिर लेआउट CSS कॉपी करें।
ग्रिड में किसी क्रमांकित आइटम पर क्लिक करके उसे चुनें और पुनर्स्थापित करें।
—
—
—
—
अभी कोई आइटम नहीं। इसे ग्रिड पर रखने के लिए एक आइटम जोड़ें।
प्रीसेटCSS ग्रिड प्लेग्राउंड के बारे में
CSS Grid Playground असली ग्रिड लेआउट को विज़ुअल रूप से बनाता है। grid-template-columns और grid-template-rows को आकार देने के लिए कॉलम और रो ट्रैक जोड़ें या हटाएं, कॉलम व रो गैप सेट करें, और सभी चार अलाइनमेंट प्रॉपर्टीज़ — justify-items, align-items, justify-content और align-content — को ट्यून करें, जबकि प्रीव्यू हर बदलाव को तुरंत दिखाता है।
आइटम प्लेसमेंट वह जगह है जहां ग्रिड सबसे ज़्यादा ताकतवर बनते हैं: आइटम जोड़ें, प्रीव्यू में किसी एक पर क्लिक करके उसे चुनें, और उसे column start, column span, row start और row span से पोज़िशन करें। इसी तकनीक से साइडबार, हेडर और फ़ीचर सेल कई ट्रैक तक फैलाए जाते हैं — जो लगभग हर असली ग्रिड लेआउट के पीछे की तरकीब है।
तीन प्रीसेट — holy grail, dashboard और gallery — क्लासिक पेज संरचनाएं लोड करते हैं जिन्हें आप खोलकर समझ सकते हैं और ढाल सकते हैं। जब लेआउट सही लगे, तो जनरेट किया गया CSS कॉपी करें, जिसमें पूरा ग्रिड कंटेनर नियम और हर आइटम की प्लेसमेंट शामिल है।
CSS ग्रिड प्लेग्राउंड का उपयोग कैसे करें
- ग्रिड टेम्पलेट तय करने के लिए कॉलम और रो ट्रैक जोड़ें या हटाएं।
- कॉलम गैप और रो गैप सेट करें।
- अलाइनमेंट नियंत्रण समायोजित करें: justify-items, align-items, justify-content और align-content।
- आइटम जोड़ें, प्रीव्यू में किसी एक पर क्लिक करें, और उसे प्लेस करने के लिए उसका column/row start व span सेट करें।
- एक क्लासिक लेआउट समझने के लिए holy grail, dashboard या gallery प्रीसेट लोड करें।
- जनरेट किए गए CSS को अपनी स्टाइलशीट में कॉपी करें।