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

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

CSS Grid-இன் அடிப்படைகளைப் புரிந்துகொள்ளுதல்

நாம் தானியங்கி இடமளிப்பிற்குள் நுழைவதற்கு முன், CSS Grid-இன் அடிப்படைகளை விரைவாக நினைவுபடுத்துவோம். ஒரு கிரிட் தளவமைப்பு ஒரு grid container மற்றும் அதன் grid items-ஐ வரையறுப்பதன் மூலம் உருவாக்கப்படுகிறது. grid container என்பது கிரிட் ஆக செயல்படும் பெற்றோர் உறுப்பு, மற்றும் grid items அதன் குழந்தைகள், அவை கிரிட்டின் வரிசைகள் மற்றும் நெடுவரிசைகளுக்குள் அமைக்கப்பட்டுள்ளன.

புரிந்துகொள்ள வேண்டிய முக்கிய பண்புகள் பின்வருமாறு:

• display: grid; அல்லது display: inline-grid;: கொள்கலனுக்குப் பயன்படுத்தப்படும் இந்த பண்பு அதை ஒரு கிரிட் கொள்கலனாக மாற்றுகிறது.
• grid-template-columns மற்றும் grid-template-rows: இந்த பண்புகள் முறையே கிரிட்டின் நெடுவரிசைகள் மற்றும் வரிசைகளின் அளவை வரையறுக்கின்றன. மதிப்புகள் பிக்சல்கள் (px), சதவீதங்கள் (%), பின்னங்கள் (fr) அல்லது பிற செல்லுபடியாகும் CSS அலகுகளில் இருக்கலாம்.
• grid-column-start, grid-column-end, grid-row-start, மற்றும் grid-row-end: இந்த பண்புகள் கிரிட் உருப்படிகளை அவற்றின் தொடக்க மற்றும் இறுதி வரிகளைக் குறிப்பிடுவதன் மூலம் வெளிப்படையாக நிலைநிறுத்த உங்களை அனுமதிக்கின்றன.
• grid-area: grid-row-start, grid-column-start, grid-row-end, மற்றும் grid-column-end ஆகியவற்றை இணைக்கும் ஒரு சுருக்கெழுத்துப் பண்பு.

தானியங்கி இடமளிப்பின் சக்தி

தானியங்கி இடமளிப்பு என்பது CSS Grid-ஆல் கிரிட் உருப்படிகளை அவற்றின் வெளிப்படையான இடம் (grid-column-start அல்லது grid-row-start போன்ற பண்புகளைப் பயன்படுத்தி) வரையறுக்கப்படாதபோது தானாகவே நிலைநிறுத்தும் ஒரு பொறிமுறையாகும். கிரிட் உருப்படிகளின் எண்ணிக்கை டைனமிக்காக இருக்கும்போது அல்லது தளவமைப்பு வெவ்வேறு திரை அளவுகள் அல்லது உள்ளடக்க மாறுபாடுகளுக்கு ஏற்ப தடையின்றி மாற்றியமைக்கப்பட வேண்டும் என்று நீங்கள் விரும்பும்போது இது நம்பமுடியாத அளவிற்கு பயனுள்ளதாக இருக்கும். தானியங்கி இடமளிப்பு வழிமுறை கிரிட் கொள்கலனின் அமைப்பு, ஏற்கனவே உள்ள உருப்படி இடங்கள் மற்றும் ஒவ்வொரு உருப்படியின் நிலையை தீர்மானிக்க கிடைக்கும் இடத்தை பகுப்பாய்வு செய்கிறது.

தானியங்கி இடமளிப்பு வழிமுறைகள்

CSS Grid வெவ்வேறு தானியங்கி இடமளிப்பு வழிமுறைகளை வழங்குகிறது, இது முதன்மையாக grid-auto-flow பண்பு மூலம் கட்டுப்படுத்தப்படுகிறது. உங்கள் கிரிட் உருப்படிகள் எவ்வாறு அமைக்கப்படுகின்றன என்பதைக் கட்டுப்படுத்த இந்த வழிமுறைகளைப் புரிந்துகொள்வது மிக முக்கியம்.

grid-auto-flow: row; (இயல்புநிலை)

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

எடுத்துக்காட்டு:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row; /* Default */
}

            

              
                Copy
              
            
          

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

grid-auto-flow: column;

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

