CSS Grid चीटशीट
CSS Grid चीटशीट का उपयोग करें, लाइव प्रीव्यू और CSS आउटपुट के साथ इंटरैक्टिव संदर्भ के लिए, वेब डिजाइन कार्य को तेज़ करें।
CSS Grid चीटशीट: एक मुफ्त ऑनलाइन टूल
वेब डिज़ाइन में, CSS Grid एक शक्तिशाली लेआउट प्रणाली है जो आपको जटिल डिज़ाइन बनाने में मदद करती है। इस संदर्भ में, "CSS Grid चीटशीट" एक अनूठा और उपयोगी ऑनलाइन उपकरण है जो CSS Grid प्रॉपर्टी का इंटरैक्टिव संदर्भ प्रदान करता है। यह टूल आपको लाइव प्रिव्यू के साथ CSS आउटपुट देखने की सुविधा देता है, जिससे आप अपने डिज़ाइन में त्वरित बदलाव कर सकते हैं।
टूल की विशेषताएँ
CSS Grid चीटशीट कुछ महत्वपूर्ण विशेषताएँ प्रदान करता है:चरण-दर-चरण उपयोग
CSS Grid चीटशीट का उपयोग करना बहुत सरल है। यहाँ एक साधारण चरण-दर-चरण प्रक्रिया दी गई है:1. वेबसाइट पर जाएं: सबसे पहले, CSS Grid चीटशीट की वेबसाइट पर जाएं।
2. प्रॉपर्टी का चयन करें: दाईं ओर दिए गए मेन्यू से उस CSS Grid प्रॉपर्टी का चयन करें, जिसे आप उपयोग करना चाहते हैं, जैसे `grid-template-columns`।
3. मान सेट करें: अपनी आवश्यकता के अनुसार मान सेट करें। जैसे कि, आप 3 कॉलम बनाना चाहते हैं, तो आप `repeat(3, 1fr)` का उपयोग कर सकते हैं।
4. लाइव प्रिव्यू देखें: जैसे ही आप मान बदलते हैं, लाइव प्रिव्यू पैनल में बदलाव दिखेगा।
5. CSS आउटपुट कॉपी करें: जब आप संतुष्ट हों, तो CSS आउटपुट को कॉपी करें और अपने प्रोजेक्ट में पेस्ट करें।
वास्तविक-विश्व उदाहरण
मान लीजिए, आप एक वेब पेज पर तीन कॉलम का लेआउट बनाना चाहते हैं। CSS Grid चीटशीट पर जाकर, आप `grid-template-columns: repeat(3, 1fr);` सेट कर सकते हैं। इस तरह, आप तीन समान कॉलम बनाएंगे जो कि पूरी चौड़ाई का उपयोग करेंगे। लाइव प्रिव्यू में आप देख सकते हैं कि ये कॉलम कैसे दिखेंगे, और यदि आवश्यक हो, तो आप उन्हें तुरंत संशोधित कर सकते हैं।
उदाहरण कोड
```css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
```