സിഎസ്എസ് ഗ്രിഡ് ട്രാക്ക് ഫംഗ്ഷനുകൾ: റെസ്പോൺസീവ് ഡിസൈനിനായുള്ള ഡൈനാമിക് ലേഔട്ട് സൈസിംഗ്

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

എന്താണ് സിഎസ്എസ് ഗ്രിഡ് ട്രാക്ക് ഫംഗ്ഷനുകൾ?

ഗ്രിഡ് ട്രാക്കുകളുടെ (വരികളും നിരകളും) വലുപ്പം വ്യക്തമാക്കാൻ ട്രാക്ക് ഫംഗ്ഷനുകൾ ഉപയോഗിക്കുന്നു. ട്രാക്കുകൾക്കിടയിൽ സ്ഥലം എങ്ങനെ വിതരണം ചെയ്യണമെന്ന് നിർവചിക്കാൻ അവ ഒരു വഴി നൽകുന്നു, ഇത് ഫിക്സഡ്, ഫ്ലെക്സിബിൾ സൈസിംഗ് അനുവദിക്കുന്നു. ഏറ്റവും സാധാരണയായി ഉപയോഗിക്കുന്ന ട്രാക്ക് ഫംഗ്ഷനുകൾ ഇവയാണ്:

• fr (ഫ്രാക്ഷണൽ യൂണിറ്റ്): ഗ്രിഡ് കണ്ടെയ്‌നറിലെ ലഭ്യമായ സ്ഥലത്തിൻ്റെ ഒരു ഭാഗത്തെ പ്രതിനിധീകരിക്കുന്നു.
• minmax(min, max): ഒരു മിനിമം, മാക്സിമം മൂല്യങ്ങൾക്കിടയിലുള്ള വലുപ്പ പരിധി നിർവചിക്കുന്നു.
• auto: ട്രാക്കിൻ്റെ വലുപ്പം അതിലെ ഉള്ളടക്കം അനുസരിച്ച് നിർണ്ണയിക്കപ്പെടുന്നു.
• fit-content(length): ട്രാക്കിൻ്റെ വലുപ്പം അതിൻ്റെ ഉള്ളടക്കത്തിന് അനുയോജ്യമാകും, പക്ഷേ വ്യക്തമാക്കിയ നീളം കവിയരുത്.

fr യൂണിറ്റ്: ലഭ്യമായ ഇടം വിഭജിക്കുന്നു

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

അടിസ്ഥാന ഉപയോഗം

താഴെ പറയുന്ന സിഎസ്എസ് പരിഗണിക്കുക:

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

            

              
                Copy
              
            
          

ഇത് മൂന്ന് കോളങ്ങളുള്ള ഒരു ഗ്രിഡ് സൃഷ്ടിക്കുന്നു. ആദ്യത്തെയും മൂന്നാമത്തെയും കോളങ്ങൾ ലഭ്യമായ സ്ഥലത്തിൻ്റെ 1/4 വീതം എടുക്കുന്നു, രണ്ടാമത്തെ കോളം ലഭ്യമായ സ്ഥലത്തിൻ്റെ 2/4 (അല്ലെങ്കിൽ 1/2) എടുക്കുന്നു. ഗ്രിഡ് കണ്ടെയ്‌നറിന് 600px വീതിയുണ്ടെങ്കിൽ, നിശ്ചിത വലുപ്പമുള്ള കോളങ്ങളൊന്നും ഇല്ലെങ്കിൽ, ആദ്യത്തെയും മൂന്നാമത്തെയും കോളങ്ങൾക്ക് 150px വീതിയും രണ്ടാമത്തെ കോളത്തിന് 300px വീതിയും ഉണ്ടായിരിക്കും.

fr-ഉം നിശ്ചിത വലുപ്പമുള്ള ട്രാക്കുകളും സംയോജിപ്പിക്കുന്നു