எடுத்துக்காட்டு:

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

            

              
                Copy
              
            
          

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

grid-auto-flow: row dense; மற்றும் grid-auto-flow: column dense;

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

எடுத்துக்காட்டு:

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

.item-one {
  grid-column: span 2;
}

            

              
                Copy
              
            
          

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

கிரிட் பண்புகளுடன் தானியங்கி இடமளிப்பைக் கட்டுப்படுத்துதல்

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

grid-template-columns மற்றும் grid-template-rows

கிரிட்டின் நெடுவரிசைகள் மற்றும் வரிசைகளின் பரிமாணங்கள் தானியங்கி இடமளிப்பை நேரடியாக பாதிக்கின்றன. விரும்பிய தளவமைப்பை அடைய இந்த பரிமாணங்களை கவனமாக வரையறுக்கவும். நீங்கள் நிலையான அலகுகள் (px), தொடர்புடைய அலகுகள் (%) அல்லது நெகிழ்வான அலகுகளை (fr) பயன்படுத்தலாம்.

எடுத்துக்காட்டு (ரெஸ்பான்சிவ் நெடுவரிசைகளுக்கு fr அலகுகளைப் பயன்படுத்துதல்):

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive Columns */
  grid-auto-flow: row;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டு, கிடைக்கும் இடத்திற்கு ஏற்ப மாற்றியமைக்கும் ரெஸ்பான்சிவ் நெடுவரிசைகளை உருவாக்க auto-fit (பின்னர் விளக்கப்படும்) பயன்படுத்துகிறது. ஒவ்வொரு நெடுவரிசையும் குறைந்தது 200px அகலமாக இருக்கும் (minmax(200px, 1fr)), மற்றும் கிடைக்கும் இடத்தை நிரப்ப வளரும். இந்த அணுகுமுறை வெவ்வேறு திரை அளவுகளில் பரவலாகப் பொருந்தும்.

grid-column மற்றும் grid-row (மற்றும் அவற்றின் சுருக்கெழுத்து, grid-area)

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

எடுத்துக்காட்டு:

            .item-one {
  grid-column: 1 / 3; /* Spans columns 1 and 2 */
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், item-one வெளிப்படையாக வைக்கப்பட்டுள்ளது, மேலும் பிற உருப்படிகள் grid-auto-flow மற்றும் கிரிட் கொள்கலனில் கிடைக்கும் எந்த இடத்தையும் பயன்படுத்தி அதைச் சுற்றி வைக்கப்படும்.

grid-auto-columns மற்றும் grid-auto-rows

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

எடுத்துக்காட்டு:

            .grid-container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-auto-columns: 150px; /* Implicit column size */
}

            

              
                Copy
              
            
          

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

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

நிஜ உலக சூழ்நிலைகளில் தானியங்கி இடமளிப்பை எவ்வாறு பயன்படுத்துவது என்பதற்கான சில நடைமுறை எடுத்துக்காட்டுகளை ஆராய்வோம்:

1. ரெஸ்பான்சிவ் தயாரிப்பு பட்டியல்

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

HTML (எளிய தயாரிப்பு உருப்படிகள்):

            
<div class="product-grid">
  <div class="product-item">
    <img src="product1.jpg" alt="Product 1">
    <h3>Product 1</h3>
    <p>Description of Product 1.</p>
  </div>
  <div class="product-item">
    <img src="product2.jpg" alt="Product 2">
    <h3>Product 2</h3>
    <p>Description of Product 2.</p>
  </div>
  <!-- More product items -->
</div>

            

              
                Copy
              
            
          

CSS (auto-fit மற்றும் minmax பயன்படுத்துதல்):

            
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px; /* Adds space between grid items */
}

