സിഎസ്എസ് ഗ്രിഡ് ട്രാക്ക് സൈസിംഗ്: ഇൻട്രിൻസിക്, എക്സ്ട്രിൻസിക് നിയന്ത്രണത്തിൽ വൈദഗ്ദ്ധ്യം നേടാം

സിഎസ്എസ് ഗ്രിഡ് ലേഔട്ട് സങ്കീർണ്ണവും റെസ്‌പോൺസീവുമായ വെബ് ലേഔട്ടുകൾ നിർമ്മിക്കുന്നതിനുള്ള ശക്തമായ ഒരു ഉപകരണമാണ്. അതിൻ്റെ പ്രധാന ശക്തികളിലൊന്ന് ഫ്ലെക്സിബിൾ ട്രാക്ക് സൈസിംഗ് കഴിവുകളാണ്, ഇത് വരികളുടെയും നിരകളുടെയും വലുപ്പം കൃത്യതയോടെ നിയന്ത്രിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. വ്യത്യസ്ത ട്രാക്ക് സൈസിംഗ് കീവേഡുകളും ഫംഗ്ഷനുകളും മനസ്സിലാക്കുന്നത് അനുയോജ്യവും പരിപാലിക്കാൻ എളുപ്പമുള്ളതുമായ ലേഔട്ടുകൾ നിർമ്മിക്കുന്നതിന് നിർണ്ണായകമാണ്. ഈ ലേഖനം സിഎസ്എസ് ഗ്രിഡിലെ ഇൻട്രിൻസിക്, എക്സ്ട്രിൻസിക് സൈസിംഗിന്റെ നൂതന ആശയങ്ങളിലേക്ക് ആഴത്തിൽ കടന്നുചെല്ലുന്നു, വിവിധ ഉള്ളടക്കങ്ങൾക്കും സ്ക്രീൻ വലുപ്പങ്ങൾക്കും അനുസരിച്ച് ഭംഗിയായി പൊരുത്തപ്പെടുന്ന ലേഔട്ടുകൾ നിർമ്മിക്കാൻ അവ നിങ്ങളെ എങ്ങനെ സഹായിക്കുന്നു എന്ന് പര്യവേക്ഷണം ചെയ്യുന്നു.

ഗ്രിഡ് ട്രാക്കുകളും സൈസിംഗും മനസ്സിലാക്കാം

ഇൻട്രിൻസിക്, എക്സ്ട്രിൻസിക് സൈസിംഗിന്റെ പ്രത്യേകതകളിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, സിഎസ്എസ് ഗ്രിഡ് ട്രാക്കുകളുടെ അടിസ്ഥാന ആശയങ്ങൾ നമുക്ക് ഒന്നുകൂടി നോക്കാം.

എന്താണ് ഗ്രിഡ് ട്രാക്കുകൾ?

ഒരു ഗ്രിഡ് ലേഔട്ടിലെ വരികളെയും നിരകളെയും ആണ് ഗ്രിഡ് ട്രാക്കുകൾ എന്ന് പറയുന്നത്. ഗ്രിഡ് ഇനങ്ങൾ സ്ഥാപിക്കുന്നതിനുള്ള ഘടന അവ നിർവചിക്കുന്നു. ഈ ട്രാക്കുകളുടെ വലുപ്പം മൊത്തത്തിലുള്ള ലേഔട്ടിനെയും ഗ്രിഡിനുള്ളിൽ ഉള്ളടക്കം എങ്ങനെ വിതരണം ചെയ്യപ്പെടുന്നു എന്നതിനെയും നേരിട്ട് സ്വാധീനിക്കുന്നു.

ട്രാക്ക് വലുപ്പങ്ങൾ വ്യക്തമാക്കൽ

grid-template-rows, grid-template-columns പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ട്രാക്ക് വലുപ്പങ്ങൾ നിർവചിക്കാം. ഈ പ്രോപ്പർട്ടികൾ സ്പേസ് കൊണ്ട് വേർതിരിച്ച മൂല്യങ്ങളുടെ ഒരു ലിസ്റ്റ് സ്വീകരിക്കുന്നു, ഇവിടെ ഓരോ മൂല്യവും അനുബന്ധ ട്രാക്കിന്റെ വലുപ്പത്തെ പ്രതിനിധീകരിക്കുന്നു. ഉദാഹരണത്തിന്:

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

            

              
                Copy
              
            
          

