टेलविंड में nवीं ग्रिड लाइन पर कॉलम को प्रारंभ या समाप्त कैसे करें?

Telavinda Mem Nvim Grida La Ina Para Kolama Ko Prarambha Ya Samapta Kaise Karem



टेलविंड सीएसएस एक ग्रिड प्रणाली प्रदान करता है जो उपयोगकर्ताओं को ग्रिड-कॉल्स और ग्रिड-पंक्तियों उपयोगिताओं का उपयोग करके वेब पेज को कॉलम और पंक्तियों में विभाजित करने में सक्षम बनाता है। यह ग्रिड कॉलम में तत्वों के आकार और स्थान को नियंत्रित करने के लिए ग्रिड कॉलम प्रारंभ और समाप्ति उपयोगिताएँ भी प्रदान करता है। ये उपयोगिताएँ उपयोगकर्ताओं को ग्रिड लेआउट के भीतर किसी तत्व की आरंभिक और समाप्ति स्थिति निर्दिष्ट करने की अनुमति देती हैं।

यह आलेख टेलविंड सीएसएस में विशिष्ट nवीं ग्रिड लाइन पर कॉलम शुरू या समाप्त करने की विधि समझाएगा।







टेलविंड में nवीं ग्रिड लाइन पर कॉलम को प्रारंभ या समाप्त कैसे करें?

टेलविंड में nth ग्रिड लाइन पर कॉलम शुरू या समाप्त करने के लिए, 'का उपयोग करें कॉल-स्टार्ट- ' और ' कोल-एंड- HTML प्रोग्राम में ग्रिड तत्वों के साथ उपयोगिताएँ। “ कॉल-स्टार्ट- 'वर्ग ग्रिड के भीतर एक तत्व की प्रारंभिक स्थिति को निर्दिष्ट कॉलम इंडेक्स एन पर सेट करता है। “ कोल-एंड- ग्रिड के भीतर किसी तत्व की अंतिम स्थिति को निर्दिष्ट कॉलम इंडेक्स n पर सेट करता है। इन उपयोगिताओं का उपयोग 'के साथ किया जा सकता है' कोल-स्पैन- 'उपयोगिताएँ एक निश्चित संख्या में स्तंभों को फैलाने के लिए।



चरण 1: HTML प्रोग्राम में ग्रिड तत्वों की आरंभ और समाप्ति स्थिति निर्दिष्ट करें



एक HTML प्रोग्राम बनाएं और “का उपयोग करें” कॉल-स्टार्ट- ' और ' कोल-एंड- ग्रिड के भीतर वांछित तत्वों की आरंभ और समाप्ति स्थिति निर्धारित करने के लिए उपयोगिताएँ। उदाहरण के लिए, हमने निम्नलिखित ग्रिड कॉलम प्रारंभ और समाप्ति उपयोगिताओं का उपयोग किया है:





< शरीर >

< एच 1 कक्षा = 'टेक्स्ट-2एक्सएल टेक्स्ट-सेंटर' >
टेलविंड सीएसएस - कॉलम प्रारंभ / अंत
एच 1 >

< डिव कक्षा = 'ग्रिड ग्रिड-कोल्स-4 गैप-3 एम-3' >

< डिव कक्षा = 'कॉल-स्टार्ट-2 कॉल-स्पैन-2 बीजी-टील-500 पी-5' > 1 डिव >
< डिव कक्षा = 'कॉल-स्टार्ट-1 कॉल-एंड-3 बीजी-टील-500 पी-5' > 2 डिव >
< डिव कक्षा = 'कॉल-स्टार्ट-3 कॉल-एंड-5 बीजी-टील-500 पी-5' > 3 डिव >
< डिव कक्षा = 'कॉल-स्टार्ट-2 कॉल-स्पैन-3 बीजी-टील-500 पी-5' > 4 डिव >
< डिव कक्षा = 'कॉल-स्टार्ट-1 कॉल-एंड-5 बीजी-टील-500 पी-5' > 5 डिव >

डिव >
शरीर >

यहां, मूल

तत्व में:



  • जाल ' का उपयोग ग्रिड लेआउट बनाने के लिए किया जाता है।
  • ग्रिड-कॉल्स-4 'वर्ग निर्दिष्ट करता है कि ग्रिड में 4 समान आकार के कॉलम होने चाहिए।
  • गैप -3 क्लास प्रत्येक ग्रिड आइटम के बीच 3 इकाइयों का अंतर निर्धारित करता है।
  • एम 3 क्लास ग्रिड कंटेनर के चारों ओर 3 इकाइयों का मार्जिन जोड़ता है।

आंतरिक बच्चे

तत्वों में:

  • कोल-स्टार्ट-2 'संपत्ति निर्दिष्ट करती है कि ग्रिड आइटम कॉलम 2 से शुरू होता है।
  • कोल-स्पैन-2 ” इंगित करता है कि ग्रिड आइटम में 2 कॉलम हैं।
  • कोल-स्टार्ट-1 कॉलम 1 से ग्रिड आइटम शुरू करने के लिए ' का उपयोग किया जाता है।
  • कोल-एंड-3 ” निर्दिष्ट करता है कि ग्रिड आइटम कॉलम 3 पर समाप्त होता है।
  • कोल-स्टार्ट-3 ” इंगित करता है कि ग्रिड आइटम दूसरे कॉलम से शुरू होता है।
  • कोल-एंड-5 'संपत्ति कॉलम 5 पर ग्रिड आइटम को समाप्त करती है।
  • कोल-स्पैन-3 ” निर्दिष्ट करता है कि ग्रिड आइटम 3 कॉलम रखता है।
  • बीजी-टील-500 ” सभी ग्रिड आइटमों की पृष्ठभूमि पर चैती रंग सेट करता है।
  • पी-5 ग्रिड आइटम के अंदर सामग्री में 5 इकाइयों की पैडिंग जोड़ता है।

चरण 2: आउटपुट सत्यापित करें

यह सुनिश्चित करने के लिए कि ग्रिड कॉलम की शुरुआती और अंतिम स्थिति लागू की गई है, HTML वेब पेज देखें:

उपरोक्त आउटपुट इंगित करता है कि ग्रिड कॉलम की शुरुआती और अंतिम स्थिति को उसके अनुसार सफलतापूर्वक लागू किया गया है जिसके अनुसार उन्हें निर्दिष्ट किया गया था।

निष्कर्ष

टेलविंड में कॉलम को nवीं ग्रिड लाइन पर शुरू या समाप्त करने के लिए, ' कॉल-स्टार्ट- ' और ' कोल-एंड- HTML प्रोग्राम में ग्रिड तत्वों के साथ उपयोगिताओं का उपयोग किया जाता है। “ कॉल-स्टार्ट- ' वर्ग किसी तत्व की प्रारंभिक स्थिति निर्धारित करता है जबकि ' कोल-एंड- ग्रिड के भीतर किसी तत्व की अंतिम स्थिति को निर्दिष्ट कॉलम इंडेक्स n पर सेट करता है। इस आलेख में टेलविंड सीएसएस में विशिष्ट nवीं ग्रिड लाइन पर कॉलम शुरू या समाप्त करने की विधि बताई गई है।