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

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

CSS சப்கிரிட் என்றால் என்ன?

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

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

கட்டுப்பாட்டுப் பரவல்: சப்கிரிட்கள் டிராக் அளவுகளை எவ்வாறு பெறுகின்றன

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

கட்டுப்பாட்டுப் பரவல் எவ்வாறு செயல்படுகிறது என்பதன் ஒரு முறிவு இங்கே:

1. அறிவிப்பு: நீங்கள் ஒரு பெற்றோர் கிரிட்டை குறிப்பிட்ட வரிசை மற்றும் நெடுவரிசை டிராக் அளவுகளுடன் (எ.கா., fr அலகுகள், நிலையான பிக்சல் மதிப்புகள் அல்லது auto ஐப் பயன்படுத்தி) வரையறுக்கிறீர்கள்.
2. கிரிட் ஐட்டம் சப்கிரிட்டாக மாறுகிறது: நீங்கள் பெற்றோர் கிரிட்டிற்குள் ஒரு கிரிட் ஐட்டத்தைத் தேர்ந்தெடுத்து, அதை grid-template-rows: subgrid; மற்றும்/அல்லது grid-template-columns: subgrid; பயன்படுத்தி ஒரு சப்கிரிட்டாக அறிவிக்கிறீர்கள்.
3. மரபுரிமை: subgrid குறிப்பிடப்பட்ட அச்சில் (வரிசைகள் அல்லது நெடுவரிசைகள்) சப்கிரிட் பெற்றோர் கிரிட்டின் டிராக் வரையறைகளைப் பெறுகிறது.
4. சீரமைப்பு: சப்கிரிட்டின் கிரிட் கோடுகள் பெற்றோர் கிரிட்டின் தொடர்புடைய கிரிட் கோடுகளுடன் சீரமைக்கப்படுகின்றன.
5. பதிலளிக்கக்கூடிய நடத்தை: பெற்றோர் கிரிட்டின் அளவு மாறும் போது, சப்கிரிட் தானாகவே அதன் டிராக் அளவுகளை சரிசெய்து சீரமைப்பைப் பராமரிக்கிறது, இது பதிலளிக்கக்கூடிய லேஅவுட்டை உறுதி செய்கிறது.

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

பின்வரும் HTML கட்டமைப்பைக் கவனியுங்கள்:

            <div class="container">
  <div class="item">
    <div class="subgrid">
      <div>Item A</div>
      <div>Item B</div>
      <div>Item C</div>
    </div>
  </div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>
            

              
                Copy
              
            
          

மற்றும் பின்வரும் CSS:

            .container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
}

.item {
  background-color: #eee;
  padding: 10px;
}

.subgrid {
  display: grid;
  grid-column: 1 / -1; /* Span all columns of the parent */
  grid-template-columns: subgrid;
  grid-template-rows: auto;
  gap: 5px;
}

.subgrid > div {
  background-color: #ddd;
  padding: 5px;
}
            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், .subgrid உறுப்பு .container இலிருந்து நெடுவரிசை டிராக் அளவைப் பெறுகிறது. சப்கிரிட்டிற்குள் உள்ள கூறுகள் (Item A, Item B, Item C) தானாகவே பெற்றோர் கிரிட்டின் நெடுவரிசைகளுடன் சீரமைக்கப்படுகின்றன. பெற்றோர் கிரிட்டின் நெடுவரிசை அளவுகள் மாறினால், சப்கிரிட் அதற்கேற்ப சரிசெய்கிறது.

உட்பொதிந்த கிரிட் சார்புநிலை: சப்கிரிட்களுக்குள் உள்ள சப்கிரிட்களின் சவால்கள்

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

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

உட்பொதிந்த சப்கிரிட் சார்புநிலைக்கான எடுத்துக்காட்டு:

            <div class="container">
  <div class="item">
    <div class="subgrid-level-1">
      <div class="subgrid-level-2">
        <div>Item 1</div>
        <div>Item 2</div>
      </div>
    </div>
  </div>
</div>
            

              
                Copy
              
            
          

            .container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}

.item {
  display: grid;
  grid-template-rows: auto;
}

.subgrid-level-1 {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: 1fr;
}

.subgrid-level-2 {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: 1fr;
}
            

              
                Copy
              
            
          

இந்த சூழ்நிலையில், .subgrid-level-2 என்பது .subgrid-level-1 இன் நெடுவரிசை டிராக் அளவைச் சார்ந்துள்ளது, இது .container இன் நெடுவரிசை டிராக் அளவைச் சார்ந்துள்ளது. நீங்கள் .container இன் grid-template-columns ஐ மாற்றினால், இரண்டு சப்கிரிட்களும் பாதிக்கப்படும்.

உட்பொதிந்த கிரிட் சார்புநிலை சிக்கல்களைத் தணித்தல்

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