ഈ കോഡ് മൂന്ന് കോളങ്ങളും രണ്ട് വരികളുമുള്ള ഒരു ഗ്രിഡ് നിർമ്മിക്കുന്നു. ആദ്യത്തെയും മൂന്നാമത്തെയും കോളങ്ങൾ ലഭ്യമായ സ്ഥലത്തിന്റെ 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;
}

            

              
                Copy
              
            
          

            <div class="grid-container">
  <div class="item1">Supercalifragilisticexpialidocious</div>
  <div class="item2">Short text</div>
</div>

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, "Supercalifragilisticexpialidocious" എന്ന വാക്ക് ആദ്യത്തെ കോളത്തിൽ ഒന്നിലധികം വരികളായി വിഭജിക്കപ്പെടും, അതേസമയം "Short text" രണ്ടാമത്തെ കോളത്തിൽ ഒരൊറ്റ വരിയിൽ തന്നെ നിലനിൽക്കും. ഇൻട്രിൻസിക് സൈസിംഗ് ഉള്ളടക്കത്തിന്റെ വലുപ്പ ആവശ്യകതകൾക്ക് അനുസരിച്ച് എങ്ങനെ പൊരുത്തപ്പെടുന്നു എന്ന് ഇത് കാണിക്കുന്നു.

ഉദാഹരണം: fit-content() ഉപയോഗിച്ചുള്ള ഇൻട്രിൻസിക് സൈസിംഗ്

ഒരു ട്രാക്ക് ഉള്ളടക്കത്തിനനുസരിച്ച് വലുപ്പം ക്രമീകരിക്കണമെന്നും എന്നാൽ അതിനൊരു പരമാവധി വലുപ്പ പരിധി വേണമെന്നും നിങ്ങൾ ആഗ്രഹിക്കുമ്പോൾ `fit-content()` ഫംഗ്ഷൻ ഉപയോഗപ്രദമാണ്. കോളങ്ങളോ വരികളോ വളരെ വലുതാകുന്നത് തടയാൻ ഇത് ഉപയോഗിക്കാം, അതേസമയം ഉള്ളടക്കം ചെറുതാണെങ്കിൽ അവയെ ചുരുങ്ങാനും അനുവദിക്കുന്നു.

            .grid-container {
    display: grid;
    grid-template-columns: fit-content(200px) 1fr;
    grid-gap: 10px;
}

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, ആദ്യത്തെ കോളം അതിലെ ഉള്ളടക്കത്തിന് അനുസരിച്ച് വികസിക്കും, പക്ഷേ 200px വീതിയിൽ കവിയുകയില്ല. രണ്ടാമത്തെ കോളം ശേഷിക്കുന്ന സ്ഥലം എടുക്കും. ഒരു കോളം ഫ്ലെക്സിബിൾ ആയിരിക്കണമെന്നും എന്നാൽ കൂടുതൽ സ്ഥലം എടുക്കരുതെന്നും നിങ്ങൾ ആഗ്രഹിക്കുന്ന ലേഔട്ടുകൾ നിർമ്മിക്കാൻ ഇത് ഉപയോഗപ്രദമാണ്.

എക്സ്ട്രിൻസിക് സൈസിംഗ്: സ്ഥലം അടിസ്ഥാനമാക്കിയത്

മറുവശത്ത്, എക്സ്ട്രിൻസിക് സൈസിംഗ് എന്നാൽ ഒരു ഗ്രിഡ് ട്രാക്കിന്റെ വലുപ്പം ഉള്ളടക്കത്തിന് പുറത്തുള്ള ഘടകങ്ങളായ ഗ്രിഡ് കണ്ടെയ്നറിലെ ലഭ്യമായ സ്ഥലം അല്ലെങ്കിൽ ഒരു നിശ്ചിത വലുപ്പ മൂല്യം എന്നിവയാൽ നിർണ്ണയിക്കപ്പെടുന്നു എന്നാണ്. എക്സ്ട്രിൻസിക് സൈസിംഗ് കീവേഡുകളിൽ ഉൾപ്പെടുന്നവ:

• length: ഒരു നിശ്ചിത നീള മൂല്യം (ഉദാ. 100px, 2em, 50vh). ഉള്ളടക്കം എന്തുതന്നെയായാലും ട്രാക്കിന് കൃത്യമായി ഈ വലുപ്പമായിരിക്കും.
• percentage: ഗ്രിഡ് കണ്ടെയ്‌നറിന്റെ വലുപ്പത്തിന്റെ ഒരു ശതമാനം (ഉദാ. 50%). ട്രാക്ക് ലഭ്യമായ സ്ഥലത്തിന്റെ ഈ ശതമാനം എടുക്കും.
• fr (ഫ്രാക്ഷണൽ യൂണിറ്റ്): മറ്റ് എല്ലാ ട്രാക്കുകളും വലുപ്പം ക്രമീകരിച്ചതിനുശേഷം ഗ്രിഡ് കണ്ടെയ്നറിൽ ലഭ്യമായ സ്ഥലത്തിന്റെ ഒരു ഭാഗത്തെ പ്രതിനിധീകരിക്കുന്നു. ട്രാക്കുകൾക്കിടയിൽ സ്ഥലം വിതരണം ചെയ്യുന്നതിനുള്ള ഏറ്റവും ഫ്ലെക്സിബിൾ മാർഗ്ഗമാണിത്.

ഉദാഹരണം: fr യൂണിറ്റുകൾ ഉപയോഗിച്ചുള്ള എക്സ്ട്രിൻസിക് സൈസിംഗ്

വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങളുമായി പൊരുത്തപ്പെടുന്ന റെസ്‌പോൺസീവ് ലേഔട്ടുകൾ നിർമ്മിക്കുന്നതിന് fr യൂണിറ്റ് അമൂല്യമാണ്. ട്രാക്കുകൾക്ക് ഫ്രാക്ഷണൽ യൂണിറ്റുകൾ നൽകുന്നതിലൂടെ, അവ ലഭ്യമായ സ്ഥലം ആനുപാതികമായി പങ്കിടുന്നുവെന്ന് നിങ്ങൾ ഉറപ്പാക്കുന്നു.

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

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, ഗ്രിഡ് കണ്ടെയ്നറിന് രണ്ട് കോളങ്ങളുണ്ട്. ആദ്യത്തെ കോളം ലഭ്യമായ സ്ഥലത്തിന്റെ 1 ഫ്രാക്ഷൻ എടുക്കുന്നു, രണ്ടാമത്തെ കോളം 2 ഫ്രാക്ഷൻ എടുക്കുന്നു. ഗ്രിഡ് കണ്ടെയ്നറിന് 600px വീതിയുണ്ടെങ്കിൽ, ആദ്യത്തെ കോളം 200px വീതിയും രണ്ടാമത്തെ കോളം 400px വീതിയുമുള്ളതായിരിക്കും (ഗ്രിഡ് ഗ്യാപ്പ് കുറച്ചതിന് ശേഷം). സ്ക്രീൻ വലുപ്പം എന്തുതന്നെയായാലും കോളങ്ങൾ അവയുടെ ആനുപാതിക ബന്ധം നിലനിർത്തുന്നുവെന്ന് ഇത് ഉറപ്പാക്കുന്നു.

ഉദാഹരണം: ശതമാനങ്ങളും നിശ്ചിത നീളങ്ങളും ഉപയോഗിച്ചുള്ള എക്സ്ട്രിൻസിക് സൈസിംഗ്

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

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, ആദ്യത്തെ കോളത്തിന്റെ വീതി 200px ആയി നിശ്ചയിച്ചിരിക്കുന്നു. രണ്ടാമത്തെ കോളം ഗ്രിഡ് കണ്ടെയ്നറിന്റെ വീതിയുടെ 50% എടുക്കും. അവസാനമായി, മൂന്നാമത്തെ കോളം 1fr യൂണിറ്റ് ഉപയോഗിക്കുന്നു, അതിനാൽ ആദ്യത്തെ രണ്ട് കോളങ്ങൾ വലുപ്പം ക്രമീകരിച്ചതിന് ശേഷം ശേഷിക്കുന്ന സ്ഥലം അത് എടുക്കും.

ഇൻട്രിൻസിക്, എക്സ്ട്രിൻസിക് സൈസിംഗ് സംയോജിപ്പിക്കൽ: minmax()

