സിഎസ്എസ് ഗ്രിഡ് ട്രാക്ക് ഫംഗ്‌ഷനുകൾ: ഡൈനാമിക് ലേയൗട്ട് സൈസിംഗിൽ പ്രാവീണ്യം നേടാം

സിഎസ്എസ് ഗ്രിഡ് എന്നത് വെബ് ഡെവലപ്പർമാർക്ക് സങ്കീർണ്ണവും റെസ്‌പോൺസീവുമായ ഡിസൈനുകൾ എളുപ്പത്തിൽ നിർമ്മിക്കാൻ സഹായിക്കുന്ന ഒരു ശക്തമായ ലേയൗട്ട് സിസ്റ്റമാണ്. സിഎസ്എസ് ഗ്രിഡിൻ്റെ ഫ്ലെക്സിബിലിറ്റിയുടെ കാതൽ അതിൻ്റെ ട്രാക്ക് ഫംഗ്ഷനുകളാണ്. fr, minmax(), auto, fit-content() എന്നിവയുൾപ്പെടെയുള്ള ഈ ഫംഗ്ഷനുകൾ, ഗ്രിഡ് ട്രാക്കുകളുടെ (വരികളും നിരകളും) വലുപ്പം ചലനാത്മകമായി നിർവചിക്കുന്നതിനുള്ള സംവിധാനങ്ങൾ നൽകുന്നു. സിഎസ്എസ് ഗ്രിഡിൽ പ്രാവീണ്യം നേടുന്നതിനും വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങളോടും ഉള്ളടക്കത്തിലെ വ്യത്യാസങ്ങളോടും തടസ്സങ്ങളില്ലാതെ പൊരുത്തപ്പെടുന്ന ലേയൗട്ടുകൾ നിർമ്മിക്കുന്നതിനും ഈ ഫംഗ്ഷനുകൾ മനസ്സിലാക്കുന്നത് നിർണായകമാണ്.

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

പ്രത്യേക ട്രാക്ക് ഫംഗ്ഷനുകളിലേക്ക് കടക്കുന്നതിന് മുൻപ്, ഗ്രിഡ് ട്രാക്കുകൾ എന്താണെന്ന് മനസ്സിലാക്കേണ്ടത് അത്യാവശ്യമാണ്. ഒരു ഗ്രിഡ് ട്രാക്ക് എന്നത് ഏതെങ്കിലും രണ്ട് ഗ്രിഡ് ലൈനുകൾക്കിടയിലുള്ള സ്ഥലമാണ്. കോളങ്ങൾ ലംബമായ ട്രാക്കുകളും, വരികൾ തിരശ്ചീനമായ ട്രാക്കുകളുമാണ്. ഈ ട്രാക്കുകളുടെ വലുപ്പമാണ് ഗ്രിഡിനുള്ളിൽ ഉള്ളടക്കം എങ്ങനെ വിതരണം ചെയ്യപ്പെടുന്നു എന്ന് നിർണ്ണയിക്കുന്നത്.

fr യൂണിറ്റ്: ഫ്രാക്ഷണൽ സ്പേസ്

fr യൂണിറ്റ് ഗ്രിഡ് കണ്ടെയ്‌നറിലെ ലഭ്യമായ സ്ഥലത്തിൻ്റെ ഒരു ഭാഗത്തെ പ്രതിനിധീകരിക്കുന്നു. നിരകളോ വരികളോ ശേഷിക്കുന്ന സ്ഥലം ആനുപാതികമായി പങ്കിടുന്ന ഫ്ലെക്സിബിൾ ലേയൗട്ടുകൾ നിർമ്മിക്കുന്നതിനുള്ള ഒരു ശക്തമായ ഉപകരണമാണിത്. മറ്റ് നിശ്ചിത വലുപ്പമുള്ള ട്രാക്കുകൾക്കെല്ലാം സ്ഥലം നൽകിയതിന് ശേഷം ലഭ്യമായ ഇടം വിഭജിക്കുന്നതിനുള്ള ഒരു മാർഗമായി ഇതിനെ കരുതുക.

fr എങ്ങനെ പ്രവർത്തിക്കുന്നു

നിങ്ങൾ fr ഉപയോഗിച്ച് ഒരു ഗ്രിഡ് ട്രാക്കിൻ്റെ വലുപ്പം നിർവചിക്കുമ്പോൾ, ബ്രൗസർ ഏതെങ്കിലും നിശ്ചിത വലുപ്പമുള്ള ട്രാക്കുകളുടെ (ഉദാ. പിക്സലുകൾ, ems) വലുപ്പം മൊത്തം ഗ്രിഡ് കണ്ടെയ്‌നർ വലുപ്പത്തിൽ നിന്ന് കുറച്ചുകൊണ്ട് ലഭ്യമായ സ്ഥലം കണക്കാക്കുന്നു. ശേഷിക്കുന്ന സ്ഥലം fr യൂണിറ്റുകൾക്കിടയിൽ അവയുടെ അനുപാതമനുസരിച്ച് വിഭജിക്കപ്പെടുന്നു.

