मुझे इस तथ्य पर प्रकाश डालने में प्रसन्नता हो रही है कि CSS grid-template-rows और grid-template-columns गुण हैं अब सभी प्रमुख वेब ब्राउज़रों में एनिमेटेबल है! खैर, सीएसएस ग्रिड ने तकनीकी रूप से लंबे समय तक एनिमेशन का समर्थन किया है, जैसा कि यह है सीधे CSS ग्रिड लेआउट मॉड्यूल स्तर 1 कल्पना में बनाया गया.

लेकिन इन ग्रिड गुणों को एनिमेट करना केवल हाल ही में सभी तीन प्रमुख ब्राउज़रों द्वारा समर्थित है। क्या हम रचनात्मक रस प्रवाहित करने के लिए कुछ उदाहरण देखें?

उदाहरण 1: साइडबार को बड़ा करना

सबसे पहले, हम इसके बारे में बात कर रहे हैं:

एक साधारण दो-स्तंभ ग्रिड। अब, पहले, आप कर सकते हैं नहीं CSS ग्रिड का उपयोग करके इसे बनाया है क्योंकि एनिमेशन और ट्रांज़िशन समर्थित नहीं थे, लेकिन क्या होगा यदि आप होवर पर विस्तार करने के लिए बायां कॉलम — शायद एक साइडबार नेविगेशन — चाहते हैं? अच्छा, अब यह संभव है।

मैं जानता हूं तुम क्या सोच्र रहे हो: "एक सीएसएस संपत्ति को एनिमेट करना? आसान पेसी, मैं इसे सालों से कर रहा हूं! मैं भी। हालाँकि, मैं एक विशेष उपयोग के मामले के साथ प्रयोग करते समय एक दिलचस्प रोड़ा में भाग गया।

इसलिए, हम स्वयं ग्रिड को परिवर्तित करना चाहते हैं (विशेष रूप से grid-template-columns, जो पर सेट है .grid उदाहरण में वर्ग)। लेकिन बायां स्तंभ (.left) वह चयनकर्ता है जिसकी आवश्यकता है :hover छद्म वर्ग। जबकि जावास्क्रिप्ट इस पहेली को आसानी से हल कर सकता है - धन्यवाद, लेकिन नहीं धन्यवाद - हम इसे अकेले CSS के साथ पूरा कर सकते हैं।

आइए HTML से शुरू करते हुए पूरी बात पर चलते हैं। सुंदर मानक सामान वास्तव में ... दो कॉलम वाला एक ग्रिड।

<div class="grid"> <div class="left"></div> <div class="right"></div>
</div>

कॉस्मेटिक CSS को एक तरफ रखते हुए, आपको सबसे पहले सेट करना होगा display: grid मूल कंटेनर पर (.grid).

.grid { display: grid;
}

अगला, हम उपयोग करके दो स्तंभों को परिभाषित और आकार दे सकते हैं grid-template-columns संपत्ति। हम बाएँ स्तंभ को अत्यंत संकीर्ण बना देंगे, और बाद में होवर करने पर उसकी चौड़ाई बढ़ाएँगे। दायाँ स्तंभ शेष शेष स्थान को घेर लेता है, इसके लिए धन्यवाद auto कीवर्ड।

.grid { display: grid; grid-template-columns: 48px auto;
}

हम जानते हैं कि हम इस चीज़ को एनिमेट करने जा रहे हैं, तो चलिए आगे बढ़ते हैं और एक फेंकते हैं transition जबकि हम इसमें हैं, इसलिए राज्यों के बीच परिवर्तन सुचारू और ध्यान देने योग्य है।

.grid { display: grid; grid-template-columns: 48px auto; transition: 300ms; /* Change as needed */
}

यह इसके लिए है .grid! होवर स्थिति को लागू करना बाकी है। विशेष रूप से, हम इसे ओवरराइड करने जा रहे हैं grid-template-columns संपत्ति ताकि बायां स्तंभ हॉवर पर अधिक मात्रा में जगह ले।

यह अकेला इतना दिलचस्प नहीं है, हालांकि यह आश्चर्यजनक है कि एनिमेशन और संक्रमण अब CSS ग्रिड में समर्थित हैं। क्या अधिक दिलचस्प है कि हम अपेक्षाकृत नए का उपयोग कर सकते हैं :has() छद्म वर्ग पैरेंट कंटेनर को स्टाइल करने के लिए (.grid) जबकि बच्चा (.left) मँडरा रहा है।

.grid:has(.left:hover) { /* Hover styles */
}

सादे अंग्रेजी में यह कह रहा है, "के लिए कुछ करो .grid कंटेनर अगर इसमें नाम का तत्व है .left इसके अंदर जो होवर अवस्था में है। इसीलिए :has() अक्सर "मूल" चयनकर्ता के रूप में जाना जाता है। हम अंत में इसमें शामिल बच्चों के आधार पर माता-पिता का चयन कर सकते हैं - कोई जावास्क्रिप्ट आवश्यक नहीं है!

