Wix हेल्प

Studio एडिटर: सेल और ग्रिड के बारे में

3 मिनट
रिस्पॉन्सिव डिजाइन के लिए ग्रिड एक पावरफुल टूल है। ग्रिड सेल से बना होता है और हर एलिमेंट या एलिमेंट के ग्रुप को अपना अलग सेल मिलता है। इससे आपका लेआउट हर स्क्रीन साइज पर सही जगह बना रहता है और एलिमेंट एक-दूसरे पर ओवरलैप नहीं होते।
किसी अनुभाग को व्यवस्थित करने के लिए, आप उसमें सेल जोड़ सकते हैं या ज्यादा सटीक कंट्रोल के लिए एडवांस्ड CSS ग्रिड अप्लाई कर सकते हैं। CSS ग्रिड कंटेनर और रिपीटर आइटम जैसे उन एलिमेंट के लिए भी उपलब्ध है, जिन्हें सेल में बांटा नहीं जा सकता।
अनुभाग में सेल पर होवर करके लेआउट दिखाता हुआ GIF

सेक्शन ग्रिड

Studio एडिटर में, अनुभाग में एक बिल्ट-इन ग्रिड होता है, जिसमें एक सेल होता है और उसी में पूरा अनुभाग शामिल होता है। कंटेंट को रिस्पॉन्सिव स्ट्रक्चर देने के लिए, अनुभाग के लेआउट को और सेल में बांटें। आप कई कस्टमाइज किए जा सकने वाले लेआउट में से चुन सकते हैं।
किसी अनुभाग के लिए उपलब्ध ग्रिड लेआउट वाला ड्रॉप-डाउन दिखाता हुआ GIF
सही लेआउट चुनने के बाद, अपनी जरूरत के मुताबिक इसे बेहतर बनाने के लिए नए सेल जोड़ें या मौजूदा सेल को बांटें। हर सेल का साइज एडजस्ट करने के लिए, कैनवास पर ग्रिड लाइन को ड्रैग करें।
कैनवास पर ग्रिड लाइन को ड्रैग करने का तरीका दिखाता हुआ GIF

एडवांस्ड CSS ग्रिड

अनुभाग के ग्रिड पर ज्यादा सटीक कंट्रोल चाहिए? रो, कॉलम और उनके साइज को एडवांस्ड मेजरमेंट (जैसे fr, Min/max, %) से एडजस्ट करने के लिए एडवांस्ड CSS ग्रिड पर स्विच करें। आप हर ब्रेकपॉइंट के लिए इन सेटिंग्स को अलग-अलग कस्टमाइज कर सकते हैं, जिससे ग्रिड हर स्क्रीन साइज पर सही दिखता है।
एडवांस्ड ग्रिड अप्लाई करने के बाद इंस्पेक्टर में लेआउट सेक्शन का स्क्रीनशॉट
आप पूरे अनुभाग या सिर्फ किसी खास सेल पर एडवांस्ड CSS ग्रिड अप्लाई कर सकते हैं। इससे आप अनुभाग के अलावा कंटेनर या रिपीटर आइटम जैसे एलिमेंट में भी ग्रिड जोड़ सकते हैं। अगर यह ऑप्शन उपलब्ध है, तो आपको यह इंस्पेक्टर पैनल के लेआउट सेक्शन में मिलेगा।
एडवांस्ड ग्रिड अप्लाई करने का ऑप्शन उपलब्ध होने पर इंस्पेक्टर पैनल दिखाता हुआ स्क्रीनशॉट

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

Studio एडिटर में ग्रिड के बारे में ज्यादा जानने के लिए, नीचे दिए गए किसी सवाल पर क्लिक करें।
क्या एलिमेंट एक-दूसरे पर ओवरलैप हो रहे हैं?
क्या-क्या चेक करना है और इस समस्या को कैसे हल करना है, इसका तरीका जानने के लिए हमारा ट्रबलशूटिंग वीडियो रिव्यू करें।