CSS கிரிட் உள்ளார்ந்த தடங்கள்: தானியங்கி தளவமைப்பு உருவாக்கத்தில் தேர்ச்சி பெறுதல்

CSS கிரிட் ஒரு சக்திவாய்ந்த தளவமைப்பு கருவியாகும், இது வலைப்பக்க கட்டமைப்பின் மீது டெவலப்பர்களுக்கு நம்பமுடியாத நெகிழ்வுத்தன்மையையும் கட்டுப்பாட்டையும் வழங்குகிறது. வெளிப்படையான தடங்கள் (`grid-template-rows` மற்றும் `grid-template-columns` ஐப் பயன்படுத்தி வரையறுக்கப்படுபவை) அடிப்படையானவை என்றாலும், உள்ளார்ந்த தடங்களைப் புரிந்துகொள்வதும் பயன்படுத்துவதும் கிரிட்டின் முழு திறனையும் தானியங்கி தளவமைப்பு உருவாக்கம் மற்றும் பதிலளிக்கக்கூடிய வடிவமைப்பிற்காக திறப்பதற்கான திறவுகோலாகும்.

CSS கிரிட் உள்ளார்ந்த தடங்கள் என்றால் என்ன?

வெளிப்படையாக வரையறுக்கப்பட்ட கிரிட்டிற்கு வெளியே கிரிட் உருப்படிகள் வைக்கப்படும்போது, கிரிட் கொள்கலனால் உள்ளார்ந்த தடங்கள் தானாகவே உருவாக்கப்படுகின்றன. இது நிகழும்போது:

• நீங்கள் வெளிப்படையாக வரையறுக்கப்பட்ட தடங்களை விட அதிகமான உருப்படிகளை கிரிட்டில் வைக்கும்போது.
• வெளிப்படையான கிரிட்டிற்கு வெளியே ஒரு உருப்படியை நிலைநிறுத்த `grid-row-start`, `grid-row-end`, `grid-column-start`, அல்லது `grid-column-end` ஐப் பயன்படுத்தும்போது.

சாராம்சத்தில், இந்த எல்லைக்கு அப்பாற்பட்ட உருப்படிகளுக்கு இடமளிக்க, கிரிட் கூடுதல் வரிசைகள் மற்றும்/அல்லது நெடுவரிசைகளை உருவாக்குகிறது, அவை இன்னும் தளவமைப்பின் ஒரு பகுதியாக இருப்பதை உறுதி செய்கிறது. இந்த தானியங்கி உருவாக்கம் தான் உள்ளார்ந்த தடங்களை மிகவும் மதிப்புமிக்கதாக ஆக்குகிறது.

வித்தியாசத்தைப் புரிந்துகொள்வது: வெளிப்படையான மற்றும் உள்ளார்ந்த தடங்கள்

முக்கிய வேறுபாடு தடங்கள் எவ்வாறு வரையறுக்கப்படுகின்றன என்பதில் உள்ளது:

• வெளிப்படையான தடங்கள்: `grid-template-rows` மற்றும் `grid-template-columns` ஐப் பயன்படுத்தி நேரடியாக வரையறுக்கப்படுகின்றன. இவை உங்கள் தளவமைப்பிற்கான முன் வரையறுக்கப்பட்ட கட்டமைப்பை வழங்குகின்றன.
• உள்ளார்ந்த தடங்கள்: வெளிப்படையான கிரிட்டிற்கு வெளியே வைக்கப்பட்டுள்ள உருப்படிகளுக்கு இடமளிக்க தானாகவே உருவாக்கப்படுகின்றன. அவற்றின் அளவு மற்றும் நடத்தை `grid-auto-rows`, `grid-auto-columns`, மற்றும் `grid-auto-flow` மூலம் கட்டுப்படுத்தப்படுகின்றன.

