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