CSS கிரிட் சப்-கிரிட் தேர்ச்சி: மரபுரிமையான கிரிட் அமைப்பு முறைகள்

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

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

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

• grid-container: ஒரு உறுப்பை கிரிட் கண்டெய்னராக அறிவிக்கிறது.
• grid-template-rows: கிரிட்டில் உள்ள ஒவ்வொரு வரிசையின் உயரத்தை வரையறுக்கிறது.
• grid-template-columns: கிரிட்டில் உள்ள ஒவ்வொரு நெடுவரிசையின் அகலத்தை வரையறுக்கிறது.
• grid-row-start, grid-row-end, grid-column-start, grid-column-end: கிரிட் உருப்படிகளை கிரிட்டிற்குள் வைப்பதை குறிப்பிடுகிறது.
• grid-gap, row-gap, column-gap: கிரிட் வரிசைகள் மற்றும் நெடுவரிசைகளுக்கு இடையிலான இடைவெளியை வரையறுக்கிறது.

எடுத்துக்காட்டு: ஒரு எளிய CSS கிரிட்

            
.grid-container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 10px;
}

            

              
                Copy
              
            
          

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

CSS கிரிட் சப்-கிரிட்டை அறிமுகப்படுத்துதல்

CSS கிரிட் சப்-கிரிட் ஒரு சக்திவாய்ந்த அம்சமாகும், இது ஒரு நெஸ்ட் செய்யப்பட்ட கிரிட் (ஒரு சப்-கிரிட்) அதன் பெற்றோர் கிரிட்டிலிருந்து வரிசை மற்றும்/அல்லது நெடுவரிசை வரையறைகளை மரபுரிமையாகப் பெற அனுமதிக்கிறது. இது பெற்றோர் மற்றும் துணை கிரிட்டுகளுக்கு இடையே ஒரு இறுக்கமான உறவை உருவாக்குகிறது, அவை ஒத்திசைந்து இருப்பதை உறுதி செய்கிறது. grid-template-rows மற்றும் grid-template-columns பண்புகள் subgrid என அமைக்கப்படும்போது, பெற்றோர் கிரிட்டின் டிராக் வரையறைகளைப் பயன்படுத்துமாறு உலவிக்குச் சொல்கிறது.

சப்-கிரிட்டை ஏன் பயன்படுத்த வேண்டும்?

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

CSS கிரிட் சப்-கிரிட்டை செயல்படுத்துதல்: ஒரு படிப்படியான வழிகாட்டி

CSS கிரிட் சப்-கிரிட்டை எவ்வாறு செயல்படுத்துவது என்பதை விளக்க ஒரு நடைமுறை எடுத்துக்காட்டைப் பார்ப்போம்.

படி 1: பெற்றோர் கிரிட்டை வரையறுத்தல்

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

            
<div class="grid-container">
 <div class="item">Item 1</div>
 <div class="item">Item 2</div>
 <div class="item subgrid-container">
 <div class="sub-item">Sub-Item 1</div>
 <div class="sub-item">Sub-Item 2</div>
 </div>
 <div class="item">Item 4</div>
</div>

            

              
                Copy
              
            
          

            
.grid-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr); /* Four equal columns */
 grid-template-rows: auto auto;
 grid-gap: 10px;
}

.item {
 background-color: #eee;
 padding: 20px;
 border: 1px solid #ccc;
}

            

              
                Copy
              
            
          

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

படி 2: சப்-கிரிட் கண்டெய்னரை உருவாக்குதல்

அடுத்து, சப்-கிரிட் கண்டெய்னரை வரையறுத்து அதன் grid-template-columns ஐ subgrid என அமைக்கவும். மேலும், அது பெற்றோர் கிரிட்டிற்குள் எந்த நெடுவரிசை கோடுகளைக் கடக்க வேண்டும் என்பதையும் குறிப்பிடுவோம்.

            
.subgrid-container {
 display: grid;
 grid-column: 3 / span 2; /* Spans the third and fourth columns of the parent grid */
 grid-template-columns: subgrid; /* Inherits column definitions from the parent */
 grid-gap: 5px;
 background-color: #f0f0f0;
 padding: 10px;
}

            

              
                Copy
              
            
          