வெளிப்படையான தடங்களை ஒரு கட்டிடக் கலைஞரின் வரைபடமாகவும், உள்ளார்ந்த தடங்களை எல்லாவற்றையும் வசதியாகப் பொருத்துவதற்காக கட்டுமானத்தின் போது செய்யப்படும் சரிசெய்தல்களாகவும் நினைத்துப் பாருங்கள். நன்கு வடிவமைக்கப்பட்ட மற்றும் செயல்பாட்டு கிரிட் தளவமைப்பிற்கு இரண்டும் முக்கியமானவை.

`grid-auto-rows` மற்றும் `grid-auto-columns` மூலம் உள்ளார்ந்த தட அளவைக் கட்டுப்படுத்துதல்

இயல்பாக, உள்ளார்ந்த தடங்கள் `auto` உயரம் அல்லது அகலத்தைக் கொண்டிருக்கும். இது பெரும்பாலும் எதிர்பாராத அல்லது சீரற்ற தட அளவுகளுக்கு வழிவகுக்கிறது, குறிப்பாக மாறுபட்ட உயரங்கள் அல்லது அகலங்களைக் கொண்ட உள்ளடக்கத்துடன் கையாளும்போது. அங்குதான் `grid-auto-rows` மற்றும் `grid-auto-columns` வருகின்றன.

இந்த பண்புகள் உள்ளார்ந்தமாக உருவாக்கப்பட்ட தடங்களுக்கான அளவைக் குறிப்பிட உங்களை அனுமதிக்கின்றன. நீங்கள் எந்தவொரு செல்லுபடியாகும் CSS அலகையும் (பிக்சல்கள், சதவீதங்கள், `fr` அலகுகள், `min-content`, `max-content`, `auto`, முதலியன) பயன்படுத்தலாம்.

எடுத்துக்காட்டு: சீரான வரிசை உயரத்தை அமைத்தல்

            
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three equal-width columns */
  grid-auto-rows: 150px; /* All implicit rows will be 150px tall */
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், உள்ளார்ந்தமாக உருவாக்கப்பட்ட எந்த வரிசைகளும் தானாகவே 150 பிக்சல்கள் உயரத்தைக் கொண்டிருக்கும். இது அந்த செல்களுக்குள் உள்ள உள்ளடக்கத்தைப் பொருட்படுத்தாமல், ஒரு சீரான செங்குத்து தாளத்தை உறுதி செய்கிறது.

எடுத்துக்காட்டு: நெகிழ்வான வரிசை உயரங்களுக்கு `minmax()` ஐப் பயன்படுத்துதல்

            
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(150px, auto); /* Minimum height of 150px, but can grow to fit content */
}

            

              
                Copy
              
            
          

இங்கே, குறைந்தபட்சம் 150px உயரத்தை வரையறுக்க `minmax()` செயல்பாட்டைப் பயன்படுத்துகிறோம், ஆனால் உள்ளடக்கம் தேவைப்பட்டால் வரிசை உயரமாக வளர அனுமதிக்கிறோம். இது நிலைத்தன்மைக்கும் நெகிழ்வுத்தன்மைக்கும் இடையில் ஒரு நல்ல சமநிலையை வழங்குகிறது.

`grid-auto-flow` மூலம் தடங்களின் இடத்தை கட்டுப்படுத்துதல்

`grid-auto-flow` ஆனது தானாக-வைக்கப்பட்ட உருப்படிகள் (குறிப்பிட்ட வரிசை மற்றும் நெடுவரிசை நிலைகள் ஒதுக்கப்படாத உருப்படிகள்) கிரிட்டில் எவ்வாறு செருகப்படுகின்றன என்பதை தீர்மானிக்கிறது. இது உள்ளார்ந்த தடங்கள் உருவாக்கப்படும் திசையை பாதிக்கிறது.

`grid-auto-flow` க்கான சாத்தியமான மதிப்புகள்:

