सीएसएस ग्रिड में, grid-template-columns
और grid-template-rows
प्रॉपर्टी की मदद से लाइन के नाम तय किए जा सकते हैं. साथ ही, ग्रिड कॉलम और पंक्तियों का साइज़ ट्रैक किया जा सकता है. इन प्रॉपर्टी के लिए इंटरपोलेशन की सुविधा काम करने से, ग्रिड लेआउट को ऐनिमेशन या ट्रांज़िशन के बीच स्नैप करने के बजाय, एक खास स्थिति से दूसरे पर आसानी से जाने में मदद मिलती है.
ब्राउज़र सहायता
- 107
- 107
- 66
- 16
सीएसएस में वैल्यू इंटरपोलेशन
सीएसएस में, 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
को इंटरपोलेट किया जा रहा है
Microsoft में योगदान देने वालों की बदौलत Chrome, grid-template-columns
और grid-template-rows
की वैल्यू इंटरपोलेट कर पा रहा है. वर्शन 107 है.
ग्रिड लेआउट, ऐनिमेशन या ट्रांज़िशन के आधे हिस्से में स्नैप करने के बजाय, आसानी से अलग-अलग स्थितियों के बीच स्विच कर सकते हैं.
नीचे दिए गए डेमो में, ग्रिड के नीचे कई अवतार दिख रहे हैं. जगह बचाने के लिए, अवतार को एक-दूसरे के ऊपर रखा जाता है. इसके लिए, 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
की वैल्यू बदलते हैं.
यह नई इंटरऑपरेबल सीरीज़ का हिस्सा है