सीएसएस ग्रिड लेआउट में आइटम स्थानांतरण [गाइड]

का उपयोग करते हुए सीएसएस ग्रिड लेआउट मॉड्यूल वेब डिज़ाइन में अधिक से अधिक संभव हो जाता है क्योंकि अधिक ब्राउज़र शुरू होते हैं इसका समर्थन करें. ग्रिड कोशिकाओं में भरने वाले लेआउट बनाते समय, एक क्षण आ सकता है, हालांकि, जब आप अधिक जटिल चीजों को प्राप्त करना चाहते हैं.

उदाहरण के लिए, आप चाहते हो सकता है थोड़ा घूमो कुछ ग्रिड आइटम अपने ग्रिड क्षेत्रों में फंस गए। आप भी चाहते होंगे उन्हें ग्रिड कंटेनर से बाहर ले जाएं (अतिप्रवाह), या एक दूसरे के ऊपर (ओवरलैप), या बस ... चारों ओर कुछ खाली जगह के लिए.

तो, इस पोस्ट में, मैं आपको दिखाता हूँ कि आप कैसे कर सकते हैं चाल, आदेश, अतिप्रवाह, ओवरलैप और आकार ग्रिड आइटम जब आप CSS ग्रिड लेआउट मॉड्यूल का उपयोग करते हैं.

CSS ग्रिड बनाएं

सबसे पहले, चलो एक सरल सीएसएस ग्रिड बनाते हैं एक पंक्ति और तीन कॉलम.

HTML में, हम divs का एक समूह बनाते हैं जहाँ ग्रिड कंटेनर है तीन ग्रिड आइटम शामिल हैं.

सीएसएस में, ग्रिड कंटेनर है प्रदर्शन: ग्रिड; संपत्ति और ग्रिड आइटम है ग्रिड क्षेत्र वह ग्रिड आइटम क्षेत्रों के नामों की पहचान करता है.

हम भी जोड़ें ग्रिड टेम्पलेट क्षेत्रों संपत्ति ग्रिड कंटेनर के लिए, जिसमें ग्रिड क्षेत्र के नामों का उपयोग किया जाता है ग्रिड क्षेत्रों को उन ग्रिड कोशिकाओं को असाइन करें, जिनका वे प्रतिनिधित्व करते हैं.

सभी कॉलम एक अंश का आकार लें (fr) कंटेनर की चौड़ाई सुनिश्चित करने के लिए, कंटेनर की चौड़ाई.

 .ग्रिड-कंटेनर प्रदर्शन: ग्रिड; ग्रिड-टेम्प्लेट-क्षेत्र: 'लेफ्ट सेंटर राइट'; ग्रिड-टेम्प्लेट-कॉलम: दोहराना (3, 1fr); ग्रिड-टेम्पलेट-पंक्तियाँ: 80 पीएक्स; ग्रिड-गैप: 5 पीएक्स; चौड़ाई: 360 पीएक्स; पृष्ठभूमि-रंग: मैजंटा;  .ग्रिड-लेफ्ट ग्रिड-एरिया: लेफ्ट;  .ग्रिड-सेंटर ग्रिड-एरिया: सेंटर;  .ग्रिड-राइट ग्रिड-एरिया: राइट;  .ग्रिड-कंटेनर div बैकग्राउंड-कलर: लाइटग्रीन;  

ओवरफ्लो ग्रिड आइटम

आप एक ग्रिड आइटम बना सकते हैं इसके ग्रिड कंटेनर को ओवरफ्लो करें यदि यह एक लेआउट के लिए आवश्यक है। अतिप्रवाह प्रभाव को प्राप्त करने के लिए, आपको बस जरूरत है एक अलग कॉलम आकार का उपयोग करें:

 .ग्रिड-कंटेनर प्रदर्शन: ग्रिड; ग्रिड-टेम्प्लेट-क्षेत्र: 'लेफ्ट सेंटर राइट'; ग्रिड-टेम्प्लेट-कॉलम: रिपीट (3, 150 पीएक्स); ग्रिड-गैप: 5 पीएक्स;  

स्तंभ का योग- और अंतर-आकार से बड़ा है कंटेनर की चौड़ाई, जिसके कारण ग्रिड आइटम उनके कंटेनर को ओवरफ्लो कर देते हैं.