• `row` (இயல்புநிலை): உருப்படிகள் வரிசை வரிசையாக வைக்கப்படுகின்றன. ஒரு செல் ஏற்கனவே நிரப்பப்பட்டிருந்தால், அந்த உருப்படி வரிசையில் அடுத்த கிடைக்கும் செல்லில் வைக்கப்படும், தேவைப்பட்டால் புதிய வரிசைகளை உருவாக்கும்.
• `column`: உருப்படிகள் நெடுவரிசை நெடுவரிசையாக வைக்கப்படுகின்றன. ஒரு செல் ஏற்கனவே நிரப்பப்பட்டிருந்தால், அந்த உருப்படி நெடுவரிசையில் அடுத்த கிடைக்கும் செல்லில் வைக்கப்படும், தேவைப்பட்டால் புதிய நெடுவரிசைகளை உருவாக்கும்.
• `row dense`: `row` ஐப் போன்றது, ஆனால் வரிசையில் முந்தைய "இடைவெளிகளை" நிரப்ப முயற்சிக்கிறது, இது உருப்படிகளை வரிசைக்கு வெளியே வைத்தாலும் கூட. இது மிகவும் கச்சிதமான தளவமைப்பை உருவாக்க பயனுள்ளதாக இருக்கும்.
• `column dense`: `column` ஐப் போன்றது, ஆனால் வரிசையில் முந்தைய "இடைவெளிகளை" நிரப்ப முயற்சிக்கிறது.

எடுத்துக்காட்டு: `grid-auto-flow: column` ஐப் பயன்படுத்துதல்

            
.grid-container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column;
}

            

              
                Copy
              
            
          

`grid-auto-flow: column` உடன், உருப்படிகள் கிரிட்டில் நெடுவரிசை நெடுவரிசையாக வைக்கப்படும். வெளிப்படையாக வரையறுக்கப்பட்ட நெடுவரிசைகளில் பொருந்தக்கூடியதை விட அதிகமான உருப்படிகள் இருந்தால், அவற்றுக்கு இடமளிக்க புதிய நெடுவரிசைகள் உருவாக்கப்படும்.

`dense` முக்கிய சொல்லைப் புரிந்துகொள்வது

`dense` முக்கிய சொல், கிரிட் தளவமைப்பில் உள்ள இடைவெளிகளை நிரப்ப முயற்சிக்குமாறு தானியங்கி-இடமளிப்பு வழிமுறைக்கு கூறுகிறது. மாறுபட்ட அளவுகளில் உள்ள உருப்படிகளை நீங்கள் கொண்டிருக்கும்போது மற்றும் வெற்று செல்களைத் தவிர்க்க விரும்பும்போது இது குறிப்பாக பயனுள்ளதாக இருக்கும்.

இருப்பினும், `dense` ஐப் பயன்படுத்துவது கிரிட்டில் உள்ள உருப்படிகளின் வரிசையை மாற்றக்கூடும் என்பதை நினைவில் கொள்ளுங்கள். பொருளுள்ள காரணங்களுக்காக அல்லது அணுகல்தன்மைக்காக உருப்படிகளின் வரிசை முக்கியமானது என்றால், `dense` ஐப் பயன்படுத்துவதைத் தவிர்க்கவும் அல்லது அதன் தாக்கத்தை கவனமாக சோதிக்கவும்.

நடைமுறை எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்

உள்ளார்ந்த தடங்கள் நம்பமுடியாத அளவிற்கு பல்துறை வாய்ந்தவை மற்றும் பல்வேறு சூழ்நிலைகளில் பயன்படுத்தப்படலாம்.

1. டைனமிக் உள்ளடக்கக் காட்சி

டைனமிக் உள்ளடக்கத்துடன் (எ.கா., தரவுத்தளம் அல்லது API இலிருந்து) கையாளும் போது, உருப்படிகளின் எண்ணிக்கை அறியப்படாத நிலையில், உள்ளார்ந்த தடங்கள் மாறுபடும் உள்ளடக்கத்தைக் கையாள ஒரு தடையற்ற வழியை வழங்குகின்றன. நீங்கள் வரிசைகள் அல்லது நெடுவரிசைகளின் எண்ணிக்கையை முன்கூட்டியே வரையறுக்கத் தேவையில்லை; கிரிட் தானாகவே மாற்றியமைக்கும்.

