Studio एडिटर: एडवांस्ड CSS ग्रिड के साथ काम करना
7 मिनट
Studio एडिटर में, आप एलिमेंट और सेक्शन के लेआउट को व्यवस्थित करने के लिए एडवांस्ड CSS ग्रिड का इस्तेमाल कर सकते हैं। आप अपनी ज़रूरत के हिसाब से रो और कॉलम की संख्या चुन सकते हैं और रिस्पॉन्सिव मेज़रमेंट (जैसे fr, Min/max, %) का इस्तेमाल करके उनका साइज़ सेट कर सकते हैं।
Wix स्टूडियो के अन्य वेबिनार, ट्यूटोरियल और कोर्स देखने के लिए हमारी
Wix स्टूडियो एकेडमी पर जाएं।
सेक्शन ग्रिड से CSS ग्रिड पर स्विच करना
एडिटर के सेक्शन में पहले से एक सेक्शन ग्रिड मौजूद होता है। यह एडवांस्ड ग्रिड का आसानी से इस्तेमाल किया जा सकने वाला वर्ज़न है, जो उसी CSS लॉजिक पर आधारित है। एडवांस्ड CSS ग्रिड पर स्विच करने से आपको हर ब्रेकपॉइंट के लिए लेआउट पर अधिक सटीक कंट्रोल मिलता है।
ध्यान दें:
एक बार स्विच करने के बाद, सेक्शन ग्रिड पर वापस जाना संभव नहीं है। हालांकि, अगर आपने अभी-अभी यह एक्शन किया है, तो एडिटर में सबसे ऊपर दाईं ओर मौजूद
अनडू बटन
का इस्तेमाल कर सकते हैं।
का इस्तेमाल कर सकते हैं। सेक्शन ग्रिड से CSS ग्रिड पर स्विच करने के लिए:
- संबंधित सेक्शन चुनें।
- एडिटर में सबसे ऊपर दाईं ओर ओपन इंस्पेक्टर आइकन
पर क्लिक करें।
- नीचे स्क्रॉल करके लेआउट पर जाएं।
- एडवांस्ड CSS ग्रिड के आगे मौजूद स्विच पर क्लिक करें।
- स्विच टू CSS ग्रिड पर क्लिक करें।
आगे क्या करें?
इंस्पेक्टर पैनल से रो, कॉलम और स्पेसिंग को कस्टमाइज़ करें। ग्रिड लाइन को मूव करने के लिए, आप उन्हें कैनवस पर ड्रैग भी कर सकते हैं।
अन्य एलिमेंट पर CSS ग्रिड लागू करना
आप कंटेनर, पॉपअप, फ्लेक्सबॉक्स और रिपीटर आइटम पर CSS ग्रिड लागू कर सकते हैं। खास तौर पर रिपीटर एलिमेंट में, एक आइटम पर ग्रिड लागू करने से बाकी आइटम अपने-आप अपडेट हो जाते हैं।
CSS ग्रिड लागू करने के लिए:
- एडिटर में संबंधित एलिमेंट चुनें।
- मोर एक्शंस आइकन
पर क्लिक करें। - अप्लाई एडवांस्ड CSS ग्रिड पर क्लिक करें।
- 1x1 ड्रॉप-डाउन से कोई लेआउट चुनें।
टिप: अगर आप रो और कॉलम की संख्या खुद सेट करना चाहते हैं, तो कुछ और चुनें।
आगे क्या करें?
इंस्पेक्टर पैनल से रो, कॉलम और स्पेसिंग को कस्टमाइज़ करें। ग्रिड लाइन को मूव करने के लिए, आप उन्हें कैनवस पर ड्रैग भी कर सकते हैं।
CSS ग्रिड को कस्टमाइज करना
अपनी पसंद का सटीक लेआउट पाने के लिए ग्रिड को कस्टमाइज करें। आप रो और कॉलम की संख्या बदल सकते हैं, उनका साइज एडजस्ट कर सकते हैं और उनके बीच के गैप भी बदल सकते हैं।
CSS ग्रिड को कस्टमाइज करने के लिए:
- संबंधित एलिमेंट या सेक्शन चुनें।
- चुनें कि आप ग्रिड को किस तरह कस्टमाइज करना चाहते हैं:
कोई दूसरा लेआउट चुनें
और रो और कॉलम जोड़ें
पर क्लिक करें।
पर क्लिक करें। 
अपने कॉलम या रो का साइज बदलें
कोई कॉलम या रो डिलीट करें
पर क्लिक करें।
गैप का साइज एडिट करें
ध्यान दें:
किसी सेक्शन से CSS ग्रिड हटाना संभव नहीं है। अगर आप सभी रो/कॉलम मिटाते हैं, तो ग्रिड फिर से 1x1 हो जाता है।
ब्रेकपॉइंट के साथ काम करना:
आपका डिजाइन डेस्कटॉप से छोटे ब्रेकपॉइंट तक कैस्केड होता है। आपके एलिमेंट का लेआउट हर स्क्रीन पर सही दिखे, इसके लिए हम हर ब्रेकपॉइंट के हिसाब से ग्रिड एडजस्ट करने का सुझाव देते हैं। नीचे दिए गए उदाहरण में, हमने हर ब्रेकपॉइंट के लिए अलग लेआउट सेट किया है (डेस्कटॉप पर 3 कॉलम, जबकि टैबलेट पर 3 रो)।
ग्रिड में एलिमेंट की पोजिशन सेट करना
ग्रिड में एलिमेंट जोड़ते समय, कई टूल उनकी पोजिशन को ज्यादा सटीक तरीके से सेट करने में आपकी मदद कर सकते हैं।
एलिमेंट डॉक करना
एलिमेंट को ग्रिडलाइन से डॉक करने से आप उन्हें ठीक अपनी पसंद की जगह पर पोजिशन कर सकते हैं। Studio एडिटर सभी एलिमेंट को अपने-आप डॉक करता है, लेकिन आप डॉकिंग को मैन्युअल रूप से एडजस्ट कर सकते हैं और मार्जिन जोड़ सकते हैं।
एलिमेंट को अलग-अलग ग्रिड सेल में मूव करना
इंस्पेक्टर के
पोजिशन सेक्शन में, आप किसी एलिमेंट को चुनकर देख सकते हैं कि वह किस ग्रिड सेल में है। ड्रैग-एंड-ड्रॉप का इस्तेमाल किए बिना एलिमेंट को मूव करने के लिए, किसी भी ग्रिड सेल पर क्लिक करें।
आप कॉलम और रो की खास संख्या भी दर्ज कर सकते हैं। जब आपको किसी एलिमेंट को एक से ज्यादा ग्रिड सेल पर रखना हो, तो यह विकल्प उपयोगी होता है।
ग्रिड यूनिट की तालिका
अपना ग्रिड बनाने के लिए, CSS यूनिट की पूरी रेंज का इस्तेमाल करें। आप प्रतिशत, फ्रैक्शन या पिक्सेल में कॉलम और रो का साइज़ सेट कर सकते हैं। इसके अलावा, आप कॉलम और रो का मिनिमम और मैक्सिमम साइज़ सेट कर सकते हैं या अपनी जरूरत का ग्रिड बनाने के लिए कैलकुलेशन का इस्तेमाल कर सकते हैं।
प्रतिशत (%)
फ्रैक्शन (fr)
ऑटो
पिक्सेल (px)
व्यूपोर्ट की चौड़ाई और ऊंचाई (vw और vh)
मिनिमम और मैक्सिमम कंटेंट
मिनिमम/मैक्सिमम
कैलकुलेशन
ओवरलैप होने वाले एलिमेंट्स से निपट रहे हैं?
क्या चेक करना है और इस समस्या को कैसे हल करना है, इसका तरीका जानने के लिए
हमारा ट्रबलशूटिंग वीडियो देखें।