നിശ്ചിത വലുപ്പമുള്ള ട്രാക്കുകളുമായി (ഉദാ. പിക്സലുകൾ, ems, rems) സംയോജിപ്പിക്കുമ്പോൾ fr-ൻ്റെ യഥാർത്ഥ ശക്തി വെളിവാകുന്നു. നിശ്ചിത വലുപ്പമുള്ള ട്രാക്കുകൾക്ക് ആദ്യം വലുപ്പം നൽകുന്നു, തുടർന്ന് ശേഷിക്കുന്ന സ്ഥലം fr യൂണിറ്റുകൾക്കിടയിൽ വിതരണം ചെയ്യുന്നു.

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

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, ആദ്യത്തെ കോളം 200px-ൽ നിശ്ചയിച്ചിരിക്കുന്നു. ഗ്രിഡ് കണ്ടെയ്‌നറിന് 600px വീതിയുണ്ടെങ്കിൽ, ശേഷിക്കുന്ന 400px രണ്ടാമത്തെയും മൂന്നാമത്തെയും കോളങ്ങൾക്കിടയിൽ വിതരണം ചെയ്യും. രണ്ടാമത്തെ കോളത്തിന് ശേഷിക്കുന്ന സ്ഥലത്തിൻ്റെ 1/3 (ഏകദേശം 133.33px) ലഭിക്കും, മൂന്നാമത്തെ കോളത്തിന് 2/3 (ഏകദേശം 266.67px) ലഭിക്കും.

ഉദാഹരണം: ഒരു ഗ്ലോബൽ നാവിഗേഷൻ ബാർ

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

            .nav-container {
  display: grid;
  grid-template-columns: 150px 1fr 100px; /* Logo, Search, Account Icons */
}

.nav-logo {
  /* Logo styling */
}

.nav-search {
  /* Search bar styling */
}

.nav-account {
  /* Account icon styling */
}

            

              
                Copy
              
            
          

ഇവിടെ, ലോഗോ കോളം 150px വീതിയുള്ളതും, അക്കൗണ്ട് ഐക്കൺ കോളം 100px വീതിയുള്ളതും, സെർച്ച് ബാർ കോളം ശേഷിക്കുന്ന സ്ഥലം നിറയ്ക്കാൻ വികസിക്കുന്നതുമാണ്. ഇത് ലോഗോയ്ക്കും അക്കൗണ്ട് ഐക്കണുകൾക്കും നിശ്ചിത വലുപ്പം നിലനിർത്തിക്കൊണ്ട് സെർച്ച് ബാർ വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങളുമായി പൊരുത്തപ്പെടുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.

minmax() ഫംഗ്ഷൻ: വലുപ്പ പരിധികൾ നിർവചിക്കുന്നു

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

അടിസ്ഥാന ഉപയോഗം

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

            

              
                Copy
              
            
          

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

minmax()-ഉം auto-യും സംയോജിപ്പിക്കുന്നു

ഒരു ട്രാക്കിനെ അതിൻ്റെ ഉള്ളടക്കത്തെ അടിസ്ഥാനമാക്കി വളരാൻ അനുവദിക്കുന്നതിന് minmax()-ഉം auto-യും സംയോജിപ്പിക്കുന്നത് ഒരു സാധാരണ ഉപയോഗമാണ്, എന്നാൽ ഒരു നിശ്ചിത പരിധി വരെ മാത്രം.

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

            

              
                Copy
              
            
          

ഈ സാഹചര്യത്തിൽ, ആദ്യത്തെ കോളത്തിന് കുറഞ്ഞത് 100px വീതിയുണ്ടായിരിക്കും. ഉള്ളടക്കം 100px-ൽ കൂടുതൽ വീതിയുള്ളതാണെങ്കിൽ, അത് ഉൾക്കൊള്ളാൻ കോളം വികസിക്കും. എന്നിരുന്നാലും, ഉള്ളടക്കത്തിന് അനുയോജ്യമാകുന്നതിന് ആവശ്യമായത്ര മാത്രമേ കോളം വികസിക്കുകയുള്ളൂ. ഉള്ളടക്കം 100px-ൽ കുറവാണെങ്കിൽ, കോളത്തിന് 100px വീതിയുണ്ടായിരിക്കും. രണ്ടാമത്തെ കോളം വീണ്ടും ശേഷിക്കുന്ന സ്ഥലം എടുക്കും.