grid-template-columns: subgrid என அமைப்பதன் மூலம், சப்-கிரிட் கண்டெய்னர் இப்போது பெற்றோர் கிரிட்டிலிருந்து நெடுவரிசை வரையறைகளை மரபுரிமையாகப் பெறும். `grid-column` பண்பு இரண்டு நெடுவரிசை டிராக்குகளைக் கடந்து செல்வதால், சப்-கிரிட் தானே பெற்றோர் கிரிட்டின் 3 மற்றும் 4 ஆம் நெடுவரிசை டிராக்குகளின் அகலத்துடன் பொருந்தக்கூடிய இரண்டு நெடுவரிசை டிராக்குகளைக் கொண்டிருக்கும்.

படி 3: சப்-கிரிட் உருப்படிகளுக்கு ஸ்டைல் செய்தல்

இறுதியாக, தேவைக்கேற்ப சப்-கிரிட் உருப்படிகளுக்கு ஸ்டைல் செய்யவும்.

            
.sub-item {
 background-color: #ddd;
 padding: 10px;
 border: 1px solid #bbb;
}

            

              
                Copy
              
            
          

முழுமையான குறியீடு எடுத்துக்காட்டு

            
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Subgrid Example</title>
<style>
.grid-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr); /* Four equal columns */
 grid-template-rows: auto auto;
 grid-gap: 10px;
}

.item {
 background-color: #eee;
 padding: 20px;
 border: 1px solid #ccc;
}

.subgrid-container {
 display: grid;
 grid-column: 3 / span 2; /* Spans the third and fourth columns of the parent grid */
 grid-template-columns: subgrid; /* Inherits column definitions from the parent */
 grid-gap: 5px;
 background-color: #f0f0f0;
 padding: 10px;
}

.sub-item {
 background-color: #ddd;
 padding: 10px;
 border: 1px solid #bbb;
}
</style>
</head>
<body>

<div class="grid-container">
 <div class="item">Item 1</div>
 <div class="item">Item 2</div>
 <div class="item subgrid-container">
 <div class="sub-item">Sub-Item 1</div>
 <div class="sub-item">Sub-Item 2</div>
 </div>
 <div class="item">Item 4</div>
 <div class="item">Item 5</div>
 <div class="item">Item 6</div>
 <div class="item">Item 7</div>
 <div class="item">Item 8</div>
</div>

</body>
</html>

            

              
                Copy
              
            
          

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

மேம்பட்ட சப்-கிரிட் நுட்பங்கள்

வரிசைகள் மற்றும் நெடுவரிசைகளைக் கடந்து செல்லுதல்

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

            
<div class="grid-container">
 <div class="item">Item 1</div>
 <div class="item">Item 2</div>
 <div class="item subgrid-container">
 <div class="sub-item" style="grid-column: 1 / span 2;">Sub-Item 1 (Spanning 2 Columns)</div>
 <div class="sub-item">Sub-Item 2</div>
 </div>
 <div class="item">Item 4</div>
</div>

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், `Sub-Item 1` சப்-கிரிட்டிற்குள் இரண்டு நெடுவரிசைகளைக் கடந்து செல்கிறது.

பெயரிடப்பட்ட கிரிட் கோடுகளுடன் சப்-கிரிட்டை இணைத்தல்

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

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

            

              
                Copy
              
            
          

பின்னர், இந்த பெயரிடப்பட்ட கிரிட் கோடுகளை சப்-கிரிட்டிற்குள் குறிப்பிடவும்.

            
<div class="grid-container">
 <div class="item">Item 1</div>
 <div class="item subgrid-container">
 <div class="sub-item" style="grid-column: start / mid;">Sub-Item 1</div>
 <div class="sub-item" style="grid-column: mid / end;">Sub-Item 2</div>
 </div>
</div>

            

              
                Copy
              
            
          

இது தளவமைப்பை மேலும் படிக்கக்கூடியதாகவும் மாற்றுவதற்கு எளிதாகவும் ஆக்குகிறது.

`grid-template-rows: subgrid` ஐப் பயன்படுத்துதல்

grid-template-columns: subgrid ஐப் பயன்படுத்துவது போலவே, பெற்றோர் கிரிட்டிலிருந்து வரிசை வரையறைகளை மரபுரிமையாகப் பெற grid-template-rows: subgrid ஐயும் பயன்படுத்தலாம். பக்கத்தின் வெவ்வேறு பிரிவுகளில் உள்ள உருப்படிகளின் உயரம் சீரமைக்கப்பட வேண்டிய தளவமைப்புகளை உருவாக்குவதற்கு இது குறிப்பாக பயனுள்ளதாக இருக்கும்.

            
.grid-container {
 display: grid;
 grid-template-rows: auto auto auto;
 grid-template-columns: 1fr;
}