ഉദാഹരണം: തുല്യ കോളങ്ങൾ

ഒരേ വീതിയുള്ള മൂന്ന് കോളങ്ങൾ നിർമ്മിക്കാൻ, നിങ്ങൾക്ക് ഇനിപ്പറയുന്ന സിഎസ്എസ് ഉപയോഗിക്കാം:

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

            

              
                Copy
              
            
          

ഈ കോഡ് ലഭ്യമായ സ്ഥലം മൂന്ന് കോളങ്ങൾക്കിടയിൽ തുല്യമായി വിഭജിക്കുന്നു. ഗ്രിഡ് കണ്ടെയ്‌നറിന് 600px വീതിയുണ്ടെങ്കിൽ, ഓരോ കോളത്തിനും 200px വീതിയുണ്ടാകും (വിടവുകളോ ബോർഡറുകളോ ഇല്ലെന്ന് കരുതുക).

ഉദാഹരണം: ആനുപാതിക കോളങ്ങൾ

വ്യത്യസ്ത അനുപാതങ്ങളുള്ള കോളങ്ങൾ നിർമ്മിക്കാൻ, നിങ്ങൾക്ക് വ്യത്യസ്ത fr മൂല്യങ്ങൾ ഉപയോഗിക്കാം:

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

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, ആദ്യത്തെ കോളം മറ്റ് രണ്ട് കോളങ്ങളെക്കാൾ ഇരട്ടി സ്ഥലം എടുക്കും. ഗ്രിഡ് കണ്ടെയ്‌നറിന് 600px വീതിയുണ്ടെങ്കിൽ, ആദ്യത്തെ കോളം 300px വീതിയും മറ്റ് രണ്ട് കോളങ്ങൾക്ക് 150px വീതവും വീതിയുണ്ടാകും.

പ്രായോഗിക ഉപയോഗം: റെസ്‌പോൺസീവ് സൈഡ്ബാർ ലേയൗട്ട്

റെസ്‌പോൺസീവ് സൈഡ്ബാർ ലേയൗട്ടുകൾ നിർമ്മിക്കാൻ fr യൂണിറ്റ് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്. ഒരു നിശ്ചിത വീതിയുള്ള സൈഡ്ബാറും ഫ്ലെക്സിബിൾ ആയ പ്രധാന ഉള്ളടക്ക ഏരിയയുമുള്ള ഒരു ലേയൗട്ട് പരിഗണിക്കുക:

            .grid-container {
  display: grid;
  grid-template-columns: 200px 1fr;
}

.sidebar {
  /* Sidebar styles */
}

.main-content {
  /* Main content styles */
}

            

              
                Copy
              
            
          

ഈ സജ്ജീകരണത്തിൽ, സൈഡ്ബാറിന് എപ്പോഴും 200px വീതിയുണ്ടാകും, അതേസമയം പ്രധാന ഉള്ളടക്ക ഏരിയ ശേഷിക്കുന്ന സ്ഥലം നിറയ്ക്കാൻ വികസിക്കും. ഈ ലേയൗട്ട് വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങളുമായി സ്വയമേവ പൊരുത്തപ്പെടുന്നു, ഉള്ളടക്കം എല്ലായ്പ്പോഴും മികച്ച രീതിയിൽ പ്രദർശിപ്പിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.

minmax() ഫംഗ്ഷൻ: ഫ്ലെക്സിബിൾ സൈസ് കൺസ്ട്രെയിൻ്റുകൾ

minmax() ഫംഗ്ഷൻ ഒരു ഗ്രിഡ് ട്രാക്കിന് സ്വീകാര്യമായ വലുപ്പങ്ങളുടെ ഒരു ശ്രേണി നിർവചിക്കുന്നു. ഇതിന് രണ്ട് ആർഗ്യുമെൻ്റുകളുണ്ട്: ഒരു മിനിമം വലുപ്പവും ഒരു മാക്സിമം വലുപ്പവും.

            minmax(min, max)

            

              
                Copy
              
            
          

ഗ്രിഡ് ട്രാക്ക് എപ്പോഴും കുറഞ്ഞത് മിനിമം വലുപ്പത്തിലായിരിക്കും, എന്നാൽ ലഭ്യമായ സ്ഥലമുണ്ടെങ്കിൽ പരമാവധി വലുപ്പം വരെ വളരാനും കഴിയും. ഉള്ളടക്കത്തിൻ്റെ വ്യത്യാസപ്പെടുന്ന നീളത്തിനും സ്ക്രീൻ വലുപ്പങ്ങൾക്കും അനുസരിച്ച് പൊരുത്തപ്പെടുന്ന റെസ്‌പോൺസീവ് ലേയൗട്ടുകൾ നിർമ്മിക്കുന്നതിന് ഈ ഫംഗ്ഷൻ വിലമതിക്കാനാവാത്തതാണ്.