ओवरलैप ग्रिड आइटम

ए ग्रिड आइटम ओवरलैप कर सकते हैं (पूरी तरह या आंशिक रूप से कवर) एक और ग्रिड आइटम निम्नलिखित मामलों में:

1. यह एक और ग्रिड आइटम की सेल (और अधिक) को फैलाने के लिए सेट है.
2. इसका आकार बढ़ाया गया है, जिससे यह पास के ग्रिड आइटम के साथ ओवरलैप हो सकता है.
3. यह एक और ग्रिड आइटम के ऊपर ले जाया गया है.

हम दूसरे और तीसरे मामलों पर बाद में चर्चा करेंगे “आकार” तथा “चलती” वर्गों.

पहले, चलो एक ग्रिड आइटम जब पहला मामला देखते हैं एक दूसरे के पार.

केंद्र में ग्रिड आइटम है बाईं ओर फैला हुआ, इसलिए केवल दो आइटम स्क्रीन पर दिखाई देते हैं.

 .ग्रिड-केंद्र ग्रिड-क्षेत्र: केंद्र; ग्रिड-स्तंभ: 1/3;  

ग्रिड स्तंभ तथा ग्रिड पंक्ति गुण ग्रिड लाइनें असाइन करें जिसके बीच एक कॉलम या पंक्ति को फिट करने की आवश्यकता होती है.

नीचे दिए गए आरेख पर, आप देख सकते हैं कि कैसे ग्रिड-कॉलम: 1/3 CSS नियम काम करता है: केंद्र स्तंभ ग्रिड लाइनों 1 और 3 के बीच फैला हुआ है. नतीजतन, केंद्र स्तंभ बाईं ओर ओवरलैप करता है.

ग्रिड आइटम ले जाएँ

हिलाने से मेरा मतलब है वस्तुओं को थोड़ा इधर-उधर करना. यदि आप पूरी तरह से किसी अन्य ग्रिड सेल / क्षेत्र में किसी आइटम को स्थानांतरित करना चाहते हैं तो मैं आपको ग्रिड निर्माण कोड को अपडेट करने की सलाह देता हूं.

ग्रिड आइटम के आसपास घूमना सरल है। केवल उपयोग हाशिया, परिवर्तन, या स्थिति: रिश्तेदार; गुण. नीचे देखें कि उन गुणों का उपयोग करके आइटम कैसे स्थानांतरित किए जाते हैं.

केंद्र और दाएं ग्रिड आइटम को निम्न तरीकों से स्थानांतरित किया जा सकता है (जैसा कि ऊपर दिखाया गया है):

1. उपयोग करना हाशिया

नकारात्मक मार्जिन ग्रिड वस्तुओं के आयाम को बढ़ाते हैं, जबकि सकारात्मक मार्जिन उन्हें ट्रिम करते हैं। दोनों के संयोजन का उपयोग करके, आप ग्रिड आइटम्स को चारों ओर ले जा सकते हैं.

 .ग्रिड-केंद्र ग्रिड-क्षेत्र: केंद्र; मार्जिन-लेफ्ट: -10px; मार्जिन-राइट: 10px; मार्जिन-टॉप: -10px; मार्जिन-नीचे: 10px;  .ग्रिड-राइट ग्रिड-एरिया: राइट; मार्जिन-बाएं: 10 पीएक्स; मार्जिन-राइट: -10px; मार्जिन-टॉप: -10px; मार्जिन-नीचे: 10px;  

2. उपयोग करना परिवर्तन

अनुवाद करना() सीएसएस समारोह एक तत्व को x- और y- अक्षों के साथ ले जाता है. के साथ मिलकर इसका उपयोग करना परिवर्तन संपत्ति आपको ग्रिड आइटम की स्थिति बदलने की अनुमति देती है.

 .ग्रिड-केंद्र ग्रिड-क्षेत्र: केंद्र; रूपांतर: अनुवाद (-10px, -10px);  .ग्रिड-राइट ग्रिड-एरिया: राइट; परिवर्तन: अनुवाद (10 पीएक्स, -10 पीएक्स);  

3. उपयोग करना पद