.subgrid-container {
 display: grid;
 grid-row: 2 / span 2; /* Span 2 rows of the parent grid */
 grid-template-rows: subgrid; /* Inherit row definitions from the parent */
}

            

              
                Copy
              
            
          

CSS கிரிட் சப்-கிரிட்டிற்கான நிஜ-உலக பயன்பாட்டு வழக்குகள்

CSS கிரிட் சப்-கிரிட்டை பரந்த அளவிலான நிஜ-உலக சூழ்நிலைகளுக்குப் பயன்படுத்தலாம். இதோ சில எடுத்துக்காட்டுகள்:

1. சிக்கலான படிவங்கள்

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

2. தயாரிப்பு பட்டியல்கள்

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

3. டாஷ்போர்டு தளவமைப்புகள்

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

4. பத்திரிகை மற்றும் வலைப்பதிவு தளவமைப்புகள்

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

5. நிலையான ஹெடர் மற்றும் ஃபூட்டர் வடிவமைப்பு

பெரும்பாலும், வலைத்தளங்கள் வெவ்வேறு பிரிவுகளில் நிலையான ஹெடர் மற்றும் ஃபூட்டரை பராமரிக்க விரும்புகின்றன. இந்த உலகளாவிய கூறுகளில் வழிசெலுத்தல் உருப்படிகள், லோகோக்கள் மற்றும் சமூக ஊடக ஐகான்களின் இடமும் சீரமைப்பும் சீராக இருப்பதை சப்-கிரிட் உறுதி செய்கிறது.

உலவி இணக்கத்தன்மை மற்றும் ஃபால்பேக்குகள்

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

            
@supports not (grid-template-columns: subgrid) {
 /* Fallback styles for browsers that don't support subgrid */
 .subgrid-container {
 display: block; /* Or use a different layout method */
 }
}

            

              
                Copy
              
            
          

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

CSS கிரிட் சப்-கிரிட்டின் நன்மைகளை அதிகரிக்க, இந்த சிறந்த நடைமுறைகளைப் பின்பற்றவும்:

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

CSS கிரிட் சப்-கிரிட்டிற்கான மாற்று வழிகள்

CSS கிரிட் சப்-கிரிட் ஒரு சக்திவாய்ந்த கருவியாக இருந்தாலும், இதேபோன்ற தளவமைப்பு முறைகளை அடைய மாற்று அணுகுமுறைகள் உள்ளன. அவற்றுள் சில:

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

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

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

• சப்-கிரிட் டிராக் அளவுகளை மரபுரிமையாகப் பெறவில்லை: சப்-கிரிட் கண்டெய்னரில் grid-template-columns மற்றும்/அல்லது grid-template-rows ஐ subgrid என அமைத்துள்ளீர்கள் என்பதை உறுதிப்படுத்தவும். மேலும், சப்-கிரிட் கண்டெய்னர் கிரிட் கண்டெய்னரின் நேரடி துணை என்பதை சரிபார்க்கவும்.
• சீரமைப்பு சிக்கல்கள்: சப்-கிரிட் கண்டெய்னர் மற்றும் அதன் உருப்படிகளில் உள்ள grid-column மற்றும் grid-row பண்புகளை இருமுறை சரிபார்த்து, அவை கிரிட்டிற்குள் சரியாக நிலைநிறுத்தப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும்.
• எதிர்பாராத இடைவெளிகள்: பெற்றோர் கிரிட் மற்றும் சப்-கிரிட் இரண்டிலும் grid-gap பண்பு சரியாக அமைக்கப்பட்டுள்ளதா என்பதை சரிபார்க்கவும்.
• பதிலளிக்கும் தன்மை சிக்கல்கள்: வெவ்வேறு திரை அளவுகளுக்கு கிரிட் தளவமைப்பை சரிசெய்ய மீடியா வினவல்களைப் பயன்படுத்தவும். டிராக் அளவுகள் வெவ்வேறு உள்ளடக்க நீளங்களுக்கு ஏற்ப நெகிழ்வாக இருப்பதை உறுதிப்படுத்தவும்.

முடிவுரை

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

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