ഉദാഹരണം: കോളത്തിൻ്റെ വീതി പരിമിതപ്പെടുത്തുന്നു

ഒരു കോളം വളരെ ഇടുങ്ങിയതോ വളരെ വീതിയുള്ളതോ ആകില്ലെന്ന് ഉറപ്പാക്കാൻ, നിങ്ങൾക്ക് minmax() ഉപയോഗിക്കാം:

            .grid-container {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 1fr;
}

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, ആദ്യത്തെ കോളത്തിന് കുറഞ്ഞത് 200px വീതിയുണ്ടാകും, എന്നാൽ ലഭ്യമായ സ്ഥലം നിറയ്ക്കാൻ അതിന് വളരാനും കഴിയും, 1fr നിർവചിച്ച ശേഷിക്കുന്ന സ്ഥലത്തിൻ്റെ ഒരു ഭാഗം വരെ. ഇത് ചെറിയ സ്ക്രീനുകളിൽ കോളം വളരെ ഇടുങ്ങിയതാകുന്നതും വലിയ സ്ക്രീനുകളിൽ അമിതമായി വീതിയുള്ളതാകുന്നതും തടയുന്നു. രണ്ടാമത്തെ കോളം ശേഷിക്കുന്ന സ്ഥലം ഒരു ഭാഗമായി എടുക്കുന്നു.

ഉദാഹരണം: ഉള്ളടക്കം ഓവർഫ്ലോ ആകുന്നത് തടയുന്നു

ഉള്ളടക്കം അതിൻ്റെ കണ്ടെയ്‌നറിൽ നിന്ന് കവിഞ്ഞൊഴുകുന്നത് തടയാനും minmax() ഉപയോഗിക്കാം. വ്യത്യാസമുള്ള അളവിൽ ടെക്സ്റ്റ് ഉൾക്കൊള്ളേണ്ട ഒരു കോളം ഉള്ള ഒരു സാഹചര്യം പരിഗണിക്കുക:

            .grid-container {
  display: grid;
  grid-template-columns: 100px minmax(150px, auto) 100px;
}

            

              
                Copy
              
            
          

ഇവിടെ, നടുവിലുള്ള കോളത്തിന് കുറഞ്ഞത് 150px വീതിയുണ്ടാകും. ഉള്ളടക്കത്തിന് കൂടുതൽ സ്ഥലം ആവശ്യമുണ്ടെങ്കിൽ, കോളം അത് ഉൾക്കൊള്ളാൻ വികസിക്കും. പരമാവധി മൂല്യമായി auto എന്ന കീവേഡ്, ട്രാക്കിനെ അതിനുള്ളിലെ ഉള്ളടക്കത്തെ അടിസ്ഥാനമാക്കി വലുപ്പം ക്രമീകരിക്കാൻ പറയുന്നു, ഉള്ളടക്കം ഒരിക്കലും കവിഞ്ഞൊഴുകുന്നില്ലെന്ന് ഉറപ്പാക്കുന്നു. വശങ്ങളിലുള്ള രണ്ട് കോളങ്ങളും 100px വീതിയിൽ സ്ഥിരമായി നിലകൊള്ളുന്നു.

പ്രായോഗിക ഉപയോഗം: റെസ്‌പോൺസീവ് ഇമേജ് ഗാലറി

ഒരു ഇമേജ് ഗാലറി നിർമ്മിക്കുന്നത് പരിഗണിക്കുക, അവിടെ നിങ്ങൾക്ക് ചിത്രങ്ങൾ ഒരു വരിയിൽ പ്രദർശിപ്പിക്കണം, എന്നാൽ ചെറിയ സ്ക്രീനുകളിൽ അവ വളരെ ചെറുതാകുകയോ വലിയ സ്ക്രീനുകളിൽ വളരെ വലുതാകുകയോ ചെയ്യരുതെന്ന് ഉറപ്പാക്കണം:

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

.grid-item {
  /* Image styles */
}

            

              
                Copy
              
            
          

`repeat(auto-fit, minmax(150px, 1fr))` എന്നത് ഒരു ശക്തമായ സംയോജനമാണ്. `auto-fit` ലഭ്യമായ സ്ഥലത്തിനനുസരിച്ച് കോളങ്ങളുടെ എണ്ണം സ്വയമേവ ക്രമീകരിക്കുന്നു. `minmax(150px, 1fr)` ഓരോ ചിത്രത്തിനും കുറഞ്ഞത് 150px വീതിയുണ്ടെന്നും ലഭ്യമായ സ്ഥലം നിറയ്ക്കാൻ വളരാമെന്നും ഉറപ്പാക്കുന്നു. ഇത് വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങളുമായി പൊരുത്തപ്പെടുന്ന ഒരു റെസ്‌പോൺസീവ് ഇമേജ് ഗാലറി സൃഷ്ടിക്കുന്നു, സ്ഥിരമായ ഒരു കാഴ്ചാനുഭവം നൽകുന്നു. ചിത്രങ്ങൾ രൂപഭേദം വരാതെ ശരിയായി സ്ഥലം നിറയ്ക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ `.grid-item` സിഎസ്എസിലേക്ക് `object-fit: cover;` ചേർക്കുന്നത് പരിഗണിക്കുക.