तो, चलिए इसकी चौड़ाई बढ़ाते हैं .left करने के लिए स्तंभ 30% जब इसे मँडराया जाता है। .right कॉलम सभी बचे हुए स्थान को लेता रहेगा:

.grid { display: grid; transition: 300ms; grid-template-columns: 48px auto;
} .grid:has(.left:hover) { grid-template-columns: 30% auto;
}

हम CSS वेरिएबल्स का भी उपयोग कर सकते हैं, जो आपकी व्यक्तिगत प्राथमिकताओं के आधार पर साफ दिख सकते हैं या नहीं भी लग सकते हैं (या हो सकता है कि आप वैसे भी अपने प्रोजेक्ट में CSS वेरिएबल्स का उपयोग कर रहे हों):

.grid { display: grid; transition: 300ms; grid-template-columns: var(--left, 48px) auto;
} .grid:has(.left:hover) { --left: 30%;
}

I मोहब्बत वह सीएसएस ग्रिड अब एनिमेटेड हो सकता है, लेकिन तथ्य यह है कि हम इस विशेष उदाहरण को सीएसएस की केवल नौ पंक्तियों के साथ बना सकते हैं और भी आश्चर्यजनक है।

यहाँ द्वारा एक और उदाहरण दिया गया है ओलिविया एनजी - समान अवधारणा, लेकिन सामग्री के साथ (नौसेना आइकन पर क्लिक करें):

उदाहरण 2: पैनलों का विस्तार करना

यह उदाहरण ग्रिड कंटेनर (स्तंभ की चौड़ाई) को परिवर्तित करता है, लेकिन अलग-अलग स्तंभों (उनकी पृष्ठभूमि के रंग) को भी। होवर पर अधिक सामग्री प्रदान करने के लिए यह आदर्श है।

यह याद रखने योग्य है कि द repeat() फ़ंक्शन कभी-कभी बग्गी संक्रमण उत्पन्न करता है, यही कारण है कि मैं प्रत्येक कॉलम की चौड़ाई अलग-अलग सेट करता हूं (यानी grid-template-columns: 1fr 1fr 1fr).

उदाहरण 3: पंक्तियाँ और कॉलम जोड़ना

यह उदाहरण एनिमेटेड रूप से ग्रिड में एक कॉलम "जोड़ता है"। हालाँकि - आपने यह अनुमान लगाया - इस परिदृश्य में एक गड्ढा भी है। आवश्यकता यह है कि "नया" कॉलम छुपाया नहीं जाना चाहिए (यानी सेट करें display: none), और सीएसएस ग्रिड को इसकी चौड़ाई निर्धारित करते समय इसके अस्तित्व को स्वीकार करना चाहिए 0fr.

तो, तीन-स्तंभ ग्रिड के लिए - grid-template-columns: 1fr 1fr 0fr (हाँ, इकाई को मूल्य के बावजूद घोषित किया जाना चाहिए 0!) में संक्रमण grid-template-columns: 1fr 1fr 1fr सही ढंग से, लेकिन grid-template-columns: 1fr 1fr नहीं। अंत में, यह वास्तव में सही समझ में आता है कि हम किस बारे में जानते हैं संक्रमण कैसे काम करते हैं.

यहाँ द्वारा एक और उदाहरण दिया गया है मिशेल बार्कर - एक ही अवधारणा, लेकिन एक अतिरिक्त कॉलम के साथ और बहुत अधिक पिज्जा। इसे फ़ुल-स्क्रीन मोड में चलाना सुनिश्चित करें क्योंकि यह वास्तव में उत्तरदायी है (कोई चालबाज़ी नहीं, बस अच्छी डिज़ाइन!)।

कुछ और उदाहरण

क्योंकि क्यों नहीं?

यह "एनिमेटेड मोंड्रियन" द्वारा एनिमेटेड सीएसएस ग्रिड के लिए अवधारणा का मूल प्रमाण है क्रोम देवरेल। grid-row'रेत grid-columnका उपयोग करते हैं span कीवर्ड आपके द्वारा देखे जाने वाले लेआउट को बनाने के लिए, और फिर grid-template-row'रेत grid-template-columnके एक CSS एनीमेशन का उपयोग करके एनिमेटेड हैं। यह जितना जटिल दिखता है उतना कहीं नहीं है!

वही अवधारणा, लेकिन उस मिशेल बार्कर पिज्जाज़ के साथ। क्या एक अच्छा लोडिंग स्पिनर बना सकता है?

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

• एसईओ संचालित सामग्री और पीआर वितरण। आज ही प्रवर्धित हो जाओ।
• प्लेटोब्लॉकचैन। Web3 मेटावर्स इंटेलिजेंस। ज्ञान प्रवर्धित। यहां पहुंचें।
• स्रोत: https://css-tricks.com/animating-css-grid-how-to-examples/