का उपयोग करते हुए स्थिति: रिश्तेदार; निर्दिष्ट के साथ शासन करें चोटी, तल, बाएं, तथा सही गुणों का उपयोग ग्रिड वस्तुओं के साथ-साथ घूमने के लिए किया जा सकता है.

 .ग्रिड-केंद्र ग्रिड-क्षेत्र: केंद्र; स्थिति: रिश्तेदार; नीचे: 10 पीएक्स; सही: 10 पीएक्स;  .ग्रिड-राइट ग्रिड-एरिया: राइट; स्थिति: रिश्तेदार; नीचे: 10 पीएक्स; बाएं: 10 पीएक्स;  

ग्रिड आइटम ऑर्डर करें

ग्रिड आइटम स्क्रीन पर प्रदान किए जाते हैं आदेश में वे HTML स्रोत कोड में दिखाई देते हैं.

पिछले अनुभाग में, जब केंद्र आइटम को छोड़ दिया गया था, तो इसे ब्राउज़र द्वारा बाईं वस्तु के शीर्ष पर रखा गया था। ऐसा HTML में होने के कारण हुआ,

बाद में आता है

, इसलिए केंद्र वस्तु है (और अधिक) के बाद प्रदान बायाँ एक.

हालाँकि, हम कर सकते हैं ऑर्डर ग्रिड आइटम बदलें का उपयोग करते हुए z- सूचकांक या क्रम सीएसएस गुण.

का उपयोग करते हुए z-index: 1; नियम, बाईं ग्रिड आइटम एक उच्च स्टैकिंग संदर्भ मिला.

. ग्रिड-बाएं ग्रिड-क्षेत्र: बाएं; z-index: 1;  

जैसा कि CSS ग्रिड लेआउट मॉड्यूल में, HTML में एलिमेंट ऑर्डर को बदलते हैं ग्रिड लेआउट को प्रभावित नहीं करता है, आप भी डाल सकते हैं

से पहले

HTML में। हालाँकि, ऐसा करें, यदि अपडेट किया गया HTML कोड एक्सेसिबिलिटी को नुकसान न पहुंचाए.

आकार ग्रिड आइटम

यदि आप ग्रिड आइटम के लिए ऑटो-आकार की पंक्तियों या स्तंभों का उपयोग करते हैं (उपयोग करके ऑटो, fr, जीआर इकाइयों), यह अपने पड़ोसी आइटम है कि आकार में हो गया है के लिए जगह बनाने के लिए हटना होगा केवल आइटम कहा गया द्वारा आकार नहीं दिया गया था परिवर्तन या एक नकारात्मक मार्जिन.

याद रखें, हमारे नमूना ग्रिड में, सभी तीन कॉलम एक अंश लेते हैं (fr) ग्रिड कंटेनर की। तीन अलग-अलग तरीकों से दो अलग-अलग तरीकों से आकार बदलने के बाद एक नज़र डालें.

1. के साथ आकार दिया चौड़ाई तथा ऊंचाई

यहां, हम बाईं वस्तु के आकार को बदलते हैं का उपयोग करते हुए चौड़ाई तथा ऊंचाई गुण. नतीजतन, यह ग्रिड कंटेनर के अंदर रहता है.

 .ग्रिड-बाएं ग्रिड-क्षेत्र: बाएं; चौड़ाई: 200px; ऊंचाई: 90 पीएक्स;  

2. के साथ आकार दिया परिवर्तन

यहां, हम बाईं वस्तु के आकार को बदलते हैं का उपयोग करते हुए परिवर्तन संपत्ति. नतीजतन, यह कंटेनर को ओवरफ्लो करता है और ग्रिड गैप भी गायब हो जाता है.

 .ग्रिड-बाएं ग्रिड-क्षेत्र: बाएं; रूपांतर: स्केलक्स (1.8);  

मोज़िला सनबर्ड कैलेंडर

एमपी 3 मृत नहीं है

बेहतर प्रदर्शन के लिए अपने फ़ोटोशॉप स्क्रैच डिस्क को स्थानांतरित करें

अगला लेख

मोज़िला ईंट - वेब ऐप्स के लिए मुफ्त UI घटक लाइब्रेरी

पिछला लेख

MoviePass एक बहुत बड़ी डील थी, अब यह सच में मुश्किल हो रही है न कि कोशिश