auto കീവേഡ്: ഉള്ളടക്കത്തെ അടിസ്ഥാനമാക്കിയുള്ള സൈസിംഗ്

auto കീവേഡ്, അതിനുള്ളിലെ ഉള്ളടക്കത്തെ അടിസ്ഥാനമാക്കി ട്രാക്കിൻ്റെ വലുപ്പം ക്രമീകരിക്കാൻ ഗ്രിഡിനോട് നിർദ്ദേശിക്കുന്നു. ട്രാക്ക് ഉള്ളടക്കത്തിനനുസരിച്ച് വികസിക്കും, എന്നാൽ ഉള്ളടക്കത്തിൻ്റെ ഏറ്റവും കുറഞ്ഞ വലുപ്പത്തേക്കാൾ ചെറുതാകില്ല.

auto എങ്ങനെ പ്രവർത്തിക്കുന്നു

നിങ്ങൾ auto ഉപയോഗിക്കുമ്പോൾ, ഗ്രിഡ് ട്രാക്കിൻ്റെ വലുപ്പം അതിനുള്ളിലെ ഉള്ളടക്കത്തിൻ്റെ സ്വാഭാവിക വലുപ്പത്താൽ നിർണ്ണയിക്കപ്പെടുന്നു. ഉള്ളടക്കത്തിൻ്റെ വലുപ്പം പ്രവചിക്കാൻ കഴിയാത്തതോ വ്യത്യാസമുള്ളതോ ആയ സാഹചര്യങ്ങളിൽ ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.

ഉദാഹരണം: ടെക്സ്റ്റിനായി ഫ്ലെക്സിബിൾ കോളം

വ്യത്യാസമുള്ള അളവിലുള്ള ടെക്സ്റ്റ് ഉൾക്കൊള്ളേണ്ട ഒരു കോളം ഉള്ള ഒരു ലേയൗട്ട് പരിഗണിക്കുക:

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

            

              
                Copy
              
            
          

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

ഉദാഹരണം: വ്യത്യാസമുള്ള ഉയരങ്ങളുള്ള വരികൾ

നിങ്ങൾക്ക് വരികൾക്കായും auto ഉപയോഗിക്കാം. ഉയരത്തിൽ വ്യത്യാസമുള്ള ഉള്ളടക്കമുള്ള വരികൾ ഉള്ളപ്പോൾ ഇത് ഉപയോഗപ്രദമാണ്:

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

            

              
                Copy
              
            
          

ഈ സാഹചര്യത്തിൽ, ഓരോ വരിയും അതിനുള്ളിലെ ഉള്ളടക്കത്തിനനുസരിച്ച് അതിൻ്റെ ഉയരം സ്വയമേവ ക്രമീകരിക്കും. ബ്ലോഗ് പോസ്റ്റുകൾ അല്ലെങ്കിൽ വ്യത്യസ്ത അളവിലുള്ള ടെക്സ്റ്റും ചിത്രങ്ങളുമുള്ള ലേഖനങ്ങൾ പോലുള്ള ഡൈനാമിക് ഉള്ളടക്കമുള്ള ലേയൗട്ടുകൾ നിർമ്മിക്കാൻ ഇത് സഹായകമാണ്.

പ്രായോഗിക ഉപയോഗം: റെസ്‌പോൺസീവ് നാവിഗേഷൻ മെനു

ഓരോ മെനു ഐറ്റത്തിൻ്റെയും വീതി അതിൻ്റെ ഉള്ളടക്കത്തിനനുസരിച്ച് ക്രമീകരിക്കുന്ന ഒരു റെസ്‌പോൺസീവ് നാവിഗേഷൻ മെനു നിർമ്മിക്കാൻ നിങ്ങൾക്ക് auto ഉപയോഗിക്കാം:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, auto);
  grid-gap: 10px;
}

.menu-item {
  /* Menu item styles */
}

            

              
                Copy
              
            
          

