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