सीएसएस ग्रिड में, grid-template-columns
और grid-template-rows
प्रॉपर्टी की मदद से, लाइन के नाम तय किए जा सकते हैं. साथ ही, ग्रिड कॉलम और लाइनों के साइज़ को ट्रैक किया जा सकता है. इन प्रॉपर्टी के लिए इंटरपोलेशन की सुविधा का इस्तेमाल करने पर, ग्रिड लेआउट किसी ऐनिमेशन या ट्रांज़िशन के आधे हिस्से पर स्नैप करने के बजाय, स्टेटस के बीच आसानी से ट्रांज़िशन कर सकते हैं.
ब्राउज़र के इस्तेमाल से जुड़ी सहायता
सीएसएस में वैल्यू इंटरपोलेशन
सीएसएस में, transition
प्रॉपर्टी का इस्तेमाल करके, प्रॉपर्टी को एक वैल्यू से दूसरी वैल्यू पर आसानी से ट्रांज़िशन किया जा सकता है.
#target {
opacity: 0.5;
transition: opacity ease-in-out 0.25s;
}
#target:hover {
opacity: 1;
}
रेंडरिंग इंजन, टारगेट की गई प्रॉपर्टी की वैल्यू के टाइप का अपने-आप पता लगा लेगा. साथ ही, नई वैल्यू पर आसानी से ट्रांज़िशन करने के लिए, उस जानकारी का इस्तेमाल करेगा.
उदाहरण के लिए:
- क्या
opacity
को0
से1
पर ट्रांसफ़र किया जा रहा है? इसे न्यूमेरिकल इंटरपोलेशन कहते हैं. - क्या
background-color
कोwhite
सेblack
पर ट्रांसफ़र किया जा रहा है? सोर्स और टारगेट रंगों के बीच फ़ेड करें. - क्या आपको
width
को ट्रांसफ़र करना है? संख्या के हिसाब से इंटरपोलेशन करें. साथ ही, ज़रूरत पड़ने पर इकाइयों को बदलें.
यही बात सीएसएस ऐनिमेशन पर भी लागू होती है. यहां ब्राउज़र, कीफ़्रेम के बीच वैल्यू इंटरपोलेशन करेगा.
grid-template-columns
और grid-template-rows
को ऐनिमेट करना
ग्रिड लेआउट, ऐनिमेशन या ट्रांज़िशन के आधे हिस्से पर स्नैप करने के बजाय, एक से दूसरे स्टेटस में आसानी से ट्रांज़िशन कर सकते हैं.
नीचे दिए गए डेमो में, एक ग्रिड में कई अवतार दिखाए गए हैं. जगह बचाने के लिए, अवतारों को एक-दूसरे के ऊपर लगाया जाता है. इसके लिए, grid-template-columns
का इस्तेमाल करके हर कॉलम की चौड़ाई को सीमित किया जाता है. कर्सर घुमाने पर, हर कॉलम को ज़्यादा जगह मिलती है.
.avatars {
display: grid;
gap: 0.35em;
grid-auto-flow: column;
grid-template-columns: repeat(4, 2em);
transition: all ease-in-out 0.25s;
}
.avatars:hover {
grid-template-columns: repeat(4, 4em);
}
transition
प्रॉपर्टी की मदद से, ग्रिड वैल्यू के बीच आसानी से इंटरपोल करता है.
यह असर उन ऐनिमेशन पर भी लागू होता है जो grid-template-columns
या grid-template-rows
वैल्यू बदलते हैं.