உள்ளார்ந்த மற்றும் வெளிப்புறச் சொற்களைக் கொண்டு CSS Grid டிராக் அளவிடுதலின் ஆற்றலைத் திறந்திடுங்கள். பலதரப்பட்ட உள்ளடக்கம் மற்றும் திரை அளவுகளுக்கு நெகிழ்வான, பதிலளிக்கக்கூடிய தளவமைப்புகளை உருவாக்குவது எப்படி என்பதை அறியுங்கள்.
CSS Grid டிராக் அளவிடுதல்: உள்ளார்ந்த மற்றும் வெளிப்புறக் கட்டுப்பாட்டில் தேர்ச்சி பெறுதல்
CSS Grid Layout என்பது சிக்கலான மற்றும் பதிலளிக்கக்கூடிய வலைத்தள தளவமைப்புகளை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த கருவியாகும். அதன் முக்கிய பலங்களில் ஒன்று அதன் நெகிழ்வான டிராக் அளவிடுதல் திறன்களில் உள்ளது, இது வரிசைகள் மற்றும் நெடுவரிசைகளின் அளவைத் துல்லியமாகக் கட்டுப்படுத்த உங்களை அனுமதிக்கிறது. மாற்றியமைக்கக்கூடிய மற்றும் பராமரிக்கக்கூடிய தளவமைப்புகளை உருவாக்குவதற்கு வெவ்வேறு டிராக் அளவிடுதல் சொற்களையும் செயல்பாடுகளையும் புரிந்துகொள்வது முக்கியம். இந்தக் கட்டுரை CSS Grid-இல் உள்ள உள்ளார்ந்த மற்றும் வெளிப்புற அளவிடுதலின் மேம்பட்ட கருத்துக்களை ஆராய்கிறது, அவை பல்வேறு உள்ளடக்கம் மற்றும் திரை அளவுகளுக்கு ஏற்ப அழகாக மாற்றியமைக்கும் தளவமைப்புகளை உருவாக்க எப்படி உதவுகின்றன என்பதை ஆராய்கிறது.
Grid டிராக்குகள் மற்றும் அளவிடுதலைப் புரிந்துகொள்ளுதல்
உள்ளார்ந்த மற்றும் வெளிப்புற அளவிடுதலின் பிரத்தியேகங்களுக்குள் செல்வதற்கு முன், CSS Grid டிராக்குகளின் அடிப்படைக் கருத்துக்களை நினைவுபடுத்துவோம்.
Grid டிராக்குகள் என்றால் என்ன?
Grid டிராக்குகள் ஒரு கிரிட் தளவமைப்பின் வரிசைகள் மற்றும் நெடுவரிசைகளாகும். அவை கிரிட் உருப்படிகள் வைக்கப்படும் கட்டமைப்பை வரையறுக்கின்றன. இந்த டிராக்குகளின் அளவு ஒட்டுமொத்த தளவமைப்பையும், உள்ளடக்கம் கிரிட்டிற்குள் எவ்வாறு விநியோகிக்கப்படுகிறது என்பதையும் நேரடியாகப் பாதிக்கிறது.
டிராக் அளவுகளைக் குறிப்பிடுதல்
நீங்கள் grid-template-rows மற்றும் grid-template-columns பண்புகளைப் பயன்படுத்தி டிராக் அளவுகளை வரையறுக்கலாம். இந்தப் பண்புகள் இடைவெளியால் பிரிக்கப்பட்ட மதிப்புகளின் பட்டியலை ஏற்றுக்கொள்கின்றன, இதில் ஒவ்வொரு மதிப்பும் அதனுடன் தொடர்புடைய ஒரு டிராக்கின் அளவைக் குறிக்கிறது. உதாரணமாக:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto auto;
}
இந்தக் குறியீடு மூன்று நெடுவரிசைகள் மற்றும் இரண்டு வரிசைகளைக் கொண்ட ஒரு கிரிட்டை உருவாக்குகிறது. முதல் மற்றும் மூன்றாவது நெடுவரிசைகள் ஒவ்வொன்றும் கிடைக்கும் இடத்தில் 1 பங்கு (fr) எடுத்துக்கொள்கின்றன, அதே நேரத்தில் இரண்டாவது நெடுவரிசை 2 பங்குகளை எடுத்துக்கொள்கிறது. வரிசைகள் அவற்றின் உள்ளடக்கத்தின் அடிப்படையில் தானாகவே அளவிடப்படுகின்றன.
உள்ளார்ந்த மற்றும் வெளிப்புற அளவிடுதல்
மேம்பட்ட கிரிட் டிராக் அளவிடுதலின் முக்கிய அம்சம் உள்ளார்ந்த மற்றும் வெளிப்புற அளவிடுதலுக்கு இடையிலான வேறுபாட்டைப் புரிந்துகொள்வதில் உள்ளது. இந்தக் கருத்துக்கள் ஒரு டிராக்கின் அளவு அதன் உள்ளடக்கம் மற்றும் கிடைக்கும் இடத்தின் அடிப்படையில் எவ்வாறு தீர்மானிக்கப்படுகிறது என்பதை முடிவு செய்கின்றன.
உள்ளார்ந்த அளவிடுதல்: உள்ளடக்கத்தை அடிப்படையாகக் கொண்டது
உள்ளார்ந்த அளவிடுதல் என்பது ஒரு கிரிட் டிராக்கின் அளவு அந்த டிராக்கில் வைக்கப்பட்டுள்ள கிரிட் உருப்படிகளின் உள்ளடக்கத்தால் தீர்மானிக்கப்படுகிறது என்பதாகும். டிராக் உள்ளடக்கத்திற்கு இடமளிக்கும் வகையில் விரிவடையும் அல்லது சுருங்கும், சில வரம்புகளுக்குள். உள்ளார்ந்த அளவிடுதல் சொற்களில் அடங்குபவை:
auto: இது இயல்புநிலை மதிப்பு. டிராக்கின் அளவு, அந்த டிராக்கில் உள்ள கிரிட் உருப்படிகளின் மிகப்பெரிய குறைந்தபட்ச அளவு பங்களிப்பால் தீர்மானிக்கப்படுகிறது. பெரும்பாலான சந்தர்ப்பங்களில், இதன் பொருள், உள்ளடக்கம் வெளியே வழியாமல் பொருந்தும் அளவுக்கு டிராக் பெரியதாக இருக்கும், ஆனால் இது கிரிட் உருப்படிகளில் அமைக்கப்பட்டmin-width/min-heightமதிப்புகளால் பாதிக்கப்படலாம்.min-content: உள்ளடக்கம் வெளியே வழியாமல் இருப்பதற்குத் தேவைப்படும் மிகச்சிறிய இடத்திற்குப் பொருந்தும் வகையில் டிராக் அளவிடப்படுகிறது. உதாரணமாக, வார்த்தைகளை மோசமாக உடைத்தாலும், உரை சாத்தியமான மிகச்சிறிய புள்ளியில் மடிக்கப்படும்.max-content: உள்ளடக்கம் வெளியே வழியாமல் இருப்பதற்குத் தேவைப்படும் மிகப்பெரிய இடத்திற்குப் பொருந்தும் வகையில் டிராக் அளவிடப்படுகிறது. உரைக்கு, இது முடிந்தவரை மடிப்பதைத் தவிர்க்க முயற்சிக்கும், இது மிகவும் அகலமான அல்லது உயரமான டிராக்குகளுக்கு வழிவகுக்கலாம்.fit-content(length): டிராக்max-contentமற்றும் குறிப்பிடப்பட்டlength-இல் சிறிய ஒன்றிற்கு அளவிடப்படுகிறது. இது அதன் உள்ளடக்கத்தின் அடிப்படையில் சுருங்க அனுமதிக்கும் அதே வேளையில் டிராக்கிற்கு ஒரு அதிகபட்ச அளவை அமைக்க உங்களை அனுமதிக்கிறது.
உதாரணம்: min-content மற்றும் max-content உடன் உள்ளார்ந்த அளவிடுதல்
இரண்டு நெடுவரிசைகளைக் கொண்ட ஒரு காட்சியை கருத்தில் கொள்ளுங்கள். முதல் நெடுவரிசை min-content உடனும், இரண்டாவது max-content உடனும் அளவிடப்படுகிறது. முதல் நெடுவரிசையில் உள்ள உள்ளடக்கம் ஒரு நீண்ட வார்த்தையாக இருந்தால், அது குறைந்தபட்ச உள்ளடக்க அளவிற்குள் பொருந்தும்படி எந்தவொரு சாத்தியமான புள்ளியிலும் உடைக்கப்படும். இரண்டாவது நெடுவரிசை, இருப்பினும், மடிக்காமல் உள்ளடக்கத்திற்கு இடமளிக்க விரிவடையும்.
.grid-container {
display: grid;
grid-template-columns: min-content max-content;
grid-gap: 10px;
}
.item1 {
grid-column: 1;
}
.item2 {
grid-column: 2;
}
<div class="grid-container">
<div class="item1">Supercalifragilisticexpialidocious</div>
<div class="item2">Short text</div>
</div>
இந்த எடுத்துக்காட்டில், "Supercalifragilisticexpialidocious" என்ற வார்த்தை முதல் நெடுவரிசையில் பல வரிகளாக உடைக்கப்படும், அதே நேரத்தில் "Short text" இரண்டாவது நெடுவரிசையில் ஒரே வரியில் இருக்கும். இது உள்ளடக்கத்தின் இயல்பான அளவு தேவைகளுக்கு உள்ளார்ந்த அளவிடுதல் எவ்வாறு மாற்றியமைக்கிறது என்பதைக் காட்டுகிறது.
உதாரணம்: fit-content() உடன் உள்ளார்ந்த அளவிடுதல்
`fit-content()` செயல்பாடு, ஒரு டிராக் உள்ளடக்கத்திற்கு ஏற்ற அளவில் இருக்க வேண்டும், ஆனால் ஒரு அதிகபட்ச அளவு வரம்பையும் கொண்டிருக்க வேண்டும் என்று நீங்கள் விரும்பும்போது பயனுள்ளதாக இருக்கும். இது நெடுவரிசைகள் அல்லது வரிசைகள் மிகவும் பெரியதாக மாறுவதைத் தடுக்கப் பயன்படுகிறது, அதே நேரத்தில் உள்ளடக்கம் சிறியதாக இருந்தால் அவை சுருங்கவும் அனுமதிக்கிறது.
.grid-container {
display: grid;
grid-template-columns: fit-content(200px) 1fr;
grid-gap: 10px;
}
இந்த எடுத்துக்காட்டில், முதல் நெடுவரிசை அதன் உள்ளடக்கத்திற்கு ஏற்றவாறு விரிவடையும், ஆனால் 200px அகலத்திற்கு மேல் செல்லாது. இரண்டாவது நெடுவரிசை மீதமுள்ள இடத்தை எடுத்துக்கொள்ளும். ஒரு நெடுவரிசை நெகிழ்வாக இருக்க வேண்டும், ஆனால் அதிக இடத்தை எடுத்துக்கொள்ளக் கூடாது என்று நீங்கள் விரும்பும் தளவமைப்புகளை உருவாக்க இது பயனுள்ளதாக இருக்கும்.
வெளிப்புற அளவிடுதல்: இடத்தை அடிப்படையாகக் கொண்டது
மறுபுறம், வெளிப்புற அளவிடுதல் என்பது ஒரு கிரிட் டிராக்கின் அளவு உள்ளடக்கத்திற்கு வெளியே உள்ள காரணிகளால் தீர்மானிக்கப்படுகிறது, அதாவது கிரிட் கொள்கலனில் கிடைக்கும் இடம் அல்லது ஒரு நிலையான அளவு மதிப்பு. வெளிப்புற அளவிடுதல் சொற்களில் அடங்குபவை:
length: ஒரு நிலையான நீள மதிப்பு (எ.கா.,100px,2em,50vh). உள்ளடக்கத்தைப் பொருட்படுத்தாமல், டிராக் இந்த அளவில் துல்லியமாக இருக்கும்.percentage: கிரிட் கொள்கலனின் அளவில் ஒரு சதவீதம் (எ.கா.,50%). டிராக் கிடைக்கும் இடத்தில் இந்த சதவீதத்தை எடுத்துக்கொள்ளும்.fr(பின்ன அலகு): மற்ற அனைத்து டிராக்குகளும் அளவிடப்பட்ட பிறகு கிரிட் கொள்கலனில் கிடைக்கும் இடத்தின் ஒரு பின்னத்தைக் குறிக்கிறது. டிராக்குகளுக்கு இடையில் இடத்தை விநியோகிக்க இது மிகவும் நெகிழ்வான வழியாகும்.
உதாரணம்: fr அலகுகளுடன் வெளிப்புற அளவிடுதல்
வெவ்வேறு திரை அளவுகளுக்கு மாற்றியமைக்கும் பதிலளிக்கக்கூடிய தளவமைப்புகளை உருவாக்குவதற்கு fr அலகு விலைமதிப்பற்றது. டிராக்குகளுக்கு பின்ன அலகுகளை ஒதுக்குவதன் மூலம், அவை கிடைக்கும் இடத்தை விகிதாசாரமாகப் பகிர்ந்து கொள்வதை நீங்கள் உறுதி செய்கிறீர்கள்.
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 10px;
}
இந்த எடுத்துக்காட்டில், கிரிட் கொள்கலனில் இரண்டு நெடுவரிசைகள் உள்ளன. முதல் நெடுவரிசை கிடைக்கும் இடத்தில் 1 பங்கை எடுத்துக்கொள்கிறது, இரண்டாவது நெடுவரிசை 2 பங்குகளை எடுத்துக்கொள்கிறது. கிரிட் கொள்கலன் 600px அகலமாக இருந்தால், முதல் நெடுவரிசை 200px அகலமாகவும், இரண்டாவது நெடுவரிசை 400px அகலமாகவும் இருக்கும் (எந்தவொரு கிரிட் இடைவெளியையும் கழித்து). இது திரை அளவைப் பொருட்படுத்தாமல், நெடுவரிசைகள் எப்போதும் தங்கள் விகிதாசார உறவைப் பராமரிப்பதை உறுதி செய்கிறது.
உதாரணம்: சதவீதங்கள் மற்றும் நிலையான நீளங்களுடன் வெளிப்புற அளவிடுதல்
.grid-container {
display: grid;
grid-template-columns: 200px 50% 1fr;
grid-gap: 10px;
}
இந்த எடுத்துக்காட்டில், முதல் நெடுவரிசை `200px` என்ற நிலையான அகலத்திற்கு அமைக்கப்பட்டுள்ளது. இரண்டாவது நெடுவரிசை கிரிட் கொள்கலனின் அகலத்தில் 50% எடுத்துக்கொள்ளும். இறுதியாக, மூன்றாவது நெடுவரிசை `1fr` அலகைப் பயன்படுத்துகிறது, எனவே முதல் இரண்டு நெடுவரிசைகள் அளவிடப்பட்ட பிறகு மீதமுள்ள எந்த இடத்தையும் அது எடுத்துக்கொள்ளும்.
உள்ளார்ந்த மற்றும் வெளிப்புற அளவிடுதலை இணைத்தல்: minmax()
minmax() செயல்பாடு உள்ளார்ந்த மற்றும் வெளிப்புற அளவிடுதலை இணைக்க உங்களை அனுமதிக்கிறது, இது டிராக் அளவுகளில் இன்னும் ಹೆಚ್ಚಿನ கட்டுப்பாட்டை வழங்குகிறது. இது ஒரு டிராக்கிற்கு ஏற்றுக்கொள்ளக்கூடிய அளவுகளின் வரம்பை வரையறுக்கிறது, குறைந்தபட்ச மற்றும் அதிகபட்ச மதிப்புகளைக் குறிப்பிடுகிறது.
minmax(min, max)
min: டிராக்கின் குறைந்தபட்ச அளவு. இது எந்தவொரு செல்லுபடியாகும் டிராக் அளவிடுதல் மதிப்பாகவும் இருக்கலாம், இதில் உள்ளார்ந்த சொற்கள் (auto,min-content,max-content) அல்லது வெளிப்புற மதிப்புகள் (length,percentage,fr) அடங்கும்.max: டிராக்கின் அதிகபட்ச அளவு. இதுவும் எந்தவொரு செல்லுபடியாகும் டிராக் அளவிடுதல் மதிப்பாகவும் இருக்கலாம். `max` ஆனது `min`-ஐ விட சிறியதாக இருந்தால், `max` புறக்கணிக்கப்பட்டு, `min` பயன்படுத்தப்படும்.
உதாரணம்: பதிலளிக்கக்கூடிய நெடுவரிசைகளுக்கு minmax() பயன்படுத்துதல்
minmax()-இன் ஒரு பொதுவான பயன்பாடு, குறைந்தபட்ச அகலத்தைக் கொண்ட ஆனால் கிடைக்கும் இடத்தை நிரப்ப விரிவாக்கக்கூடிய பதிலளிக்கக்கூடிய நெடுவரிசைகளை உருவாக்குவதாகும்.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
இங்கே, repeat(auto-fit, minmax(200px, 1fr)) குறைந்தது 200px அகலமுள்ள ஆனால் மீதமுள்ள இடத்தை நிரப்ப விரிவாக்கக்கூடிய பல நெடுவரிசைகளை உருவாக்குகிறது. auto-fit என்ற சொல் காலியான நெடுவரிசைகள் சுருங்குவதை உறுதி செய்கிறது, இது ஒரு நெகிழ்வான மற்றும் பதிலளிக்கக்கூடிய தளவமைப்பை உருவாக்குகிறது.
உதாரணம்: minmax()-ஐ உள்ளார்ந்த அளவிடுதலுடன் இணைத்தல்
.grid-container {
display: grid;
grid-template-columns: minmax(min-content, 300px) 1fr;
grid-gap: 10px;
}
இந்த எடுத்துக்காட்டில், முதல் நெடுவரிசை அதன் குறைந்தபட்ச உள்ளடக்க அளவிற்கு சமமான அகலத்திலாவது இருக்கும், ஆனால் `300px`-ஐ தாண்டாது. இரண்டாவது நெடுவரிசை மீதமுள்ள இடத்தை எடுத்துக்கொள்ளும்.
நடைமுறைப் பயன்பாடுகள் மற்றும் சிறந்த நடைமுறைகள்
உள்ளார்ந்த மற்றும் வெளிப்புற அளவிடுதலைப் புரிந்துகொள்வது வலுவான மற்றும் மாற்றியமைக்கக்கூடிய தளவமைப்புகளை உருவாக்குவதற்கு முக்கியமானது. மனதில் கொள்ள வேண்டிய சில நடைமுறைப் பயன்பாடுகள் மற்றும் சிறந்த நடைமுறைகள் இங்கே:
- பதிலளிக்கக்கூடிய வழிசெலுத்தல்: வழிசெலுத்தல் பட்டியில் கிடைக்கும் இடத்தை நிரப்ப விரிவாக்கக்கூடிய ஆனால் குறைந்தபட்ச அகலத்தைக் கொண்ட வழிசெலுத்தல் உருப்படிகளை உருவாக்க
minmax()-ஐப் பயன்படுத்தவும். - நெகிழ்வான கார்டு தளவமைப்புகள்: வெவ்வேறு திரை அளவுகளுக்குத் தானாகவே சரிசெய்யும் கார்டு தளவமைப்புகளை உருவாக்க
repeat(auto-fit, minmax())-ஐப் பயன்படுத்தவும், இது சிறிய திரைகளில் கார்டுகள் அழகாக மடிவதை உறுதி செய்கிறது. - உள்ளடக்கம் அறிந்த பக்கப்பட்டிகள்: பக்கப்பட்டிகளை அவற்றின் உள்ளடக்கத்தின் அடிப்படையில் அளவிட
min-contentஅல்லதுmax-content-ஐப் பயன்படுத்தவும், இது தேவைக்கேற்ப விரிவாக்க அல்லது சுருங்க அனுமதிக்கிறது. - நிலையான அகலங்களைத் தவிர்க்கவும்: வெவ்வேறு திரை அளவுகள் மற்றும் பயனர் விருப்பங்களுக்கு மாற்றியமைக்கும் தளவமைப்புகளை உருவாக்க, நிலையான அகலங்களின் (
px) பயன்பாட்டைக் குறைத்து, சார்பு அலகுகளுக்கு (%,fr,em) ஆதரவளிக்கவும். - முழுமையாகச் சோதிக்கவும்: உங்கள் கிரிட் தளவமைப்புகள் சரியாக வழங்கப்படுவதையும், ஒரு சீரான பயனர் அனுபவத்தை வழங்குவதையும் உறுதிப்படுத்த, பல்வேறு சாதனங்கள் மற்றும் திரை அளவுகளில் எப்போதும் அவற்றைச் சோதிக்கவும்.
மேம்பட்ட கிரிட் அளவிடுதல் நுட்பங்கள்
அடிப்படை சொற்கள் மற்றும் செயல்பாடுகளுக்கு அப்பால், CSS Grid டிராக் அளவுகளை நேர்த்தியாக சரிசெய்ய மேலும் மேம்பட்ட நுட்பங்களை வழங்குகிறது.
repeat() செயல்பாடு
repeat() செயல்பாடு ஒரே அளவுடன் பல டிராக்குகளை உருவாக்குவதை எளிதாக்குகிறது. இது இரண்டு வாதங்களை எடுக்கிறது: மறுசெயல்களின் எண்ணிக்கை மற்றும் டிராக் அளவு.
repeat(number, track-size)
உதாரணமாக:
grid-template-columns: repeat(3, 1fr);
இது இதற்கு சமமானது:
grid-template-columns: 1fr 1fr 1fr;
repeat() செயல்பாட்டை auto-fit மற்றும் auto-fill சொற்களுடன் பயன்படுத்தலாம், இது கிடைக்கும் இடத்திற்கு தானாகவே சரிசெய்யும் பதிலளிக்கக்கூடிய கிரிட் தளவமைப்புகளை உருவாக்க உதவுகிறது.
auto-fit மற்றும் auto-fill சொற்கள்
இந்தச் சொற்கள் repeat() செயல்பாட்டுடன் பயன்படுத்தப்பட்டு, கிரிட்டில் உள்ள உருப்படிகளின் எண்ணிக்கைக்கும் கிடைக்கும் இடத்திற்கும் ஏற்ப மாற்றியமைக்கும் பதிலளிக்கக்கூடிய கிரிட்களை உருவாக்குகின்றன. அவற்றுக்கு இடையேயான முக்கிய வேறுபாடு, அவை காலியான டிராக்குகளை எவ்வாறு கையாளுகின்றன என்பதில் உள்ளது.
auto-fit: அனைத்து டிராக்குகளும் காலியாக இருந்தால், டிராக்குகள் 0 அகலத்திற்கு சுருங்கிவிடும்.auto-fill: அனைத்து டிராக்குகளும் காலியாக இருந்தால், டிராக்குகள் அவற்றின் அளவைத் தக்க வைத்துக் கொள்ளும்.
உதாரணம்: பதிலளிக்கக்கூடிய நெடுவரிசைகளுக்கு auto-fit பயன்படுத்துதல்
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
இந்த எடுத்துக்காட்டில், கிரிட் குறைந்தது 200px அகலமுள்ள ஆனால் மீதமுள்ள இடத்தை நிரப்ப விரிவாக்கக்கூடிய பல நெடுவரிசைகளை உருவாக்கும். அனைத்து நெடுவரிசைகளையும் நிரப்ப போதுமான உருப்படிகள் இல்லை என்றால், காலியான நெடுவரிசைகள் 0 அகலத்திற்கு சுருங்கிவிடும்.
சர்வதேசமயமாக்கல் (i18n) மற்றும் உள்ளூர்மயமாக்கல் (l10n) க்கான பரிசீலனைகள்
உலகளாவிய பார்வையாளர்களுக்காக தளவமைப்புகளை வடிவமைக்கும்போது, வெவ்வேறு மொழிகள் மற்றும் எழுதும் திசைகளின் தாக்கத்தை கருத்தில் கொள்வது அவசியம். மொழிகளுக்கு இடையில் உரையின் நீளம் கணிசமாக மாறுபடலாம், இது டிராக் அளவுகள் சரியாக உள்ளமைக்கப்படவில்லை என்றால் தளவமைப்பைப் பாதிக்கலாம். சர்வதேசமயமாக்கப்பட்ட தளவமைப்புகளை வடிவமைப்பதற்கான சில குறிப்புகள் இங்கே:
- சார்பு அலகுகளைப் பயன்படுத்தவும்: பயனரின் எழுத்துரு அளவு விருப்பங்களுக்கு ஏற்ப உரையை அளவிட அனுமதிக்க, பிக்சல்கள் போன்ற நிலையான அலகுகளுக்குப் பதிலாக
em,rem, மற்றும் சதவீதங்கள் போன்ற சார்பு அலகுகளுக்கு முன்னுரிமை அளியுங்கள். - உள்ளார்ந்த அளவிடுதல்: மொழியைப் பொருட்படுத்தாமல், டிராக்குகள் உள்ளடக்கத்தின் அளவிற்கு ஏற்ப மாற்றியமைப்பதை உறுதிசெய்ய,
min-content,max-content, மற்றும்fit-content()போன்ற உள்ளார்ந்த அளவிடுதல் சொற்களைப் பயன்படுத்தவும். - தருக்கப் பண்புகள்: இடமிருந்து வலம் (LTR) மற்றும் வலமிருந்து இடம் (RTL) ஆகிய இரண்டு மொழிகளையும் ஆதரிக்க,
leftமற்றும்rightபோன்ற இயற்பியல் பண்புகளுக்குப் பதிலாகinline-startமற்றும்inline-endபோன்ற தருக்கப் பண்புகளைப் பயன்படுத்தவும். - சோதனை: சாத்தியமான சிக்கல்களைக் கண்டறிந்து சரிசெய்ய, உங்கள் தளவமைப்புகளை வெவ்வேறு மொழிகள் மற்றும் எழுதும் திசைகளுடன் சோதிக்கவும். வெவ்வேறு மொழிகளில் காணக்கூடிய நீண்ட சரங்களை உருவகப்படுத்துங்கள்.
முடிவுரை
CSS Grid டிராக் அளவிடுதல் என்பது பதிலளிக்கக்கூடிய மற்றும் மாற்றியமைக்கக்கூடிய வலைத்தள தளவமைப்புகளை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த மற்றும் பல்துறை கருவியாகும். உள்ளார்ந்த மற்றும் வெளிப்புற அளவிடுதலின் கருத்துக்களில் தேர்ச்சி பெறுவதன் மூலமும், minmax() செயல்பாட்டைப் புரிந்துகொள்வதன் மூலமும், repeat() செயல்பாட்டைப் பயன்படுத்துவதன் மூலமும், பல்வேறு உள்ளடக்கம் மற்றும் திரை அளவுகளுக்கு அழகாக மாற்றியமைக்கும் தளவமைப்புகளை நீங்கள் உருவாக்கலாம். உலகளாவிய பார்வையாளர்களுக்காக வடிவமைக்கும்போது சர்வதேசமயமாக்கல் மற்றும் உள்ளூர்மயமாக்கலின் தாக்கத்தை கருத்தில் கொள்ள நினைவில் கொள்ளுங்கள்.
வெவ்வேறு டிராக் அளவிடுதல் நுட்பங்களுடன் பரிசோதனை செய்து, CSS Grid-இன் முடிவற்ற சாத்தியக்கூறுகளை ஆராயுங்கள். பயிற்சி மற்றும் இந்தக் கருத்துக்களைப் பற்றிய திடமான புரிதலுடன், எந்தவொரு திட்டத்திற்கும் அதிநவீன மற்றும் பயனர் நட்பு வலைத்தள தளவமைப்புகளை உருவாக்க நீங்கள் நன்கு தயாராக இருப்பீர்கள்.