எடுத்துக்காட்டு: ஒரு ஈ-காமர்ஸ் API இலிருந்து தயாரிப்புகளின் பட்டியலைக் காண்பித்தல். ஒரு வரிசைக்கு தயாரிப்புகளின் எண்ணிக்கையை வரையறுக்க நீங்கள் `grid-template-columns` ஐ அமைக்கலாம் மற்றும் `grid-auto-rows` செங்குத்து இடைவெளியைக் கையாளட்டும். மேலும் தயாரிப்புகள் ஏற்றப்படும்போது, கிரிட் அவற்றைக் காண்பிக்க தானாகவே புதிய வரிசைகளை உருவாக்கும்.

2. பதிலளிக்கக்கூடிய படக் காட்சியகங்கள்

உள்ளார்ந்த தடங்கள் பதிலளிக்கக்கூடிய படக் காட்சியகங்களை உருவாக்குவதை எளிதாக்கும். திரை அளவைப் பொறுத்து நெடுவரிசைகளின் எண்ணிக்கையை சரிசெய்ய மீடியா வினவல்களைப் பயன்படுத்தலாம், மேலும் கிரிட் படங்களின் இடங்களை தானாகவே கையாளும்.

எடுத்துக்காட்டு: பெரிய திரைகளில் ஒரு வரிசைக்கு 4 படங்கள், நடுத்தர திரைகளில் 2 படங்கள், மற்றும் சிறிய திரைகளில் 1 படம் காட்டும் ஒரு புகைப்படக் காட்சியகம். நெடுவரிசைகளின் எண்ணிக்கையைக் கட்டுப்படுத்த மீடியா வினவல்களுக்குள் `grid-template-columns` ஐப் பயன்படுத்தவும், மற்றும் உள்ளார்ந்த தடங்கள் வரிசை உருவாக்கத்தைக் கையாளும்.

3. மாறி உள்ளடக்கத்துடன் கூடிய சிக்கலான தளவமைப்புகள்

உள்ளடக்க உயரங்கள் அல்லது அகலங்கள் கணிசமாக மாறுபடக்கூடிய சிக்கலான தளவமைப்புகளுக்கு, உள்ளார்ந்த தடங்கள் ஒரு சீரான மற்றும் பார்வைக்கு ஈர்க்கக்கூடிய கட்டமைப்பைப் பராமரிக்க உதவும். `minmax()` உடன் இணைந்தால், பெரிய உள்ளடக்கத்திற்கு இடமளிக்கும் போது வரிசைகள் அல்லது நெடுவரிசைகள் குறைந்தபட்சம் ஒரு குறிப்பிட்ட அளவில் இருப்பதை நீங்கள் உறுதிப்படுத்தலாம்.

எடுத்துக்காட்டு: மாறுபட்ட நீளங்களைக் கொண்ட கட்டுரைகளைக் கொண்ட ஒரு செய்தி வலைத்தளம். முக்கிய உள்ளடக்கப் பகுதிகள் மற்றும் பக்கப்பட்டியை வரையறுக்க `grid-template-columns` ஐப் பயன்படுத்தவும், மேலும் கட்டுரை கொள்கலன்களின் உயரத்தைக் கையாள `grid-auto-rows: minmax(200px, auto)` ஐ அனுமதிக்கவும், இது சிறிய கட்டுரைகளுக்கு கூட குறைந்தபட்ச உயரம் இருப்பதை உறுதி செய்கிறது.

4. "மேசன்ரி" தளவமைப்புகளை உருவாக்குதல்

பிரத்யேக மேசன்ரி நூலகங்களுக்கு இது ஒரு சரியான மாற்றாக இல்லாவிட்டாலும், உள்ளார்ந்த தடங்கள் மற்றும் `grid-auto-flow: dense` உடன் CSS கிரிட் அடிப்படை மேசன்ரி போன்ற தளவமைப்புகளை உருவாக்கப் பயன்படுத்தப்படலாம். உள்ளடக்க உருப்படிகள் ஒப்பீட்டளவில் ஒத்த அகலங்களையும் ஆனால் மாறுபட்ட உயரங்களையும் கொண்டிருக்கும்போது இது சிறப்பாகச் செயல்படும்.