`repeat(auto-fit, auto)` ഉപയോഗിക്കുന്നത് മെനു ഇനങ്ങൾ ഉൾക്കൊള്ളാൻ ആവശ്യമായത്ര കോളങ്ങൾ സൃഷ്ടിക്കും, ഓരോ ഇനത്തിൻ്റെയും വീതി അതിൻ്റെ ഉള്ളടക്കത്താൽ നിർണ്ണയിക്കപ്പെടും. `auto-fit` കീവേഡ് ചെറിയ സ്ക്രീനുകളിൽ ഇനങ്ങൾ അടുത്ത വരിയിലേക്ക് പോകുമെന്ന് ഉറപ്പാക്കുന്നു. ശരിയായ പ്രദർശനത്തിനും ഭംഗിക്കും വേണ്ടി `menu-item`-ന് സ്റ്റൈൽ നൽകാനും ഓർമ്മിക്കുക.

fit-content() ഫംഗ്ഷൻ: ഉള്ളടക്കത്തെ അടിസ്ഥാനമാക്കിയുള്ള സൈസിംഗ് പരിമിതപ്പെടുത്തുന്നു

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

            fit-content(max-size)

            

              
                Copy
              
            
          

fit-content() എങ്ങനെ പ്രവർത്തിക്കുന്നു

fit-content() ഫംഗ്ഷൻ അതിനുള്ളിലെ ഉള്ളടക്കത്തെ അടിസ്ഥാനമാക്കി ഗ്രിഡ് ട്രാക്കിൻ്റെ വലുപ്പം കണക്കാക്കുന്നു. എന്നിരുന്നാലും, ട്രാക്കിൻ്റെ വലുപ്പം ഫംഗ്ഷൻ്റെ ആർഗ്യുമെൻ്റിൽ വ്യക്തമാക്കിയ പരമാവധി വലുപ്പത്തേക്കാൾ കൂടുന്നില്ലെന്ന് ഇത് ഉറപ്പാക്കുന്നു.

ഉദാഹരണം: കോളത്തിൻ്റെ വികാസം പരിമിതപ്പെടുത്തുന്നു

ഒരു കോളം അതിൻ്റെ ഉള്ളടക്കത്തിനനുസരിച്ച് വികസിക്കണമെന്നും എന്നാൽ അത് വളരെ വീതിയുള്ളതാകരുതെന്നും നിങ്ങൾ ആഗ്രഹിക്കുന്ന ഒരു ലേയൗട്ട് പരിഗണിക്കുക:

            .grid-container {
  display: grid;
  grid-template-columns: 100px fit-content(300px) 1fr;
}

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, രണ്ടാമത്തെ കോളം അതിൻ്റെ ഉള്ളടക്കത്തിനനുസരിച്ച് വികസിക്കും, എന്നാൽ അതിൻ്റെ വീതി ഒരിക്കലും 300px-ൽ കൂടില്ല. ഉള്ളടക്കത്തിന് 300px-ൽ കൂടുതൽ ആവശ്യമുണ്ടെങ്കിൽ, കോളം 300px-ൽ ക്ലിപ്പ് ചെയ്യപ്പെടും (നിങ്ങൾ ഗ്രിഡ് ഐറ്റത്തിൽ `overflow: visible` സജ്ജീകരിച്ചിട്ടില്ലെങ്കിൽ). ആദ്യത്തെ കോളം ഒരു നിശ്ചിത വീതിയിൽ നിലനിൽക്കുന്നു, അവസാനത്തെ കോളത്തിന് ശേഷിക്കുന്ന സ്ഥലം ഒരു ഫ്രാക്ഷനായി ലഭിക്കുന്നു.

ഉദാഹരണം: വരിയുടെ ഉയരം നിയന്ത്രിക്കുന്നു

വരികളുടെ ഉയരം നിയന്ത്രിക്കുന്നതിന് നിങ്ങൾക്ക് fit-content() ഉപയോഗിക്കാം:

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

            

              
                Copy
              
            
          

ഇവിടെ, ആദ്യത്തെ വരി അതിൻ്റെ ഉള്ളടക്കത്തിനനുസരിച്ച് വികസിക്കും, എന്നാൽ അതിൻ്റെ ഉയരം ഒരിക്കലും 200px-ൽ കൂടില്ല. രണ്ടാമത്തെ വരി മൊത്തം ലഭ്യമായ ഉയരത്തിൻ്റെ ഒരു ഭാഗമായി ശേഷിക്കുന്ന സ്ഥലം എടുക്കും.

പ്രായോഗിക ഉപയോഗം: റെസ്‌പോൺസീവ് കാർഡ് ലേയൗട്ട്

കാർഡുകൾ അവയുടെ ഉള്ളടക്കത്തിനനുസരിച്ച് വികസിക്കണമെന്നും എന്നാൽ അവയുടെ വീതി പരിമിതപ്പെടുത്തണമെന്നും നിങ്ങൾ ആഗ്രഹിക്കുന്ന റെസ്‌പോൺസീവ് കാർഡ് ലേയൗട്ടുകൾ നിർമ്മിക്കാൻ fit-content() ഉപയോഗപ്രദമാണ്:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, fit-content(300px)));
  grid-gap: 10px;
}