.product-item {
  border: 1px solid #ccc;
  padding: 10px;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், repeat(auto-fit, minmax(250px, 1fr)) குறைந்தது 250px அகலமுள்ள நெடுவரிசைகளை உருவாக்குகிறது. திரை அளவு அதிகரிக்கும்போது, அதிக நெடுவரிசைகள் கொள்கலனுக்குள் பொருந்தும். திரை சுருங்கும்போது, நெடுவரிசைகள் கிடைக்கும் இடத்திற்குப் பொருந்தும்படி அடுக்கப்படும். இது சாதனங்களில் டைனமிக்காக மாற்றியமைக்கக்கூடிய ஒரு ரெஸ்பான்சிவ் தயாரிப்பு கிரிட்டை உருவாக்குவதற்கான ஒரு எளிய மற்றும் பயனுள்ள வழியாகும், இது உலகளவில் நல்ல பயனர் அனுபவத்தை உறுதி செய்கிறது.

2. டைனமிக் படத்தொகுப்பு

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

HTML (பட உருப்படிகள்):

            
<div class="image-gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <!-- More image items -->
</div>

            

              
                Copy
              
            
          

CSS (எளிய கிரிட் தளவமைப்பு):

            
.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-auto-rows: 100px; /* Set a default row height */
  gap: 10px;
}

.image-gallery img {
  width: 100%; /* Ensure images fill the grid cell */
  height: 100%;
  object-fit: cover; /*  Important for preserving aspect ratio  */
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், object-fit: cover; பாணி படங்கள் அவற்றின் கிரிட் செல்களுக்குள் பொருந்தும்போது அவற்றின் விகிதத்தைப் பராமரிப்பதை உறுதி செய்கிறது. grid-auto-rows பண்பு கிரிட் உருப்படிகளுக்கு ஒரு அடிப்படை உயரத்தை வழங்குகிறது. auto-fit முக்கியச்சொல் கொள்கலன் அகலத்தின் அடிப்படையில் நெடுவரிசைகளின் எண்ணிக்கையை தானாகவே சரிசெய்யும். இந்த எடுத்துக்காட்டு, நன்கு பயன்படுத்தப்பட்டால், உலகளவில் வேலை செய்கிறது, பயனருக்கு ஒரு பார்வைக்கு ஈர்க்கக்கூடிய மற்றும் நெகிழ்வான படத்தொகுப்பை வழங்குகிறது. குறிப்பாக மாறுபட்ட அலைவரிசைகளைக் கொண்ட சர்வதேச பார்வையாளர்களுக்காக, உகந்த பட அளவுகளுக்கு ஒரு நூலகம் அல்லது முன்செயலியைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.

3. உள்ளடக்கம்-முதல் தளவமைப்பு

நீங்கள் ஒரு உள்ளடக்கம்-முதல் தளவமைப்பை உருவாக்கலாம், அங்கு முக்கிய உள்ளடக்கம் முதலில் வைக்கப்பட்டு, அதைத் தொடர்ந்து தொடர்புடைய உள்ளடக்கம் அல்லது பக்கப் பட்டிகள் வைக்கப்படுகின்றன. CSS Grid ஒரு ரெஸ்பான்சிவ் தளவமைப்பைப் பராமரிக்கும் அதே வேளையில் grid-column அல்லது grid-row பயன்படுத்தி உள்ளடக்கத்தின் வரிசையைக் கட்டுப்படுத்த உங்களை அனுமதிக்கிறது.

HTML (எளிய தளவமைப்பு):

            
<div class="content-container">
  <div class="main-content">
    <h2>Main Content</h2>
    <p>This is the main content of the page...</p>
  </div>
  <div class="sidebar">
    <h3>Sidebar</h3>
    <p>Related content, ads, or navigation...</p>
  </div>
</div>

            

              
                Copy
              
            
          

CSS (கிரிட் உடன் உள்ளடக்கத்தை ஏற்பாடு செய்தல்):

            
.content-container {
  display: grid;
  grid-template-columns: 1fr 300px; /* Two columns */
  gap: 20px;
}

.main-content {
  grid-column: 1; /* Stays in the first column */
}

.sidebar {
  grid-column: 2; /* Stays in the second column */
}

/* Responsive adjustment for smaller screens */
@media (max-width: 768px) {
  .content-container {
    grid-template-columns: 1fr; /* Stack columns on smaller screens */
  }
  .sidebar {
    grid-column: 1; /*  Place sidebar under main content */
  }
}

            

              
                Copy
              
            
          

இந்த அணுகுமுறை `main-content` எப்போதும் HTML மூல வரிசையில் முதலில் தோன்றுவதை உறுதி செய்கிறது, இது அணுகல் மற்றும் SEO-க்கு நன்மை பயக்கும். பெரிய திரைகளில், அவை அருகருகே இருக்கும்; சிறிய திரைகளில், அவை செங்குத்தாக அடுக்கப்படும். இது உலகளவில் பொருத்தமானது, குறிப்பாக மொபைல்-முதல் வடிவமைப்பு கொள்கைகளைக் கருத்தில் கொள்ளும்போது.

auto-fit மற்றும் auto-fill ஒப்பீடு

auto-fit மற்றும் auto-fill இரண்டும் grid-template-columns மற்றும் grid-template-rows பண்புகளில் பயன்படுத்தப்படும் முக்கிய வார்த்தைகள் ஆகும், அவை ரெஸ்பான்சிவ் கிரிட்களை உருவாக்க உதவுகின்றன. அவை ஒரே மாதிரியாக செயல்படுகின்றன, ஆனால் ஒரு நுட்பமான வேறுபாட்டுடன்:

• auto-fit: கிரிட் உருப்படிகள் கிடைக்கும் இடத்தை நிரப்ப விரிவடைகின்றன. எல்லா நெடுவரிசைகளையும் நிரப்ப போதுமான உருப்படிகள் இல்லை என்றால், வெற்று நெடுவரிசைகள் சுருங்கிவிடும்.
• auto-fill: கிரிட் கிடைக்கும் இடத்தை நிரப்ப வெற்று, மறைமுகமான நெடுவரிசைகளை (அல்லது வரிசைகளை) உருவாக்குகிறது. உருப்படிகள் இடத்தை நிரப்ப விரிவடைவதில்லை.

வேறுபாட்டை விளக்க பின்வருவனவற்றைக் கவனியுங்கள்:

            
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* auto-fit */
  /* OR */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* auto-fill */
  width: 600px;
}