எடுத்துக்காட்டு: வெவ்வேறு பகுதிகள் மற்றும் படங்களுடன் கூடிய வலைப்பதிவு இடுகைகளின் தொகுப்பைக் காண்பித்தல். நெடுவரிசைகளின் எண்ணிக்கையை வரையறுக்க `grid-template-columns` ஐயும், இடைவெளிகளை நிரப்ப `grid-auto-flow: dense` ஐயும், மற்றும் குறைந்தபட்ச வரிசை உயரத்தை அமைக்க `grid-auto-rows` ஐயும் பயன்படுத்தலாம்.

உள்ளார்ந்த தடங்களைப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

உள்ளார்ந்த தடங்களை திறம்பட பயன்படுத்தவும் பொதுவான சிக்கல்களைத் தவிர்க்கவும், இந்த சிறந்த நடைமுறைகளைக் கருத்தில் கொள்ளுங்கள்:

• எப்போதும் `grid-auto-rows` மற்றும் `grid-auto-columns` ஐ வரையறுக்கவும்: இயல்புநிலை `auto` அளவை நம்ப வேண்டாம். நிலைத்தன்மையையும் முன்கணிப்பையும் உறுதிப்படுத்த உள்ளார்ந்த தடங்களின் அளவை வெளிப்படையாக அமைக்கவும்.
• நெகிழ்வான அளவிற்கு `minmax()` ஐப் பயன்படுத்தவும்: குறைந்தபட்ச அளவைப் பராமரிக்கும் போது உள்ளடக்கத்திற்கு ஏற்ப மாற்றியமைக்கும் நெகிழ்வான தடங்களை உருவாக்க `grid-auto-rows` மற்றும் `grid-auto-columns` உடன் `minmax()` ஐ இணைக்கவும்.
• `grid-auto-flow` ஐப் புரிந்து கொள்ளுங்கள்: விரும்பிய இட வரிசை மற்றும் தளவமைப்பின் அடர்த்தியின் அடிப்படையில் பொருத்தமான `grid-auto-flow` மதிப்பைத் தேர்வு செய்யவும்.
• முழுமையாகச் சோதிக்கவும்: உங்கள் கிரிட் தளவமைப்புகள் எதிர்பார்த்தபடி செயல்படுகின்றனவா என்பதை உறுதிப்படுத்த வெவ்வேறு உள்ளடக்க நீளங்கள் மற்றும் திரை அளவுகளுடன் சோதிக்கவும். உள்ளார்ந்த தடங்கள் எவ்வாறு உருவாக்கப்படுகின்றன மற்றும் அளவிடப்படுகின்றன என்பதில் குறிப்பாக கவனம் செலுத்துங்கள்.
• அணுகல்தன்மையைக் கருத்தில் கொள்ளுங்கள்: கிரிட்டில் உருப்படிகள் வைக்கப்படும் வரிசையை மனதில் கொள்ளுங்கள், குறிப்பாக `grid-auto-flow: dense` ஐப் பயன்படுத்தும்போது. காட்சி வரிசை மாற்றுத்திறனாளிகளுக்கான தருக்க வரிசையுடன் பொருந்துவதை உறுதி செய்யவும்.
• டெவலப்பர் கருவிகளைப் பயன்படுத்தவும்: உலாவி டெவலப்பர் கருவிகள் உள்ளார்ந்த தடங்கள் உட்பட CSS கிரிட் தளவமைப்புகளின் சிறந்த காட்சிப்படுத்தலை வழங்குகின்றன. உங்கள் தளவமைப்புகளை ஆய்வு செய்யவும் மற்றும் ஏதேனும் சிக்கல்களை சரிசெய்யவும் இந்த கருவிகளைப் பயன்படுத்தவும்.

மேம்பட்ட நுட்பங்கள்: வெளிப்படையான மற்றும் உள்ளார்ந்த தடங்களை இணைத்தல்