.card {
  /* Card styles */
}

            

              
                Copy
              
            
          

ഈ കോഡ് ഒരു റെസ്‌പോൺസീവ് കാർഡ് ലേയൗട്ട് സൃഷ്ടിക്കുന്നു, അവിടെ ഓരോ കാർഡിനും കുറഞ്ഞത് 200px വീതിയുണ്ട്, അതിൻ്റെ ഉള്ളടക്കത്തിനനുസരിച്ച് വികസിക്കാനും കഴിയും, പരമാവധി 300px വരെ. `repeat(auto-fit, ...)` ചെറിയ സ്ക്രീനുകളിൽ കാർഡുകൾ അടുത്ത വരിയിലേക്ക് പോകുമെന്ന് ഉറപ്പാക്കുന്നു. റിപ്പീറ്റ് ഫംഗ്ഷനുള്ളിൽ, `fit-content`-നൊപ്പം `minmax` ഉപയോഗിക്കുന്നത് ഉയർന്ന തലത്തിലുള്ള നിയന്ത്രണം നൽകുന്നു - ഇനങ്ങൾ എല്ലായ്പ്പോഴും കുറഞ്ഞത് 200px വീതിയിലായിരിക്കുമെന്നും എന്നാൽ 300px-ൽ കൂടുതൽ വീതിയുള്ളതാകില്ലെന്നും ഉറപ്പാക്കുന്നു (ഉള്ളിലെ ഉള്ളടക്കം ഈ മൂല്യം കവിയുന്നില്ലെന്ന് കരുതുക). വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങളിൽ സ്ഥിരമായ ഒരു രൂപവും ഭാവവും വേണമെങ്കിൽ ഈ തന്ത്രം പ്രത്യേകിച്ചും വിലപ്പെട്ടതാണ്. ആഗ്രഹിക്കുന്ന രൂപം നേടുന്നതിന് `.card` ക്ലാസ്സിന് ഉചിതമായ പാഡിംഗ്, മാർജിനുകൾ, മറ്റ് ദൃശ്യപരമായ പ്രോപ്പർട്ടികൾ എന്നിവ നൽകാൻ മറക്കരുത്.

അഡ്വാൻസ്ഡ് ലേയൗട്ടുകൾക്കായി ട്രാക്ക് ഫംഗ്ഷനുകൾ സംയോജിപ്പിക്കുന്നു

സിഎസ്എസ് ഗ്രിഡ് ട്രാക്ക് ഫംഗ്ഷനുകളുടെ യഥാർത്ഥ ശക്തി, സങ്കീർണ്ണവും ചലനാത്മകവുമായ ലേയൗട്ടുകൾ നിർമ്മിക്കാൻ അവയെ സംയോജിപ്പിക്കുന്നതിലാണ്. fr, minmax(), auto, fit-content() എന്നിവ തന്ത്രപരമായി ഉപയോഗിക്കുന്നതിലൂടെ, നിങ്ങൾക്ക് വൈവിധ്യമാർന്ന റെസ്‌പോൺസീവും ഫ്ലെക്സിബിളുമായ ഡിസൈനുകൾ നേടാൻ കഴിയും.

ഉദാഹരണം: മിക്സഡ് യൂണിറ്റുകളും ഫംഗ്ഷനുകളും

ഒരു നിശ്ചിത വീതിയുള്ള സൈഡ്ബാർ, ഫ്ലെക്സിബിൾ ആയ പ്രധാന ഉള്ളടക്ക ഏരിയ, ഉള്ളടക്കത്തിനനുസരിച്ച് വികസിക്കുന്നതും എന്നാൽ പരമാവധി വീതിയുള്ളതുമായ ഒരു കോളം ഉള്ള ഒരു ലേയൗട്ട് പരിഗണിക്കുക:

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

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, ആദ്യത്തെ കോളം 200px-ൽ നിശ്ചയിച്ചിരിക്കുന്നു. രണ്ടാമത്തെ കോളം 1fr ഉപയോഗിച്ച് ശേഷിക്കുന്ന സ്ഥലം എടുക്കുന്നു. മൂന്നാമത്തെ കോളം അതിൻ്റെ ഉള്ളടക്കത്തിനനുസരിച്ച് വികസിക്കുന്നു, എന്നാൽ fit-content(400px) ഉപയോഗിച്ച് പരമാവധി 400px വീതിയിൽ പരിമിതപ്പെടുത്തിയിരിക്കുന്നു.

ഉദാഹരണം: സങ്കീർണ്ണമായ റെസ്‌പോൺസീവ് ഡിസൈൻ

ഒരു ഹെഡർ, സൈഡ്ബാർ, പ്രധാന ഉള്ളടക്കം, ഫൂട്ടർ എന്നിവയുള്ള ഒരു വെബ്സൈറ്റ് ലേയൗട്ടിൻ്റെ കൂടുതൽ സങ്കീർണ്ണമായ ഒരു ഉദാഹരണം നമുക്ക് സൃഷ്ടിക്കാം:

            .grid-container {
  display: grid;
  grid-template-columns: minmax(150px, 250px) 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  height: 100vh;
}