.item {
  background-color: lightgrey;
  border: 1px solid black;
  padding: 10px;
}

            

              
                Copy
              
            
          

இந்த எளிமைப்படுத்தப்பட்ட எடுத்துக்காட்டில், கிரிட்டில் இரண்டு உருப்படிகள் மட்டுமே இருந்தால், auto-fit நெடுவரிசைகளை 600px அகலத்தை நிரப்ப நீட்டிக்கச் செய்யும், இதனால் இரண்டு நெடுவரிசைகளும் தலா 300px அகலமாக இருக்கும். மறுபுறம், auto-fill-ஐப் பயன்படுத்துவது, இரண்டு 150px அகல நெடுவரிசைகளை உருவாக்கும், பக்கத்தில் இரண்டு வெற்று 150px அகல நெடுவரிசைகளுடன், ஏனெனில் 4 நெடுவரிசைகளில் 2 மட்டுமே உருப்படிகளைக் கொண்டிருக்கின்றன.

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

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

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

உலகளாவிய அணுகலை உறுதிப்படுத்த சில முக்கிய அம்சங்கள் இங்கே:

• தர்க்கரீதியான மூல வரிசை: முடிந்தவரை, உங்கள் HTML உருப்படிகளின் மூல வரிசையை தர்க்கரீதியாக வைத்திருங்கள். இது பொதுவாக ஸ்கிரீன் ரீடர்களுக்கு தெளிவான வாசிப்பு வரிசையைப் பராமரிக்கும்.
• ஸ்கிரீன் ரீடர்களுடன் சோதிக்கவும்: உங்கள் தளவமைப்புகளை ஸ்கிரீன் ரீடர்களுடன் (எ.கா., macOS-இல் VoiceOver, Windows-இல் NVDA) முழுமையாகச் சோதித்து, உள்ளடக்கம் சரியாக அறிவிக்கப்படுகிறதா என்பதை உறுதிப்படுத்தவும்.
• செமான்டிக் HTML: ஸ்கிரீன் ரீடர்களுக்கு தெளிவான கட்டமைப்பு மற்றும் பொருளை வழங்க செமான்டிக் HTML கூறுகளை (<article>, <nav>, <aside>, <main>, <header>, <footer>, போன்றவை) பயன்படுத்தவும்.
• மாற்று உரை (alt text): படங்களுக்கு எப்போதும் விளக்கமான மாற்று உரையை வழங்கவும்.
• ARIA பண்புக்கூறுகள்: தேவைப்படும்போது கூடுதல் சூழலை வழங்க ARIA பண்புக்கூறுகளை (எ.கா., aria-label, aria-describedby) பயன்படுத்தவும், இருப்பினும் அதிகப்படியான பயன்பாட்டைத் தவிர்க்கவும்.
• விசைப்பலகை வழிசெலுத்தல்: உங்கள் தளவமைப்புகள் விசைப்பலகையைப் பயன்படுத்தி செல்லக்கூடியவை என்பதை உறுதிப்படுத்தவும். பயனர்கள் ஊடாடும் கூறுகள் வழியாக ஒரு தர்க்கரீதியான வரிசையில் தாவல் செய்ய முடியும்.