CSS கிரிட்டின் உண்மையான சக்தி சிக்கலான மற்றும் மாற்றியமைக்கக்கூடிய தளவமைப்புகளை உருவாக்க வெளிப்படையான மற்றும் உள்ளார்ந்த தடங்களை இணைப்பதில் இருந்து வருகிறது. இங்கே சில மேம்பட்ட நுட்பங்கள்:

1. பெயரிடப்பட்ட கிரிட் பகுதிகள் மற்றும் உள்ளார்ந்த தடங்கள்

உங்கள் தளவமைப்பின் ஒட்டுமொத்த கட்டமைப்பை வரையறுக்க பெயரிடப்பட்ட கிரிட் பகுதிகளை (`grid-template-areas`) பயன்படுத்தலாம், பின்னர் அந்த பகுதிகளுக்குள் டைனமிக் உள்ளடக்கத்தின் இடத்தைக் கையாள உள்ளார்ந்த தடங்களை நம்பலாம்.

எடுத்துக்காட்டு: ஒரு வலைத்தளத்தின் தலைப்பு மற்றும் அடிக்குறிப்பு வெளிப்படையான தடங்கள் மற்றும் கிரிட் பகுதிகளுடன் வரையறுக்கப்பட்டுள்ளன, அதே நேரத்தில் முக்கிய உள்ளடக்கப் பகுதி கட்டுரைகள் அல்லது தயாரிப்புகளைக் காண்பிக்க உள்ளார்ந்த தடங்களைப் பயன்படுத்தும்படி கட்டமைக்கப்பட்டுள்ளது.

2. உள்ளமைக்கப்பட்ட கிரிட்கள்

கிரிட்களை உள்ளமைப்பது, கவலைகளை தெளிவாகப் பிரித்து மிகவும் சிக்கலான தளவமைப்புகளை உருவாக்க உங்களை அனுமதிக்கிறது. நீங்கள் வெளிப்படையான தடங்களுடன் ஒரு பிரதான கிரிட்டை வரையறுத்து, பின்னர் தனிப்பட்ட கூறுகளின் தளவமைப்பைக் கையாள உள்ளமைக்கப்பட்ட கிரிட்களுக்குள் உள்ளார்ந்த தடங்களைப் பயன்படுத்தலாம்.

எடுத்துக்காட்டு: ஒரு டாஷ்போர்டு தளவமைப்பு, இதில் பிரதான கிரிட் ஒட்டுமொத்த கட்டமைப்பை (பக்கப்பட்டி, முக்கிய உள்ளடக்கப் பகுதி, முதலியன) வரையறுக்கிறது, மற்றும் முக்கிய உள்ளடக்கப் பகுதிக்குள் உள்ள ஒவ்வொரு பிரிவும் அதன் தரவைக் காண்பிக்க உள்ளார்ந்த தடங்களுடன் ஒரு உள்ளமைக்கப்பட்ட கிரிட்டைப் பயன்படுத்துகிறது.

3. `auto-fit` அல்லது `auto-fill` உடன் `repeat()` ஐப் பயன்படுத்துதல்

`auto-fit` அல்லது `auto-fill` முக்கிய சொற்களுடன் `repeat()` செயல்பாடு, கிடைக்கும் இடத்தின் அடிப்படையில் நெடுவரிசைகளின் எண்ணிக்கையை தானாக சரிசெய்யும் பதிலளிக்கக்கூடிய கிரிட்களை உருவாக்க மிகவும் பயனுள்ளதாக இருக்கும். உள்ளார்ந்த தடங்களுடன் இணைந்தால், எந்தவொரு திரை அளவிற்கும் ஏற்றவாறு டைனமிக் மற்றும் நெகிழ்வான தளவமைப்புகளை நீங்கள் உருவாக்கலாம்.

            
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Automatically create columns that are at least 200px wide and fill the available space */
  grid-auto-rows: minmax(150px, auto);
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், கிரிட் முடிந்தவரை பல நெடுவரிசைகளை தானாகவே உருவாக்கும், ஒவ்வொன்றும் குறைந்தபட்சம் 200px அகலம் கொண்டிருக்கும். `1fr` அலகு நெடுவரிசைகள் கிடைக்கும் இடத்தை நிரப்புவதை உறுதி செய்கிறது. தேவைக்கேற்ப உள்ளார்ந்த வரிசைகள் உருவாக்கப்படும், குறைந்தபட்சம் 150px உயரத்துடன்.