minmax() ഫംഗ്ഷൻ ഇൻട്രിൻസിക്, എക്സ്ട്രിൻസിക് സൈസിംഗ് സംയോജിപ്പിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു, ഇത് ട്രാക്ക് വലുപ്പങ്ങളിൽ കൂടുതൽ നിയന്ത്രണം നൽകുന്നു. ഇത് ഒരു ട്രാക്കിനായി സ്വീകാര്യമായ വലുപ്പങ്ങളുടെ ഒരു ശ്രേണി നിർവചിക്കുന്നു, മിനിമം, മാക്സിമം മൂല്യങ്ങൾ വ്യക്തമാക്കുന്നു.

            minmax(min, max)
            

              
                Copy
              
            
          

• 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;
}

            

              
                Copy
              
            
          

ഇവിടെ, 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;
}

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, ആദ്യത്തെ കോളം അതിന്റെ ഏറ്റവും കുറഞ്ഞ ഉള്ളടക്ക വലുപ്പത്തിന്റെ അത്രയും വീതിയുള്ളതായിരിക്കും, എന്നാൽ 300px-ൽ കൂടുകയുമില്ല. രണ്ടാമത്തെ കോളം ശേഷിക്കുന്ന സ്ഥലം എടുക്കും.

പ്രായോഗിക പ്രയോഗങ്ങളും മികച്ച രീതികളും

ഇൻട്രിൻസിക്, എക്സ്ട്രിൻസിക് സൈസിംഗ് മനസ്സിലാക്കുന്നത് കരുത്തുറ്റതും പൊരുത്തപ്പെടാൻ കഴിയുന്നതുമായ ലേഔട്ടുകൾ നിർമ്മിക്കുന്നതിന് നിർണ്ണായകമാണ്. മനസ്സിൽ സൂക്ഷിക്കേണ്ട ചില പ്രായോഗിക പ്രയോഗങ്ങളും മികച്ച രീതികളും ഇതാ:

• റെസ്‌പോൺസീവ് നാവിഗേഷൻ: നാവിഗേഷൻ ബാറിൽ കുറഞ്ഞ വീതിയുള്ളതും എന്നാൽ ലഭ്യമായ സ്ഥലം നിറയ്ക്കാൻ വികസിക്കാൻ കഴിയുന്നതുമായ നാവിഗേഷൻ ഇനങ്ങൾ നിർമ്മിക്കാൻ minmax() ഉപയോഗിക്കുക.
• ഫ്ലെക്സിബിൾ കാർഡ് ലേഔട്ടുകൾ: വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങളുമായി സ്വയമേവ ക്രമീകരിക്കുന്ന കാർഡ് ലേഔട്ടുകൾ നിർമ്മിക്കാൻ repeat(auto-fit, minmax()) ഉപയോഗിക്കുക, ചെറിയ സ്ക്രീനുകളിൽ കാർഡുകൾ ഭംഗിയായി റാപ്പ് ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കുക.
• ഉള്ളടക്കത്തിനനുസരിച്ചുള്ള സൈഡ്‌ബാറുകൾ: സൈഡ്‌ബാറുകളുടെ ഉള്ളടക്കത്തെ അടിസ്ഥാനമാക്കി വലുപ്പം ക്രമീകരിക്കുന്നതിന് min-content അല്ലെങ്കിൽ max-content ഉപയോഗിക്കുക, ആവശ്യമനുസരിച്ച് അവയെ വികസിപ്പിക്കാനും ചുരുക്കാനും അനുവദിക്കുക.
• നിശ്ചിത വീതികൾ ഒഴിവാക്കുക: വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങൾക്കും ഉപയോക്തൃ മുൻഗണനകൾക്കും അനുയോജ്യമായ ലേഔട്ടുകൾ നിർമ്മിക്കുന്നതിന്, നിശ്ചിത വീതികളുടെ (px) ഉപയോഗം കുറച്ച് ആപേക്ഷിക യൂണിറ്റുകൾക്ക് (%, fr, em) മുൻഗണന നൽകുക.
• സമഗ്രമായി പരിശോധിക്കുക: നിങ്ങളുടെ ഗ്രിഡ് ലേഔട്ടുകൾ ശരിയായി റെൻഡർ ചെയ്യുന്നുണ്ടെന്നും സ്ഥിരമായ ഉപയോക്തൃ അനുഭവം നൽകുന്നുണ്ടെന്നും ഉറപ്പാക്കാൻ വിവിധ ഉപകരണങ്ങളിലും സ്ക്രീൻ വലുപ്പങ്ങളിലും എപ്പോഴും പരിശോധിക്കുക.