ഉദാഹരണം: ഒരു പ്രൊഡക്റ്റ് കാർഡ് ഗ്രിഡ്

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

            .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

.product-card {
  /* Product card styling */
}

            

              
                Copy
              
            
          

ഇവിടെ, repeat(auto-fit, minmax(200px, 1fr)) കഴിയുന്നത്ര കോളങ്ങൾ സൃഷ്ടിക്കുന്നു, ഓരോന്നിനും കുറഞ്ഞത് 200px വീതിയുണ്ട്. 1fr പരമാവധി കോളങ്ങളെ വികസിപ്പിക്കാനും ലഭ്യമായ സ്ഥലം നിറയ്ക്കാനും അനുവദിക്കുന്നു. grid-gap കാർഡുകൾക്കിടയിൽ സ്പെയ്സിംഗ് ചേർക്കുന്നു. സ്ക്രീൻ വലുപ്പം മാറുമ്പോൾ, കോളങ്ങളുടെ എണ്ണം ലഭ്യമായ സ്ഥലത്തിന് അനുയോജ്യമായി സ്വയമേവ ക്രമീകരിക്കും, ഇത് വൈവിധ്യമാർന്ന പശ്ചാത്തലങ്ങളിൽ നിന്നും ഉപകരണങ്ങളിൽ നിന്നുമുള്ള ഉപയോക്താക്കൾക്ക് ഒരു റെസ്പോൺസീവ് ലേഔട്ട് ഉറപ്പാക്കുന്നു.

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

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

അടിസ്ഥാന ഉപയോഗം

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

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, ആദ്യത്തെ കോളത്തിന് അതിൻ്റെ ഉള്ളടക്കത്തിന് അനുയോജ്യമായ വലുപ്പം നൽകും. രണ്ടാമത്തെ കോളം ശേഷിക്കുന്ന സ്ഥലം എടുക്കും.

ഉദാഹരണം: ഒരു സൈഡ്ബാർ ലേഔട്ട്

ഇടതുവശത്ത് ഒരു സൈഡ്ബാറും വലതുവശത്ത് ഒരു പ്രധാന ഉള്ളടക്ക ഏരിയയും ഉള്ള ഒരു ലേഔട്ട് പരിഗണിക്കുക. സൈഡ്ബാർ അതിൻ്റെ ഉള്ളടക്കത്തിന് (ഉദാഹരണത്തിന്, നാവിഗേഷൻ ലിങ്കുകളുടെ ഒരു ലിസ്റ്റ്) അനുയോജ്യമായത്ര വീതിയുള്ളതായിരിക്കണം, അതേസമയം പ്രധാന ഉള്ളടക്ക ഏരിയ ശേഷിക്കുന്ന സ്ഥലം എടുക്കണം.

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

.sidebar {
  /* Sidebar styling */
}

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

            

              
                Copy
              
            
          

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

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

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

അടിസ്ഥാന ഉപയോഗം

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

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, ആദ്യത്തെ കോളത്തിന് അതിൻ്റെ ഉള്ളടക്കത്തിന് അനുയോജ്യമായ വലുപ്പം നൽകും, എന്നാൽ അത് ഒരിക്കലും 300px-ൽ കൂടുതൽ വീതിയുള്ളതായിരിക്കില്ല. ഉള്ളടക്കത്തിന് 300px-ൽ കൂടുതൽ ആവശ്യമുണ്ടെങ്കിൽ, കോളം 300px വീതിയുള്ളതായിരിക്കും, കൂടാതെ സിഎസ്എസ് overflow, word-wrap പ്രോപ്പർട്ടികളെ ആശ്രയിച്ച് ഉള്ളടക്കം ഓവർഫ്ലോ ചെയ്യുകയോ റാപ്പ് ചെയ്യുകയോ ചെയ്യാം.

ഉദാഹരണം: ഒരു ബട്ടൺ ഗ്രൂപ്പ്

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

            .button-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, fit-content(150px));
  grid-gap: 10px;
}

.button {
  /* Button styling */
}

            

              
                Copy
              
            
          