பொதுவான சிக்கல்களை சரிசெய்தல்

உள்ளார்ந்த தடங்கள் சக்திவாய்ந்தவை என்றாலும், அவை சில நேரங்களில் எதிர்பாராத நடத்தைக்கு வழிவகுக்கும். இங்கே சில பொதுவான சிக்கல்கள் மற்றும் அவற்றை எவ்வாறு சரிசெய்வது என்பது கொடுக்கப்பட்டுள்ளது:

• சீரற்ற வரிசை அல்லது நெடுவரிசை உயரங்கள்: இது பெரும்பாலும் உள்ளார்ந்த தடங்களின் இயல்புநிலை `auto` அளவால் ஏற்படுகிறது. பொருத்தமான மதிப்புகளுடன் `grid-auto-rows` மற்றும் `grid-auto-columns` ஐ வரையறுப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.
• உருப்படிகள் ஒன்றுடன் ஒன்று மேலடுக்குதல்: `grid-row-start`, `grid-row-end`, `grid-column-start`, மற்றும் `grid-column-end` ஐப் பயன்படுத்தி உருப்படிகளை வைப்பதில் நீங்கள் கவனமாக இல்லாவிட்டால் இது நிகழலாம். உருப்படிகள் ஒன்றுடன் ஒன்று மேலடுக்காமல் இருப்பதை உறுதிப்படுத்த உங்கள் கிரிட் இட மதிப்புகளை இருமுறை சரிபார்க்கவும்.
• தளவமைப்பில் இடைவெளிகள்: `grid-auto-flow: dense` ஐப் பயன்படுத்தும்போது கிடைக்கும் இடத்தை நிரப்ப உருப்படிகள் சரியான அளவில் இல்லாவிட்டால் இது ஏற்படலாம். வெவ்வேறு உருப்படி அளவுகளுடன் பரிசோதனை செய்யுங்கள் அல்லது `grid-auto-flow` மதிப்பை சரிசெய்வதைக் கருத்தில் கொள்ளுங்கள்.
• எதிர்பாராத உருப்படி வரிசை: `grid-auto-flow: dense` ஐப் பயன்படுத்துவது உருப்படிகளின் வரிசையை மாற்றக்கூடும். வரிசை முக்கியமானது என்றால், `dense` ஐப் பயன்படுத்துவதைத் தவிர்க்கவும் அல்லது அணுகல்தன்மை மற்றும் பயன்பாட்டினைப் பாதிப்பதை கவனமாக சோதிக்கவும்.
• சிறிய திரைகளில் தளவமைப்பு உடைதல்: திரை அளவைப் பொறுத்து நெடுவரிசைகளின் எண்ணிக்கை, வரிசை உயரங்கள் மற்றும் பிற கிரிட் பண்புகளை சரிசெய்ய மீடியா வினவல்களைப் பயன்படுத்தி உங்கள் தளவமைப்பு பதிலளிக்கக்கூடியதாக இருப்பதை உறுதிப்படுத்தவும்.

அணுகல்தன்மை பரிசீலனைகள்

CSS கிரிட்டைப் பயன்படுத்தும்போது, உங்கள் தளவமைப்புகள் மாற்றுத்திறனாளிகள் உட்பட அனைவராலும் பயன்படுத்தக்கூடியதாக இருப்பதை உறுதிசெய்ய அணுகல்தன்மையைக் கருத்தில் கொள்வது அவசியம்.