header {
  grid-area: header;
  /* Header styles */
}

.sidebar {
  grid-area: sidebar;
  /* Sidebar styles */
}

main {
  grid-area: main;
  /* Main content styles */
}

footer {
  grid-area: footer;
  /* Footer styles */
}

            

              
                Copy
              
            
          

ഈ ലേയൗട്ടിൽ:

• grid-template-columns രണ്ട് കോളങ്ങൾ നിർവചിക്കുന്നു: കുറഞ്ഞത് 150px വീതിയും പരമാവധി 250px വീതിയുമുള്ള ഒരു സൈഡ്ബാർ, 1fr ഉപയോഗിച്ച് ശേഷിക്കുന്ന സ്ഥലം എടുക്കുന്ന ഒരു പ്രധാന ഉള്ളടക്ക ഏരിയ.
• grid-template-rows മൂന്ന് വരികൾ നിർവചിക്കുന്നു: ഉള്ളടക്കത്തിനനുസരിച്ച് സ്വയമേവ ഉയരം ക്രമീകരിക്കുന്ന ഒരു ഹെഡറും ഫൂട്ടറും (auto), 1fr ഉപയോഗിച്ച് ശേഷിക്കുന്ന ലംബമായ സ്ഥലം എടുക്കുന്ന ഒരു പ്രധാന ഉള്ളടക്ക ഏരിയ.
• grid-template-areas പ്രോപ്പർട്ടി പേരിട്ടിട്ടുള്ള ഗ്രിഡ് ഏരിയകൾ ഉപയോഗിച്ച് ലേയൗട്ടിൻ്റെ ഘടന നിർവചിക്കുന്നു.

ഈ ഉദാഹരണം, ഫ്ലെക്സിബിളും റെസ്‌പോൺസീവുമായ ഒരു വെബ്സൈറ്റ് ലേയൗട്ട് നിർമ്മിക്കാൻ ട്രാക്ക് ഫംഗ്ഷനുകളും ഗ്രിഡ് ഏരിയകളും എങ്ങനെ സംയോജിപ്പിക്കാമെന്ന് കാണിക്കുന്നു. ശരിയായ ദൃശ്യപരമായ അവതരണം ഉറപ്പാക്കാൻ ഓരോ വിഭാഗത്തിനും (ഹെഡർ, സൈഡ്ബാർ, മെയിൻ, ഫൂട്ടർ) ഉചിതമായ സ്റ്റൈലിംഗ് ചേർക്കാൻ ഓർമ്മിക്കുക.

സിഎസ്എസ് ഗ്രിഡ് ട്രാക്ക് ഫംഗ്ഷനുകൾ ഉപയോഗിക്കുന്നതിനുള്ള മികച്ച രീതികൾ

സിഎസ്എസ് ഗ്രിഡ് ട്രാക്ക് ഫംഗ്ഷനുകൾ പരമാവധി പ്രയോജനപ്പെടുത്താൻ, ഇനിപ്പറയുന്ന മികച്ച രീതികൾ പരിഗണിക്കുക:

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

സിഎസ്എസ് ഗ്രിഡിനുള്ള ആഗോള പരിഗണനകൾ

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

