सीएसएस के ऐनिमेटेड ग्रिड लेआउट

सीएसएस ग्रिड में, 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 को इंटरपोलेट किया जा रहा है

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 की वैल्यू बदलते हैं.

यह नई इंटरऑपरेबल सीरीज़ का हिस्सा है