ഇവിടെ, ഓരോ ബട്ടൺ കോളത്തിനും ബട്ടണിൻ്റെ ടെക്സ്റ്റിന് അനുയോജ്യമായ വലുപ്പം നൽകും, എന്നാൽ അത് ഒരിക്കലും 150px-ൽ കൂടുതൽ വീതിയുള്ളതായിരിക്കില്ല. ടെക്സ്റ്റ് 150px-ൽ കൂടുതലാണെങ്കിൽ, ബട്ടൺ ടെക്സ്റ്റ് റാപ്പ് ചെയ്യും. ഇത് ഒരു സ്ഥിരതയുള്ള ദൃശ്യരൂപം നിലനിർത്തിക്കൊണ്ട് വ്യത്യസ്ത ബട്ടൺ ടെക്സ്റ്റ് ദൈർഘ്യങ്ങളുമായി പൊരുത്തപ്പെടുന്ന ഒരു ബട്ടൺ ഗ്രൂപ്പ് സൃഷ്ടിക്കുന്നു.

സങ്കീർണ്ണമായ ലേഔട്ടുകൾക്കായി ട്രാക്ക് ഫംഗ്ഷനുകൾ സംയോജിപ്പിക്കുന്നു

സിഎസ്എസ് ഗ്രിഡ് ട്രാക്ക് ഫംഗ്ഷനുകളുടെ യഥാർത്ഥ ശക്തി സങ്കീർണ്ണവും റെസ്പോൺസീവുമായ ലേഔട്ടുകൾ സൃഷ്ടിക്കുന്നതിന് അവയെ സംയോജിപ്പിക്കുന്നതിലാണ്. ചില ഉദാഹരണങ്ങൾ ഇതാ:

ഉദാഹരണം 1: ഫ്ലെക്സിബിൾ മധ്യ കോളമുള്ള ഒരു ത്രീ-കോളം ലേഔട്ട്

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

            

              
                Copy
              
            
          

ഇത് ഒരു ത്രീ-കോളം ലേഔട്ട് സൃഷ്ടിക്കുന്നു, അവിടെ ആദ്യത്തെ കോളം 200px വീതിയുള്ളതും, രണ്ടാമത്തെ കോളം ശേഷിക്കുന്ന സ്ഥലം എടുക്കുന്നതും, മൂന്നാമത്തെ കോളം 150px വീതിയുള്ളതുമാണ്.

ഉദാഹരണം 2: മിനിമം സൈഡ്ബാർ വീതിയുള്ള ഒരു ലേഔട്ട്

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

            

              
                Copy
              
            
          

ഇതൊരു ടു-കോളം ലേഔട്ട് സൃഷ്ടിക്കുന്നു, അവിടെ ആദ്യത്തെ കോളത്തിന് (സൈഡ്ബാർ) കുറഞ്ഞത് 250px വീതിയുണ്ട്, അതിൻ്റെ ഉള്ളടക്കത്തിന് അനുയോജ്യമായി വികസിക്കുന്നു, അതേസമയം രണ്ടാമത്തെ കോളം ശേഷിക്കുന്ന സ്ഥലം എടുക്കുന്നു.

ഉദാഹരണം 3: ഡൈനാമിക് ഉള്ളടക്കമുള്ള തുല്യ ഉയരമുള്ള കോളങ്ങൾ

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(100px, auto); /* ensure all rows are at least 100px high */
}

            

              
                Copy
              
            
          

ഇത് മൂന്ന് തുല്യ-വീതിയുള്ള കോളങ്ങൾ സൃഷ്ടിക്കുന്നു. grid-auto-rows: minmax(100px, auto) ഉപയോഗിക്കുന്നത് എല്ലാ വരികൾക്കും കുറഞ്ഞത് 100px ഉയരമുണ്ടെന്ന് ഉറപ്പാക്കുന്നു, കൂടാതെ ഓരോ ഗ്രിഡ് ഇനത്തിലെയും ഉള്ളടക്കം ഉൾക്കൊള്ളുന്നതിനായി അവയുടെ ഉയരം സ്വയമേവ ക്രമീകരിക്കും, ഇത് ഗ്രിഡിലുടനീളം ദൃശ്യപരമായ സ്ഥിരത നിലനിർത്തുന്നു.

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

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

ഉപസംഹാരം

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