டெயில்விண்ட் CSS இல், வரிசை இடைவெளியானது ஒரு உறுப்பை கட்டத்திற்குள் இரண்டு அல்லது அதற்கு மேற்பட்ட வரிசைகளை ஆக்கிரமிக்க வைக்கிறது. ஒரு உறுப்பு ஆக்கிரமிக்க வேண்டிய வரிசைகளின் எண்ணிக்கையை வரையறுக்கப் பயன்படுகிறது. பல வரிசைகளில் கட்டம் உருப்படியின் அளவையும் நிலையையும் சரிசெய்து வெவ்வேறு தளவமைப்புகளை உருவாக்க பயனர்களை இது அனுமதிக்கிறது. மேலும், வலைப்பக்கங்களுக்கான நெகிழ்வான மற்றும் பதிலளிக்கக்கூடிய கட்டம் தளவமைப்புகளை உருவாக்க இது பயன்படுத்தப்படலாம்.
டெயில்விண்ட் CSS இல் வரிசைகளை விரிவுபடுத்துவதற்கான முறையை இந்த எழுதுதல் எடுத்துக்காட்டும்.
டெயில்விண்டில் ஒரு வரிசை இடைவெளியை உருவாக்குவது எப்படி?
டெயில்விண்டில் வரிசைகள் விரிவடைய, ஒரு HTML நிரலை உருவாக்கவும். பின்னர், '' பயன்படுத்தவும் row-span-
நடைமுறைச் செயலாக்கத்திற்கு, வழங்கப்பட்ட படிகளைப் பார்க்கவும்:
படி 1: HTML திட்டத்தில் நெடுவரிசை இடைவெளியை உருவாக்கவும்
ஒரு HTML நிரலை உருவாக்கி, '' ஐப் பயன்படுத்தவும் row-span-
< உடல் >
< div வர்க்கம் = 'கட்டம் கட்டம்-வரிசைகள்-4 கிரிட்-ஃப்ளோ-கோல் இடைவெளி-3 மீ-3 உரை-மையம்' >
< div வர்க்கம் = 'row-span-3 bg-teal-500 p-5' > 1 < / div >
< div வர்க்கம் = 'bg-teal-500 p-5' > 2 < / div >
< div வர்க்கம் = 'row-span-2 bg-teal-500 p-5' > 3 < / div >
< div வர்க்கம் = 'bg-teal-500 p-5' > 4 < / div >
< div வர்க்கம் = 'bg-teal-500 p-5' > 5 < / div >
< div வர்க்கம் = 'row-span-4 bg-teal-500 p-5' > 6 < / div >
< / div >
< / உடல் >
இங்கே, பெற்றோர்
- ' கட்டம் 'வகுப்பு ஒரு கட்ட அமைப்பை உருவாக்க பயன்படுத்தப்படுகிறது.
- ' கட்டம்-வரிசை-4 ”வகுப்பு கட்டத்தில் உள்ள வரிசைகளின் எண்ணிக்கையை 4 ஆக அமைக்கிறது.
- ' கட்டம்-ஓட்டம்-கோல் 'வகுப்பு கட்டம் உருப்படிகளை நெடுவரிசைகளில் கிடைமட்டமாக வைக்கிறது.
- ' இடைவெளி-3 ” வகுப்பு ஒவ்வொரு கட்ட உருப்படிக்கும் இடையே 3 அலகுகள் இடைவெளியை அமைக்கிறது.
- ' மீ-3 ” வகுப்பானது கட்டம் கொள்கலனைச் சுற்றி 3 அலகுகளின் விளிம்பைப் பயன்படுத்துகிறது.
- ' உரை மையம் ” வகுப்பு ஒவ்வொரு கட்டம் உருப்படியின் உரையை மையமாக அமைக்கிறது.
குழந்தை
- ' வரிசை-அளவு-3 ” வகுப்பானது, உறுப்பு கட்டத்தின் 3 வரிசைகள் முழுவதும் பரவ வேண்டும் என்று குறிப்பிடுகிறது.
- ' வரிசை-அளவு-2 ” வகுப்பானது, உறுப்பு கட்டத்தின் 2 வரிசைகள் முழுவதும் பரவ வேண்டும் என்பதைக் குறிக்கிறது.
- ' வரிசை இடைவெளி-4 ” வகுப்பானது, உறுப்பு கட்டத்தின் 4 வரிசைகள் முழுவதும் பரவ வேண்டும் என்று குறிப்பிடுகிறது.
- ' bg-teal-500 ” வகுப்பு டீல் நிறத்தை கிரிட் உருப்படியின் பின்னணியில் அமைக்கிறது.
- ' ப-5 ” வகுப்பு குழந்தை உருப்படிகளுக்குள் உள்ள உள்ளடக்கத்தில் 5 அலகுகளின் திணிப்பைச் சேர்க்கிறது.
படி 2: வெளியீட்டைச் சரிபார்க்கவும்
வரிசை இடைவெளி பயன்படுத்தப்பட்டதா இல்லையா என்பதைச் சரிபார்க்க HTML இணையப் பக்கத்தைப் பார்க்கவும்:
மேலே குறிப்பிட்டுள்ள வெளியீட்டில், வரிசை இடைவெளி வெற்றிகரமாகப் பயன்படுத்தப்பட்டதைக் காணலாம்.
முடிவுரை
டெயில்விண்டில் வரிசைகளை விரிக்க, ' row-span-
HTML நிரலில் உள்ள பயன்பாடு மற்றும் ஒவ்வொரு உறுப்புக்கும் விரிவடைய வேண்டிய வரிசைகளின் எண்ணிக்கையைக் குறிப்பிடவும். சரிபார்ப்புக்கு, HTML வலைப்பக்கத்தில் மாற்றங்களைப் பார்க்கவும். இந்த எழுதுதல் டெயில்விண்ட் CSS இல் வரிசைகளை விரிவுபடுத்தும் முறையை எடுத்துக்காட்டுகிறது.