செயல்திறன் மற்றும் மேம்படுத்தல்

CSS Grid பொதுவாக செயல்திறன் மிக்கதாக இருந்தாலும், உங்கள் தளவமைப்புகளை மேம்படுத்த சில விஷயங்களைக் கருத்தில் கொள்ள வேண்டும், குறிப்பாக உங்கள் வலைத்தளம் வளரும்போது:

• அதிகப்படியான கிரிட் தடங்களைத் தவிர்க்கவும்: அதிக எண்ணிக்கையிலான கிரிட் தடங்களை உருவாக்குவதைத் தவிர்க்கவும், குறிப்பாக மறைமுகமானவற்றை. இது செயல்திறன் சிக்கல்களுக்கு வழிவகுக்கும். உங்கள் grid-template-columns மற்றும் grid-template-rows-ஐ கவனமாக திட்டமிடுங்கள்.
• சிக்கலான கணக்கீடுகளைக் குறைக்கவும்: உங்கள் CSS-க்குள் சிக்கலான கணக்கீடுகளின் பயன்பாட்டைக் குறைக்கவும். உலாவி இயந்திரங்கள் சில வகையான கணக்கீடுகளுக்கு உகந்ததாக உள்ளன மற்றும் வரம்புகளைக் கொண்டிருக்கலாம்.
• படங்களை மேம்படுத்தவும்: வலைப் பயன்பாட்டிற்கு எப்போதும் படங்களை மேம்படுத்தவும். பொருத்தமான பட வடிவங்களைப் (எ.கா., WebP) பயன்படுத்தவும், படங்களை சுருக்கவும், மற்றும் <picture> உறுப்பு அல்லது ரெஸ்பான்சிவ் பட நுட்பங்களைப் பயன்படுத்தி ரெஸ்பான்சிவ் பட அளவுகளை வழங்கவும். இது எல்லா பிராந்தியங்களிலும் உணரப்பட்ட சுமை நேரத்தை பாதிக்கிறது.
• CSS-ஐ சுருக்கி தொகுக்கவும்: உங்கள் CSS கோப்புகளைச் சுருக்கி, HTTP கோரிக்கைகளின் எண்ணிக்கையைக் குறைக்க அவற்றைத் தொகுக்கவும். சிறந்த அமைப்பு மற்றும் பராமரிப்பிற்காக Sass அல்லது Less போன்ற CSS முன்செயலியைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.
• உண்மையான சாதனங்களில் சோதிக்கவும்: உங்கள் தளவமைப்புகளை பல்வேறு சாதனங்கள் மற்றும் உலாவிகளில் சோதிக்கவும், பழைய சாதனங்கள் மற்றும் குறைந்த சக்தி கொண்ட சாதனங்கள், மற்றும் வெவ்வேறு புவியியல் இடங்களில் பொதுவாகப் பயன்படுத்தப்படும் சாதனங்கள் உட்பட. வெவ்வேறு நெட்வொர்க் நிலைமைகளுடன் சோதிக்கவும்.

சர்வதேசமயமாக்கல் (i18n) மற்றும் உள்ளூர்மயமாக்கல் (l10n) பரிசீலனைகள்

உலகளாவிய பார்வையாளர்களுக்காக வலைத்தளங்களை உருவாக்கும்போது, நீங்கள் சர்வதேசமயமாக்கல் (i18n) மற்றும் உள்ளூர்மயமாக்கல் (l10n) ஆகியவற்றைக் கணக்கில் கொள்ள வேண்டும். தானியங்கி இடமளிப்பு இதை எவ்வாறு பாதிக்கும் என்பது இங்கே:

• உரை திசை (LTR/RTL): சில மொழிகள் (எ.கா., அரபு, ஹீப்ரு) வலமிருந்து இடமாக (RTL) எழுதப்படுகின்றன என்பதைக் கருத்தில் கொள்ளுங்கள். RTL தளவமைப்புகளைக் கையாள direction மற்றும் text-align பண்புகளைச் சரியாகப் பயன்படுத்தவும். CSS Grid இயல்பாகவே RTL-க்கு மாற்றியமைக்கக்கூடியது, ஆனால் உங்கள் தளவமைப்பு சரியாக செயல்படுவதை நீங்கள் உறுதி செய்ய வேண்டும்.
• உள்ளடக்க நீளம்: வெவ்வேறு மொழிகளில் உள்ள உள்ளடக்கம் வெவ்வேறு நீளங்களைக் கொண்டிருக்கலாம். குறிப்பாக தலைப்புச் செய்திகள் மற்றும் விளக்கங்களுக்கு, மாறுபட்ட உரை நீளங்களுக்கு இடமளிக்கும் வகையில் உங்கள் தளவமைப்புகளை வடிவமைக்கவும். உள்ளடக்கம் கிரிட் செல்களுக்குள் பொருந்துவதை உறுதிசெய்ய `minmax()`-ஐப் பயன்படுத்தவும்.
• எழுத்துரு ஆதரவு: உங்கள் வலைத்தளம் நீங்கள் இலக்கு வைக்கும் மொழிகளை ஆதரிக்கும் எழுத்துருக்களைப் பயன்படுத்துவதை உறுதிப்படுத்தவும். தேவைப்பட்டால் எழுத்துரு ஃபால்பேக்குகளை வழங்கவும். பரந்த மொழி ஆதரவை வழங்கும் Google Fonts அல்லது பிற வலை எழுத்துரு சேவைகளைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.
• நாணயம் மற்றும் எண் வடிவமைப்பு: விலைகள் அல்லது எண்களைக் காட்டினால், அவற்றை பயனரின் இருப்பிடத்திற்கு ஏற்ப வடிவமைக்கவும். பொருத்தமான நாணய சின்னங்கள் மற்றும் எண் வடிவங்களைப் பயன்படுத்தவும்.
• தேதி மற்றும் நேர வடிவமைப்பு: பயனரின் பிராந்தியத்திற்குப் பொருத்தமான வடிவத்தில் தேதிகள் மற்றும் நேரங்களைக் காட்டவும். தேதி மற்றும் நேர வடிவமைப்பைக் கையாள ஒரு நூலகத்தைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.
• தகவமைக்கக்கூடிய மீடியா: உங்கள் தளவமைப்புகள் உள்ளூர்மயமாக்கப்பட வேண்டிய மீடியாவை (படங்கள், வீடியோக்கள்) இடமளிப்பதை உறுதிப்படுத்தவும். எடுத்துக்காட்டாக, உரையுடன் கூடிய ஒரு படத்திற்கு அந்த உரையை பல மொழிகளில் மொழிபெயர்க்க வேண்டியிருக்கலாம்.

மேம்பட்ட நுட்பங்கள் மற்றும் பரிசீலனைகள்

பெயரிடப்பட்ட கிரிட் கோடுகள்

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

            
.grid-container {
  display: grid;
  grid-template-columns: [col-start] 1fr [col-mid] 1fr [col-end];
}

.item-one {
  grid-column: col-start / col-end;
}

            

              
                Copy
              
            
          

உள்ளமைக்கப்பட்ட கிரிட்கள் (Nested Grids)

CSS Grid கிரிட் உருப்படிகளுக்குள் கிரிட் கொள்கலன்களை உள்ளமைக்க உங்களை அனுமதிக்கிறது. இது உங்கள் ஒட்டுமொத்த கிரிட்டிற்குள் சிக்கலான பிரிவுகளின் தளவமைப்பின் மீது அதிக கட்டுப்பாட்டை வழங்குகிறது. இது சிக்கலான தளவமைப்புகள் மற்றும் மாடுலர் வடிவமைப்பை செயல்படுத்துகிறது.

            
<div class="grid-container">
  <div class="grid-item">
    <div class="nested-grid">
      <div class="nested-item">Item 1</div>
      <div class="nested-item">Item 2</div>
    </div>
  </div>
</div>

            

              
                Copy
              
            
          

            
.nested-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

            

              
                Copy
              
            
          

கிரிட்டை மற்ற தளவமைப்பு முறைகளுடன் இணைத்தல்

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

முடிவுரை

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

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