• ലേയൗട്ട് ദിശ (direction പ്രോപ്പർട്ടി): ഗ്രിഡ് ലേയൗട്ടിൻ്റെ ദിശ മാറ്റാൻ direction പ്രോപ്പർട്ടി ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, അറബി, ഹീബ്രു പോലുള്ള വലത്തുനിന്ന് ഇടത്തോട്ടുള്ള (RTL) ഭാഷകളിൽ, ലേയൗട്ട് ദിശ വിപരീതമാക്കാൻ നിങ്ങൾക്ക് direction: rtl; സജ്ജീകരിക്കാം. സിഎസ്എസ് ഗ്രിഡ് ലേയൗട്ട് ദിശയുമായി സ്വയമേവ പൊരുത്തപ്പെടുന്നു, ലേയൗട്ട് വ്യത്യസ്ത ഭാഷകളിൽ ശരിയായി പ്രദർശിപ്പിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.
• ലോജിക്കൽ പ്രോപ്പർട്ടികൾ (inset-inline-start, inset-inline-end, തുടങ്ങിയവ): left, right പോലുള്ള ഫിസിക്കൽ പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കുന്നതിന് പകരം, inset-inline-start, inset-inline-end പോലുള്ള ലോജിക്കൽ പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കുക. ഈ പ്രോപ്പർട്ടികൾ ലേയൗട്ട് ദിശയുമായി സ്വയമേവ പൊരുത്തപ്പെടുന്നു, LTR, RTL ഭാഷകളിൽ ലേയൗട്ട് സ്ഥിരതയുള്ളതാണെന്ന് ഉറപ്പാക്കുന്നു.
• ഫോണ്ട് വലുപ്പങ്ങൾ: നിങ്ങളുടെ ഗ്രിഡ് ഘടകങ്ങളിൽ ഉപയോഗിക്കുന്ന ഫോണ്ട് വലുപ്പങ്ങളെക്കുറിച്ച് ശ്രദ്ധിക്കുക. വ്യത്യസ്ത ഭാഷകൾക്ക് മികച്ച വായനാക്ഷമതയ്ക്കായി വ്യത്യസ്ത ഫോണ്ട് വലുപ്പങ്ങൾ ആവശ്യമായി വന്നേക്കാം. ഉപയോക്താവിൻ്റെ മുൻഗണനകൾക്കനുസരിച്ച് ഫോണ്ട് വലുപ്പങ്ങൾ സ്കെയിൽ ചെയ്യാൻ അനുവദിക്കുന്നതിന് em അല്ലെങ്കിൽ rem പോലുള്ള ആപേക്ഷിക യൂണിറ്റുകൾ ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.
• തീയതി, നമ്പർ ഫോർമാറ്റുകൾ: നിങ്ങളുടെ ഗ്രിഡ് ലേയൗട്ടിൽ തീയതികളോ നമ്പറുകളോ ഉൾപ്പെടുന്നുവെങ്കിൽ, ഉപയോക്താവിൻ്റെ ലൊക്കേലിനായി അവ ശരിയായി ഫോർമാറ്റ് ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക. ഉപയോക്താവിൻ്റെ ഭാഷയും പ്രദേശ ക്രമീകരണങ്ങളും അനുസരിച്ച് തീയതികളും നമ്പറുകളും ഫോർമാറ്റ് ചെയ്യുന്നതിന് ജാവാസ്ക്രിപ്റ്റ് അല്ലെങ്കിൽ ഒരു സെർവർ-സൈഡ് ലൈബ്രറി ഉപയോഗിക്കുക.
• ചിത്രങ്ങളും ഐക്കണുകളും: ചില ചിത്രങ്ങൾക്കും ഐക്കണുകൾക്കും വ്യത്യസ്ത സംസ്കാരങ്ങളിൽ വ്യത്യസ്ത അർത്ഥങ്ങളോ സൂചനകളോ ഉണ്ടാകാമെന്ന് അറിഞ്ഞിരിക്കുക. കുറ്റകരമായതോ സാംസ്കാരികമായി അനുചിതമായതോ ആയ ചിത്രങ്ങളോ ഐക്കണുകളോ ഉപയോഗിക്കുന്നത് ഒഴിവാക്കുക. ഉദാഹരണത്തിന്, ഒരു സംസ്കാരത്തിൽ പോസിറ്റീവ് ആയി കണക്കാക്കുന്ന ഒരു കൈ ആംഗ്യം മറ്റൊന്നിൽ കുറ്റകരമായി കണക്കാക്കാം.
• വിവർത്തനവും പ്രാദേശികവൽക്കരണവും: നിങ്ങളുടെ വെബ്സൈറ്റ് ഒന്നിലധികം ഭാഷകളിൽ ലഭ്യമാണെങ്കിൽ, തലക്കെട്ടുകൾ, ലേബലുകൾ, ഉള്ളടക്കം എന്നിവയുൾപ്പെടെ നിങ്ങളുടെ ഗ്രിഡ് ലേയൗട്ടിലെ എല്ലാ ടെക്സ്റ്റും വിവർത്തനം ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക. വിവർത്തന പ്രക്രിയ കാര്യക്ഷമമാക്കാനും വ്യത്യസ്ത ഭാഷകളിൽ സ്ഥിരത ഉറപ്പാക്കാനും ഒരു വിവർത്തന മാനേജ്മെൻ്റ് സിസ്റ്റം ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.

ഉപസംഹാരം

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

പരിശീലനത്തിലൂടെയും പരീക്ഷണങ്ങളിലൂടെയും, നിങ്ങൾക്ക് സിഎസ്എസ് ഗ്രിഡ് ട്രാക്ക് ഫംഗ്ഷനുകളുടെ മുഴുവൻ ശക്തിയും പ്രയോജനപ്പെടുത്താനും നിങ്ങളുടെ വെബ് ഡെവലപ്‌മെൻ്റ് കഴിവുകൾ ഉയർത്തുന്നതും നിങ്ങളുടെ പ്രേക്ഷകർക്ക് മികച്ച ഉപയോക്തൃ അനുഭവം നൽകുന്നതുമായ അതിശയകരവും റെസ്‌പോൺസീവുമായ ലേയൗട്ടുകൾ നിർമ്മിക്കാനും കഴിയും.