• தருக்க வரிசை: கிரிட்டில் உள்ள உருப்படிகளின் காட்சி வரிசை DOM இல் உள்ள உள்ளடக்கத்தின் தருக்க வரிசையுடன் பொருந்த வேண்டும். ஸ்கிரீன் ரீடர்கள் அல்லது விசைப்பலகை வழிசெலுத்தலைப் பயன்படுத்தி வழிநடத்தும் பயனர்களுக்கு இது மிகவும் முக்கியமானது.
• வரிசை முக்கியமென்றால் `grid-auto-flow: dense` ஐத் தவிர்க்கவும்: முன்னர் குறிப்பிட்டபடி, `grid-auto-flow: dense` உருப்படிகளின் வரிசையை மாற்றக்கூடும். வரிசை முக்கியமானது என்றால், `dense` ஐப் பயன்படுத்துவதைத் தவிர்க்கவும் அல்லது பயனர்கள் உள்ளடக்கத்தை வழிநடத்த மாற்று வழிகளை வழங்கவும்.
• போதுமான கான்ட்ராஸ்ட்டை வழங்கவும்: குறைந்த பார்வை உள்ள பயனர்களுக்கு உள்ளடக்கத்தைப் படிக்கக்கூடியதாக மாற்ற, உரை மற்றும் பின்னணி வண்ணங்களுக்கு இடையில் போதுமான கான்ட்ராஸ்ட் இருப்பதை உறுதிப்படுத்தவும்.
• பொருளுள்ள HTML ஐப் பயன்படுத்தவும்: உங்கள் உள்ளடக்கத்தை கட்டமைக்கவும் மற்றும் ஸ்கிரீன் ரீடர்களுக்கு கூடுதல் சூழலை வழங்கவும் பொருளுள்ள HTML கூறுகளை (எ.கா., `
  `, `
• உதவி தொழில்நுட்பங்களுடன் சோதிக்கவும்: உங்கள் தளவமைப்புகள் அனைத்து பயனர்களுக்கும் அணுகக்கூடியதா என்பதை உறுதிப்படுத்த ஸ்கிரீன் ரீடர்கள் மற்றும் பிற உதவி தொழில்நுட்பங்களுடன் சோதிக்கவும்.

முடிவுரை

CSS கிரிட்டின் உள்ளார்ந்த தடங்கள் நெகிழ்வான, டைனமிக் மற்றும் பதிலளிக்கக்கூடிய வலைத் தளவமைப்புகளை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த கருவியாகும். உள்ளார்ந்த தடங்கள் எவ்வாறு செயல்படுகின்றன மற்றும் `grid-auto-rows`, `grid-auto-columns`, மற்றும் `grid-auto-flow` ஆகியவற்றைப் பயன்படுத்தி அவற்றின் அளவு மற்றும் இடத்தைக் கட்டுப்படுத்துவது எப்படி என்பதைப் புரிந்துகொள்வதன் மூலம், நீங்கள் CSS கிரிட்டின் முழு திறனையும் திறந்து, அதிநவீன தளவமைப்புகளை எளிதாக உருவாக்கலாம்.

எல்லோராலும் பயன்படுத்தக்கூடியதாக இருப்பதை உறுதிசெய்ய, எப்போதும் அணுகல்தன்மையைக் கருத்தில் கொண்டு உங்கள் தளவமைப்புகளை முழுமையாகச் சோதிக்க நினைவில் கொள்ளுங்கள். பயிற்சி மற்றும் பரிசோதனையுடன், நீங்கள் உள்ளார்ந்த தடங்களில் தேர்ச்சி பெற்று அற்புதமான வலை அனுபவங்களை உருவாக்க முடியும்.

நீங்கள் ஒரு எளிய படக் காட்சியகத்தை உருவாக்கினாலும் அல்லது ஒரு சிக்கலான டாஷ்போர்டை உருவாக்கினாலும், CSS கிரிட்டின் உள்ளார்ந்த தடங்கள் உங்கள் தளவமைப்பு இலக்குகளை அதிக செயல்திறன் மற்றும் நெகிழ்வுத்தன்மையுடன் அடைய உதவும். தானியங்கி தளவமைப்பு உருவாக்கத்தின் சக்தியைத் தழுவி, உங்கள் வலை மேம்பாட்டுத் திறன்களை உயர்த்துங்கள்!