അഡ്വാൻസ്ഡ് ഗ്രിഡ് സൈസിംഗ് ടെക്നിക്കുകൾ

അടിസ്ഥാന കീവേഡുകൾക്കും ഫംഗ്ഷനുകൾക്കും അപ്പുറം, ട്രാക്ക് വലുപ്പങ്ങൾ കൃത്യമായി ക്രമീകരിക്കുന്നതിന് സിഎസ്എസ് ഗ്രിഡ് കൂടുതൽ അഡ്വാൻസ്ഡ് ടെക്നിക്കുകൾ വാഗ്ദാനം ചെയ്യുന്നു.

repeat() ഫംഗ്ഷൻ

ഒരേ വലുപ്പത്തിലുള്ള ഒന്നിലധികം ട്രാക്കുകൾ നിർമ്മിക്കുന്നത് repeat() ഫംഗ്ഷൻ ലളിതമാക്കുന്നു. ഇത് രണ്ട് ആർഗ്യുമെന്റുകൾ എടുക്കുന്നു: ആവർത്തനങ്ങളുടെ എണ്ണവും ട്രാക്കിന്റെ വലുപ്പവും.

            repeat(number, track-size)
            

              
                Copy
              
            
          

ഉദാഹരണത്തിന്:

            grid-template-columns: repeat(3, 1fr);
            

              
                Copy
              
            
          

ഇത് ഇതിന് തുല്യമാണ്:

            grid-template-columns: 1fr 1fr 1fr;
            

              
                Copy
              
            
          

ലഭ്യമായ സ്ഥലത്തിനനുസരിച്ച് സ്വയമേവ ക്രമീകരിക്കുന്ന റെസ്‌പോൺസീവ് ഗ്രിഡ് ലേഔട്ടുകൾ നിർമ്മിക്കുന്നതിന് auto-fit, auto-fill കീവേഡുകൾക്കൊപ്പം repeat() ഫംഗ്ഷൻ ഉപയോഗിക്കാനും കഴിയും.

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;
}

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, ഗ്രിഡ് കുറഞ്ഞത് 200px വീതിയുള്ളതും എന്നാൽ ശേഷിക്കുന്ന സ്ഥലം നിറയ്ക്കാൻ വികസിക്കാൻ കഴിയുന്നതുമായ പരമാവധി കോളങ്ങൾ സൃഷ്ടിക്കും. എല്ലാ കോളങ്ങളും നിറയ്ക്കാൻ ആവശ്യമായ ഇനങ്ങൾ ഇല്ലെങ്കിൽ, ശൂന്യമായ കോളങ്ങൾ 0 വീതിയിലേക്ക് ചുരുങ്ങും.

ഇൻ്റർനാഷണലൈസേഷൻ (i18n), ലോക്കലൈസേഷൻ (l10n) എന്നിവയ്ക്കുള്ള പരിഗണനകൾ

ഒരു ആഗോള പ്രേക്ഷകർക്കായി ലേഔട്ടുകൾ രൂപകൽപ്പന ചെയ്യുമ്പോൾ, വ്യത്യസ്ത ഭാഷകളുടെയും എഴുത്ത് ദിശകളുടെയും സ്വാധീനം പരിഗണിക്കേണ്ടത് പ്രധാനമാണ്. ട്രാക്ക് വലുപ്പങ്ങൾ ശരിയായി ക്രമീകരിച്ചിട്ടില്ലെങ്കിൽ, ഭാഷകൾക്കിടയിൽ ടെക്സ്റ്റിന്റെ നീളം ഗണ്യമായി വ്യത്യാസപ്പെടാം, ഇത് ലേഔട്ടിനെ ബാധിച്ചേക്കാം. അന്താരാഷ്ട്രവൽക്കരിച്ച ലേഔട്ടുകൾ രൂപകൽപ്പന ചെയ്യുന്നതിനുള്ള ചില നുറുങ്ങുകൾ ഇതാ:

• ആപേക്ഷിക യൂണിറ്റുകൾ ഉപയോഗിക്കുക: ഉപയോക്താവിൻ്റെ ഫോണ്ട് വലുപ്പ മുൻഗണനകൾ അനുസരിച്ച് ടെക്സ്റ്റ് സ്കെയിൽ ചെയ്യാൻ അനുവദിക്കുന്നതിന് പിക്സലുകൾ പോലുള്ള നിശ്ചിത യൂണിറ്റുകളേക്കാൾ em, rem, ശതമാനം പോലുള്ള ആപേക്ഷിക യൂണിറ്റുകൾക്ക് മുൻഗണന നൽകുക.
• ഇൻട്രിൻസിക് സൈസിംഗ്: ഭാഷ പരിഗണിക്കാതെ തന്നെ, ഉള്ളടക്കത്തിൻ്റെ വലുപ്പത്തിനനുസരിച്ച് ട്രാക്കുകൾ ക്രമീകരിക്കപ്പെടുന്നുവെന്ന് ഉറപ്പാക്കാൻ min-content, max-content, fit-content() പോലുള്ള ഇൻട്രിൻസിക് സൈസിംഗ് കീവേഡുകൾ ഉപയോഗിക്കുക.
• ലോജിക്കൽ പ്രോപ്പർട്ടികൾ: ഇടത്തുനിന്ന് വലത്തോട്ടും (LTR) വലത്തുനിന്ന് ഇടത്തോട്ടും (RTL) ഉള്ള ഭാഷകളെ പിന്തുണയ്ക്കുന്നതിന് left, right പോലുള്ള ഫിസിക്കൽ പ്രോപ്പർട്ടികൾക്ക് പകരം inline-start, inline-end പോലുള്ള ലോജിക്കൽ പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കുക.
• പരിശോധന: സാധ്യമായ പ്രശ്നങ്ങൾ തിരിച്ചറിയാനും പരിഹരിക്കാനും വ്യത്യസ്ത ഭാഷകളും എഴുത്ത് ദിശകളും ഉപയോഗിച്ച് നിങ്ങളുടെ ലേഔട്ടുകൾ പരിശോധിക്കുക. വ്യത്യസ്ത ഭാഷകളിൽ കാണാനിടയുള്ള നീണ്ട സ്ട്രിംഗുകൾ ഉപയോഗിച്ച് പരീക്ഷിക്കുക.

ഉപസംഹാരം

സിഎസ്എസ് ഗ്രിഡ് ട്രാക്ക് സൈസിംഗ് റെസ്‌പോൺസീവും പൊരുത്തപ്പെടാൻ കഴിയുന്നതുമായ വെബ് ലേഔട്ടുകൾ നിർമ്മിക്കുന്നതിനുള്ള ശക്തവും വൈവിധ്യപൂർണ്ണവുമായ ഒരു ഉപകരണമാണ്. ഇൻട്രിൻസിക്, എക്സ്ട്രിൻസിക് സൈസിംഗിന്റെ ആശയങ്ങൾ മനസ്സിലാക്കുകയും, minmax() ഫംഗ്ഷൻ ഉപയോഗിക്കുകയും, repeat() ഫംഗ്ഷൻ പ്രയോജനപ്പെടുത്തുകയും ചെയ്യുന്നതിലൂടെ, വിവിധ ഉള്ളടക്കങ്ങൾക്കും സ്ക്രീൻ വലുപ്പങ്ങൾക്കും അനുയോജ്യമായ ലേഔട്ടുകൾ നിങ്ങൾക്ക് നിർമ്മിക്കാൻ കഴിയും. ഒരു ആഗോള പ്രേക്ഷകർക്കായി രൂപകൽപ്പന ചെയ്യുമ്പോൾ ഇൻ്റർനാഷണലൈസേഷന്റെയും ലോക്കലൈസേഷന്റെയും സ്വാധീനം പരിഗണിക്കാൻ ഓർമ്മിക്കുക.

വ്യത്യസ്ത ട്രാക്ക് സൈസിംഗ് ടെക്നിക്കുകൾ ഉപയോഗിച്ച് പരീക്ഷിക്കുകയും സിഎസ്എസ് ഗ്രിഡിന്റെ അനന്തമായ സാധ്യതകൾ പര്യവേക്ഷണം ചെയ്യുകയും ചെയ്യുക. പരിശീലനത്തിലൂടെയും ഈ ആശയങ്ങളെക്കുറിച്ചുള്ള ഉറച്ച ധാരണയിലൂടെയും, ഏത് പ്രോജക്റ്റിനും വേണ്ടി സങ്കീർണ്ണവും ഉപയോക്തൃ-സൗഹൃദവുമായ വെബ് ലേഔട്ടുകൾ നിർമ്മിക്കാൻ നിങ്ങൾ സജ്ജരാകും.