• உட்பொதித்தல் ஆழத்தைக் கட்டுப்படுத்துங்கள்: முடிந்தவரை ஆழமாக உட்பொதிந்த சப்கிரிட்களைத் தவிர்க்கவும். கிரிட்டிற்குள் உள்ள எளிமையான கூறுகளுக்கு வழக்கமான உட்பொதிந்த கிரிட்கள் அல்லது ஃப்ளெக்ஸ்பாக்ஸ் போன்ற மாற்று லேஅவுட் அணுகுமுறைகளைக் கவனியுங்கள். ஆழமான உட்பொதித்தல் சிக்கலை அதிகரித்து, லேஅவுட்டைப் பற்றி பகுத்தறிவதை கடினமாக்குகிறது.
• பொருத்தமான இடங்களில் வெளிப்படையான டிராக் அளவைப் பயன்படுத்துங்கள்: சில சந்தர்ப்பங்களில், சப்கிரிட்டிற்குள் டிராக் அளவுகளை வெளிப்படையாக வரையறுப்பது பெற்றோர் கிரிட்டின் டிராக் அளவிலிருந்து அதைத் துண்டிக்கலாம். பெற்றோர் கிரிட்டுடன் கடுமையான சீரமைப்பு தேவைப்படாத கூறுகளுக்கு இது பயனுள்ளதாக இருக்கும். இருப்பினும், பெற்றோர் டிராக் அளவிலிருந்து விலகினால், ஒரு சீரான வடிவமைப்பு அமைப்பைப் பராமரிப்பதில் கவனமாக இருங்கள்.
• CSS மாறிகளை (Custom Properties) பயன்படுத்தவும்: உயர் மட்டத்தில் (எ.கா., :root தேர்வியில்) டிராக் அளவுகளை வரையறுக்க CSS மாறிகளைப் பயன்படுத்தவும், பின்னர் பெற்றோர் மற்றும் சப்கிரிட்கள் இரண்டிலும் அந்த மாறிகளைக் குறிப்பிடவும். இது ஒரு இடத்திலிருந்து டிராக் அளவைக் கட்டுப்படுத்த உங்களை அனுமதிக்கிறது, இது நிலைத்தன்மையை பராமரிப்பதை எளிதாக்குகிறது.
• முழுமையான சோதனை: உட்பொதிந்த கிரிட் சார்புநிலைகளால் ஏற்படும் எதிர்பாராத லேஅவுட் சிக்கல்களைக் கண்டறிந்து தீர்க்க, உங்கள் லேஅவுட்களை வெவ்வேறு திரை அளவுகள் மற்றும் உலாவிகளில் விரிவாக சோதிக்கவும். விளிம்பு நிலைகள் மற்றும் உள்ளடக்க மாறுபாடுகளில் குறிப்பாக கவனம் செலுத்துங்கள்.
• CSS கிரிட் இன்ஸ்பெக்டர் கருவிகள்: கிரிட் அமைப்பைக் காட்சிப்படுத்தவும், ஏதேனும் சீரமைப்பு அல்லது அளவு சிக்கல்களைக் கண்டறியவும் உலாவி டெவலப்பர் கருவிகளை (CSS கிரிட் இன்ஸ்பெக்டர் போன்றவை) பயன்படுத்தவும். சப்கிரிட்கள் அவற்றின் பெற்றோர் கிரிட்களுடன் எவ்வாறு தொடர்பு கொள்கின்றன என்பதைப் புரிந்துகொள்ள இந்தக் கருவிகள் உங்களுக்கு உதவும்.
• கண்டெய்னர் வினவல்களைக் கவனியுங்கள் (கிடைக்கும்போது): கண்டெய்னர் வினவல்கள் பரவலாக ஆதரிக்கப்படும்போது, சில சூழ்நிலைகளில் சப்கிரிட்களுக்கு மாற்றாக அவை வழங்கக்கூடும். கண்டெய்னர் வினவல்கள் பார்வைக்களத்திற்குப் பதிலாக, அவற்றின் உள்ளடக்க உறுப்புகளின் அளவின் அடிப்படையில் கூறுகளை வடிவமைக்க உங்களை அனுமதிக்கின்றன, இது சிக்கலான உட்பொதிந்த கிரிட் கட்டமைப்புகளின் தேவையைக் குறைக்கும்.
• சிக்கலான லேஅவுட்களை உடைக்கவும்: சிக்கலான உட்பொதிந்த கிரிட் சார்புநிலைகளுடன் நீங்கள் போராடுவதைக் கண்டால், லேஅவுட்டை சிறிய, மேலும் நிர்வகிக்கக்கூடிய கூறுகளாக உடைப்பதைக் கவனியுங்கள். இது பராமரிப்பை மேம்படுத்தலாம் மற்றும் எதிர்பாராத லேஅவுட் சிக்கல்களின் அபாயத்தைக் குறைக்கலாம்.

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

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

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

எடுத்துக்காட்டு: சப்கிரிட்டுடன் படிவ லேஅவுட்

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

            <form class="form-grid">
  <div class="form-row">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="form-row">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </div>
  <div class="form-row">
    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>
  </div>
</form>
            

              
                Copy
              
            
          

            .form-grid {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Define two columns: label and input */
  gap: 10px;
}

.form-row {
  display: grid;
  grid-template-columns: subgrid; /* Inherit column track sizing from the parent */
  gap: 5px;
}

label {
  text-align: right;
}
            

              
                Copy
              
            
          

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

உலாவி ஆதரவு

Chrome, Firefox, Safari, மற்றும் Edge உள்ளிட்ட நவீன உலாவிகளில் CSS சப்கிரிட்டிற்கான உலாவி ஆதரவு பொதுவாக நன்றாக உள்ளது. இருப்பினும், உங்கள் இலக்கு பார்வையாளர்களுக்கு போதுமான உலாவி ஆதரவு உள்ளதா என்பதை உறுதிப்படுத்த, Can I Use (https://caniuse.com/css-subgrid) இல் இணக்கத்தன்மையைச் சரிபார்ப்பது அவசியம். நீங்கள் பழைய உலாவிகளை ஆதரிக்க வேண்டுமானால், பாலிஃபில்கள் அல்லது மாற்று லேஅவுட் நுட்பங்களைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.

முடிவுரை

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

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