CSS ഗ്രിഡ് ഏരിയകൾ: റെസ്പോൺസീവ് ഡിസൈനിനായി പേരുകളുള്ള ലേഔട്ട് റീജിയണുകൾ മാസ്റ്റർ ചെയ്യുക

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

എന്താണ് CSS ഗ്രിഡ് ഏരിയകൾ?

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

നിങ്ങളുടെ വെബ്പേജിനായി ഒരു ഫ്ലോർ പ്ലാൻ വരയ്ക്കുന്നതുപോലെ ഇതിനെക്കുറിച്ച് ചിന്തിക്കുക. നിങ്ങൾക്ക് "ഹെഡർ", "നാവിഗേഷൻ", "മെയിൻ", "സൈഡ്ബാർ", "ഫൂട്ടർ" എന്നിങ്ങനെയുള്ള ഏരിയകൾ നിർവചിക്കാനും തുടർന്ന് നിങ്ങളുടെ ഉള്ളടക്കം ഈ മുൻകൂട്ടി നിർവചിച്ച ഏരിയകളിലേക്ക് സ്ഥാപിക്കാനും കഴിയും.

പേരുകളുള്ള ഗ്രിഡ് ഏരിയകൾ ഉപയോഗിക്കുന്നതിന്റെ പ്രയോജനങ്ങൾ

• മെച്ചപ്പെട്ട വായനാക്ഷമത: പേരുകളുള്ള ഏരിയകൾ നിങ്ങളുടെ ഗ്രിഡ് കോഡിനെ കൂടുതൽ സ്വയം-വിവരണാത്മകമാക്കുന്നു, ഇത് വായനാക്ഷമതയും പരിപാലനക്ഷമതയും മെച്ചപ്പെടുത്തുന്നു.
• മെച്ചപ്പെട്ട റെസ്പോൺസീവ്നസ്: അടിസ്ഥാന HTML ഘടനയിൽ മാറ്റം വരുത്താതെ വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങൾക്കായി ലേഔട്ട് റീജിയണുകൾ എളുപ്പത്തിൽ പുനഃക്രമീകരിക്കുക.
• ലളിതമായ കോഡ്: നിങ്ങളുടെ CSS-ന്റെ സങ്കീർണ്ണത കുറയ്ക്കുന്നു, പ്രത്യേകിച്ച് സങ്കീർണ്ണമായ ലേഔട്ടുകൾക്ക്.
• വർദ്ധിച്ച ഫ്ലെക്സിബിലിറ്റി: കൂടുതൽ ക്രിയാത്മകവും ഫ്ലെക്സിബിളുമായ ഡിസൈൻ സൊല്യൂഷനുകൾക്ക് അനുവദിക്കുന്നു.

CSS ഗ്രിഡ് ഏരിയകളുടെ അടിസ്ഥാന സിന്റാക്സ്

പേരുകളുള്ള ഗ്രിഡ് ഏരിയകൾ നിർവചിക്കുന്നതിനുള്ള പ്രധാന പ്രോപ്പർട്ടിയാണ് grid-template-areas. എലമെന്റുകളെ നിർദ്ദിഷ്ട ഏരിയകളിലേക്ക് നിയമിക്കുന്നതിനായി ഈ പ്രോപ്പർട്ടി grid-area എന്നതിനൊപ്പം ഉപയോഗിക്കുന്നു.

ഇവിടെ അടിസ്ഥാന സിന്റാക്സ് നൽകുന്നു:

.grid-container {
 display: grid;
 grid-template-areas:
  "header header header"
  "nav main aside"
  "footer footer footer";
}

.header {
 grid-area: header;
}

.nav {
 grid-area: nav;
}

.main {
 grid-area: main;
}

.aside {
 grid-area: aside;
}

.footer {
 grid-area: footer;
}

ഈ ഉദാഹരണത്തിൽ, grid-template-areas പ്രോപ്പർട്ടി ഒരു 3x3 ഗ്രിഡ് ലേഔട്ട് നിർവചിക്കുന്നു. ഓരോ വരിയും ഗ്രിഡിലെ ഒരു റോയെ പ്രതിനിധീകരിക്കുന്നു, ഓരോ വരിയിലെ ഓരോ വാക്കും ഒരു കോളത്തെ പ്രതിനിധീകരിക്കുന്നു. ഓരോ സെല്ലിനും നൽകിയിട്ടുള്ള പേരുകൾ (ഉദാഹരണത്തിന്, "header", "nav", "main") ഓരോ എലമെന്റിനും പ്രയോഗിച്ച grid-area പ്രോപ്പർട്ടിയുമായി പൊരുത്തപ്പെടുന്നു.

CSS ഗ്രിഡ് ഏരിയകളുടെ പ്രായോഗിക ഉദാഹരണങ്ങൾ

CSS ഗ്രിഡ് ഏരിയകളുടെ ശക്തിയും ഫ്ലെക്സിബിലിറ്റിയും വ്യക്തമാക്കാൻ ചില പ്രായോഗിക ഉദാഹരണങ്ങൾ പരിശോധിക്കാം.

ഉദാഹരണം 1: അടിസ്ഥാന വെബ്സൈറ്റ് ലേഔട്ട്

ഒരു ഹെഡർ, നാവിഗേഷൻ, പ്രധാന ഉള്ളടക്ക ഏരിയ, സൈഡ്ബാർ, ഫൂട്ടർ എന്നിവയുള്ള ഒരു സാധാരണ വെബ്സൈറ്റ് ലേഔട്ട് പരിഗണിക്കുക. CSS ഗ്രിഡ് ഏരിയകൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഇത് എങ്ങനെ നടപ്പിലാക്കാമെന്ന് താഴെ നൽകുന്നു:

<div class="grid-container">
 <header class="header">Header</header>
 <nav class="nav">Navigation</nav>
 <main class="main">Main Content</main>
 <aside class="aside">Sidebar</aside>
 <footer class="footer">Footer</footer>
</div>

.grid-container {
 display: grid;
 grid-template-columns: 1fr 3fr 1fr; /* ആവശ്യാനുസരണം കോളത്തിന്റെ വീതി ക്രമീകരിക്കുക */
 grid-template-rows: auto auto 1fr auto; /* ആവശ്യാനുസരണം റോയുടെ ഉയരം ക്രമീകരിക്കുക */
 grid-template-areas:
  "header header header"
  "nav main aside"
  "footer footer footer";
 height: 100vh; /* ഗ്രിഡ് മുഴുവൻ സ്ക്രീനും എടുക്കുന്നതിന് ഇത് പ്രധാനമാണ് */
}

.header {
 grid-area: header;
 background-color: #eee;
 padding: 1em;
}

.nav {
 grid-area: nav;
 background-color: #ddd;
 padding: 1em;
}

.main {
 grid-area: main;
 background-color: #ccc;
 padding: 1em;
}

.aside {
 grid-area: aside;
 background-color: #bbb;
 padding: 1em;
}

.footer {
 grid-area: footer;
 background-color: #aaa;
 padding: 1em;
 text-align: center;
}

ഈ ഉദാഹരണത്തിൽ, നമ്മൾ മൂന്ന് കോളങ്ങളും നാല് റോകളുമുള്ള ഒരു ഗ്രിഡ് നിർവചിച്ചിരിക്കുന്നു. ഓരോ എലമെന്റും grid-area പ്രോപ്പർട്ടി ഉപയോഗിച്ച് ഒരു നിർദ്ദിഷ്ട ഏരിയയിലേക്ക് നിയമിച്ചിരിക്കുന്നു. grid-template-areas പ്രോപ്പർട്ടി എങ്ങനെ വെബ്സൈറ്റിന്റെ ലേഔട്ടിനെ ദൃശ്യപരമായി പ്രതിനിധീകരിക്കുന്നു എന്ന് ശ്രദ്ധിക്കുക.

ഉദാഹരണം 2: റെസ്പോൺസീവ് ലേഔട്ട് ക്രമീകരണങ്ങൾ

CSS ഗ്രിഡ് ഏരിയകളുടെ പ്രധാന നേട്ടങ്ങളിലൊന്ന് വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങൾക്കായി ലേഔട്ട് എളുപ്പത്തിൽ പുനഃക്രമീകരിക്കാനുള്ള കഴിവാണ്. ഒരു റെസ്പോൺസീവ് ലേഔട്ട് സൃഷ്ടിക്കുന്നതിനായി നമുക്ക് മുൻപത്തെ ഉദാഹരണം പരിഷ്കരിക്കാം.

@media (max-width: 768px) {
 .grid-container {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto;
  grid-template-areas:
  "header"
  "nav"
  "main"
  "aside"
  "footer";
 }
}

ഈ മീഡിയ ക്വറിയിൽ, നമ്മൾ 768px-ൽ താഴെയുള്ള സ്ക്രീനുകളെ ലക്ഷ്യമിടുന്നു. നമ്മൾ ഗ്രിഡ് ലേഔട്ട് ഒരൊറ്റ കോളത്തിലേക്ക് മാറ്റി, ഹെഡർ, നാവിഗേഷൻ, പ്രധാന ഉള്ളടക്കം, സൈഡ്ബാർ, ഫൂട്ടർ എന്നിവ ലംബമായി അടുക്കി വെച്ചിരിക്കുന്നു. ഇത് grid-template-areas പ്രോപ്പർട്ടി പരിഷ്കരിക്കുന്നതിലൂടെ നേടാനാകും.

ഉദാഹരണം 3: ഓവർലാപ്പുചെയ്യുന്ന ഏരിയകളുള്ള സങ്കീർണ്ണമായ ലേഔട്ട്

ഓവർലാപ്പുചെയ്യുന്ന ഏരിയകളുള്ള കൂടുതൽ സങ്കീർണ്ണമായ ലേഔട്ടുകൾ സൃഷ്ടിക്കാനും CSS ഗ്രിഡ് ഏരിയകൾ ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, ഒന്നിലധികം കോളങ്ങളിൽ വ്യാപിക്കുന്ന ഒരു ബാനർ നിങ്ങൾക്ക് വേണമെന്നുണ്ടായേക്കാം.

.grid-container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: auto 1fr auto;
 grid-template-areas:
  "banner banner banner"
  "main main aside"
  "footer footer footer";
}

.banner {
 grid-area: banner;
 background-color: #888;
 color: white;
 padding: 2em;
 text-align: center;
}

ഇവിടെ, banner ഏരിയ ആദ്യത്തെ റോയിലെ മൂന്ന് കോളങ്ങളിലും വ്യാപിക്കുന്നു. ഇത് CSS ഗ്രിഡ് ഏരിയകളുടെ ദൃശ്യപരമായി ആകർഷകവും സങ്കീർണ്ണവുമായ ലേഔട്ടുകൾ സൃഷ്ടിക്കുന്നതിലുള്ള ഫ്ലെക്സിബിലിറ്റി പ്രകടമാക്കുന്നു.

വിപുലമായ ടെക്നിക്കുകളും മികച്ച രീതികളും

ഇപ്പോൾ നിങ്ങൾ CSS ഗ്രിഡ് ഏരിയകളുടെ അടിസ്ഥാനകാര്യങ്ങൾ മനസ്സിലാക്കിയ സ്ഥിതിക്ക്, ഒരു CSS ഗ്രിഡ് മാസ്റ്ററാകാൻ സഹായിക്കുന്ന ചില വിപുലമായ ടെക്നിക്കുകളും മികച്ച രീതികളും നമുക്ക് പര്യവേക്ഷണം ചെയ്യാം.

ശൂന്യമായ സെല്ലുകൾക്കായി "ഡോട്ട്" നൊട്ടേഷൻ ഉപയോഗിക്കുന്നത്

നിങ്ങളുടെ ലേഔട്ടിൽ ദൃശ്യപരമായ അകലം അല്ലെങ്കിൽ വിടവുകൾ സൃഷ്ടിക്കാൻ ഉപയോഗപ്രദമാകുന്ന, grid-template-areas പ്രോപ്പർട്ടിയിൽ ഒരു ശൂന്യമായ സെല്ലിനെ പ്രതിനിധീകരിക്കാൻ നിങ്ങൾക്ക് ഒരു ഡോട്ട് (.) ഉപയോഗിക്കാം.

.grid-container {
 display: grid;
 grid-template-columns: 1fr 2fr 1fr;
 grid-template-rows: auto 1fr auto;
 grid-template-areas:
  "header header header"
  "nav . aside"
  "footer footer footer";
}

ഈ ഉദാഹരണത്തിൽ, രണ്ടാമത്തെ റോയിലെ മധ്യത്തിലുള്ള സെൽ ശൂന്യമായി വിട്ടിരിക്കുന്നു, ഇത് നാവിഗേഷനും സൈഡ്‌ബാറിനും ഇടയിൽ ഒരു ദൃശ്യപരമായ വിടവ് സൃഷ്ടിക്കുന്നു.

grid-template-areas-നെ grid-template-columns, grid-template-rows എന്നിവയുമായി സംയോജിപ്പിക്കുന്നത്

grid-template-areas നിങ്ങളുടെ ഗ്രിഡിന്റെ ഘടന നിർവചിക്കുമ്പോൾ, grid-template-columns, grid-template-rows എന്നിവ ഉപയോഗിച്ച് കോളങ്ങളുടെയും റോകളുടെയും വലുപ്പം നിർവചിക്കേണ്ടതുണ്ട്. നിങ്ങളുടെ ഡിസൈൻ ആവശ്യകതകളെ അടിസ്ഥാനമാക്കി ഉചിതമായ യൂണിറ്റുകൾ (ഉദാഹരണത്തിന്, fr, px, em, %) തിരഞ്ഞെടുക്കേണ്ടത് പ്രധാനമാണ്.

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

.grid-container {
 display: grid;
 grid-template-columns: 1fr 2fr 1fr; /* റെസ്പോൺസീവ് കോളങ്ങൾക്കായി ഫ്രാക്ഷണൽ യൂണിറ്റുകൾ */
 grid-template-rows: auto 1fr auto; /* ഹെഡറിനും ഫൂട്ടറിനും ഓട്ടോ ഉയരം */
 grid-template-areas:
  "header header header"
  "nav main aside"
  "footer footer footer";
}

ഗ്രിഡ് ഇനങ്ങൾക്കിടയിൽ അകലം സൃഷ്ടിക്കാൻ grid-gap ഉപയോഗിക്കുന്നത്

grid-gap പ്രോപ്പർട്ടി ഗ്രിഡ് ഇനങ്ങൾക്കിടയിൽ എളുപ്പത്തിൽ അകലം ചേർക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഇത് നിങ്ങളുടെ ലേഔട്ടിന്റെ ദൃശ്യപരമായ ആകർഷണീയതയും വായനാക്ഷമതയും മെച്ചപ്പെടുത്തും.

.grid-container {
 display: grid;
 grid-template-columns: 1fr 2fr 1fr;
 grid-template-rows: auto 1fr auto;
 grid-template-areas:
  "header header header"
  "nav main aside"
  "footer footer footer";
 grid-gap: 10px; /* ഗ്രിഡ് ഇനങ്ങൾക്കിടയിൽ 10px അകലം ചേർക്കുക */
}

പ്രവേശനക്ഷമതയ്ക്കുള്ള പരിഗണനകൾ (Accessibility)

CSS ഗ്രിഡ് ഉപയോഗിക്കുമ്പോൾ, പ്രവേശനക്ഷമത പരിഗണിക്കേണ്ടത് അത്യാവശ്യമാണ്. HTML സോഴ്സ് കോഡിലെ നിങ്ങളുടെ ഉള്ളടക്കത്തിന്റെ ലോജിക്കൽ ഓർഡർ ലേഔട്ടിലെ വിഷ്വൽ ഓർഡറുമായി പൊരുത്തപ്പെടുന്നുവെന്ന് ഉറപ്പാക്കുക. വിഷ്വൽ ഓർഡർ വ്യത്യസ്തമാണെങ്കിൽ, അടിസ്ഥാന ഘടനയെ ബാധിക്കാതെ വിഷ്വൽ അവതരണം ക്രമീകരിക്കാൻ CSS ഉപയോഗിക്കുക.

കൂടാതെ, സഹായ സാങ്കേതികവിദ്യകൾ ഉപയോഗിക്കുന്ന ആളുകൾക്ക് ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുന്നതിന് എല്ലാ ഇന്ററാക്ടീവ് എലമെന്റുകൾക്കും വ്യക്തവും വിവരണാത്മകവുമായ ലേബലുകൾ നൽകുക.

ബ്രൗസർ കോംപാറ്റിബിലിറ്റി

ആധുനിക ബ്രൗസറുകളിലുടനീളം CSS ഗ്രിഡ് ലേഔട്ടിന് മികച്ച ബ്രൗസർ പിന്തുണയുണ്ട്. എന്നിരുന്നാലും, കോംപാറ്റിബിലിറ്റി പരിശോധിക്കുകയും ഗ്രിഡ് പിന്തുണയ്ക്കാത്ത പഴയ ബ്രൗസറുകൾക്കായി ഫാൾബാക്ക് സൊല്യൂഷനുകൾ നൽകുകയും ചെയ്യുന്നത് എല്ലായ്പ്പോഴും ഒരു നല്ല പരിശീലനമാണ്.

CSS ഗ്രിഡ് ലേഔട്ടിനായുള്ള ബ്രൗസർ കോംപാറ്റിബിലിറ്റി പരിശോധിക്കാൻ നിങ്ങൾക്ക് Can I use... പോലുള്ള ടൂളുകൾ ഉപയോഗിക്കാം.

യഥാർത്ഥ ലോക ഉദാഹരണങ്ങളും കേസ് സ്റ്റഡികളും

ആധുനിക വെബ് ഡിസൈനിൽ CSS ഗ്രിഡ് ഏരിയകൾ എങ്ങനെ ഉപയോഗിക്കുന്നു എന്നതിന്റെ ചില യഥാർത്ഥ ലോക ഉദാഹരണങ്ങൾ നോക്കാം.

ഉദാഹരണം 1: ഒരു വാർത്താ വെബ്സൈറ്റ് പുനർരൂപകൽപ്പന ചെയ്യുന്നു

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

.news-container {
 display: grid;
 grid-template-columns: 2fr 1fr;
 grid-template-rows: auto 1fr auto;
 grid-template-areas:
  "featured featured"
  "main sidebar"
  "footer footer";
}

.featured {
 grid-area: featured;
}

.main {
 grid-area: main;
}

.sidebar {
 grid-area: sidebar;
}

.footer {
 grid-area: footer;
}

ഉദാഹരണം 2: ഒരു പോർട്ട്ഫോളിയോ വെബ്സൈറ്റ് നിർമ്മിക്കുന്നു

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

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

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

ഉദാഹരണം 3: ഒരു ഇ-കൊമേഴ്സ് ഉൽപ്പന്ന പേജ് നിർമ്മിക്കുന്നു

ഒരു ഇ-കൊമേഴ്സ് ഉൽപ്പന്ന പേജിൽ സാധാരണയായി ഉൽപ്പന്ന ചിത്രങ്ങൾ, ഒരു ഉൽപ്പന്ന വിവരണം, വില വിവരങ്ങൾ, കോൾ-ടു-ആക്ഷൻ ബട്ടണുകൾ എന്നിവയുൾപ്പെടെ നിരവധി ഘടകങ്ങൾ അടങ്ങിയിരിക്കുന്നു. ഈ ഘടകങ്ങളെ വ്യക്തവും അവബോധജന്യവുമായ രീതിയിൽ ക്രമീകരിക്കാൻ CSS ഗ്രിഡ് ഏരിയകൾ ഉപയോഗിക്കാം, ഇത് ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുകയും പരിവർത്തന നിരക്ക് വർദ്ധിപ്പിക്കുകയും ചെയ്യുന്നു.

.product-container {
 display: grid;
 grid-template-columns: 1fr 1fr;
 grid-template-rows: auto 1fr auto;
 grid-template-areas:
  "image description"
  "image details"
  " . cta";
}

.product-image {
 grid-area: image;
}

.product-description {
 grid-area: description;
}

.product-details {
 grid-area: details;
}

.call-to-action {
 grid-area: cta;
 text-align: right;
}

ഒഴിവാക്കേണ്ട സാധാരണ തെറ്റുകൾ

CSS ഗ്രിഡ് ഏരിയകൾ ലേഔട്ടുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള ശക്തവും ഫ്ലെക്സിബിളുമായ ഒരു മാർഗ്ഗം വാഗ്ദാനം ചെയ്യുമ്പോൾ, ഡെവലപ്പർമാർ ഒഴിവാക്കേണ്ട ചില സാധാരണ തെറ്റുകളുണ്ട്.

• ഗ്രിഡിനെ അമിതമായി സങ്കീർണ്ണമാക്കൽ: ഒരു ലളിതമായ ഗ്രിഡ് ഘടനയിൽ ആരംഭിച്ച് ആവശ്യാനുസരണം ക്രമേണ സങ്കീർണ്ണത ചേർക്കുക. മനസ്സിലാക്കാനും പരിപാലിക്കാനും പ്രയാസമുള്ള അമിതമായി സങ്കീർണ്ണമായ ഗ്രിഡുകൾ സൃഷ്ടിക്കുന്നത് ഒഴിവാക്കുക.
• കോളത്തിന്റെയും റോയുടെയും വലുപ്പങ്ങൾ നിർവചിക്കാതിരിക്കുക: grid-template-columns, grid-template-rows എന്നിവ ഉപയോഗിച്ച് നിങ്ങളുടെ കോളങ്ങളുടെയും റോകളുടെയും വലുപ്പം നിർവചിക്കാൻ ഓർക്കുക. ഈ പ്രോപ്പർട്ടികൾ ഇല്ലാതെ, നിങ്ങളുടെ ഗ്രിഡ് ശരിയായി റെൻഡർ ചെയ്യില്ല.
• ബ്രൗസർ കോംപാറ്റിബിലിറ്റി അവഗണിക്കുന്നത്: എല്ലായ്പ്പോഴും ബ്രൗസർ കോംപാറ്റിബിലിറ്റി പരിശോധിക്കുകയും CSS ഗ്രിഡ് ലേഔട്ട് പിന്തുണയ്ക്കാത്ത പഴയ ബ്രൗസറുകൾക്കായി ഫാൾബാക്ക് സൊല്യൂഷനുകൾ നൽകുകയും ചെയ്യുക.
• പ്രവേശനക്ഷമത മറക്കുന്നത്: നിങ്ങളുടെ ലേഔട്ടുകൾ സഹായ സാങ്കേതികവിദ്യകൾ ഉപയോഗിക്കുന്നവർ ഉൾപ്പെടെ എല്ലാ ഉപയോക്താക്കൾക്കും ആക്സസ് ചെയ്യാവുന്നതാണെന്ന് ഉറപ്പാക്കുക.
• grid-template-areas ദുരുപയോഗം ചെയ്യുന്നത്: നിർവചിച്ച ഏരിയ നാമങ്ങൾ സാധുതയുള്ളതാണെന്നും അവ ഓരോ എലമെന്റിനും പ്രയോഗിച്ച grid-area പ്രോപ്പർട്ടികളുമായി പൊരുത്തപ്പെടുന്നുവെന്നും എല്ലായ്പ്പോഴും ഉറപ്പാക്കുക.

ഉപസംഹാരം

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

CSS ഗ്രിഡ് ഏരിയകളുടെ ശക്തി സ്വീകരിക്കുകയും നിങ്ങളുടെ വെബ് ഡിസൈൻ കഴിവുകൾ അടുത്ത ഘട്ടത്തിലേക്ക് ഉയർത്തുകയും ചെയ്യുക. വ്യത്യസ്ത ലേഔട്ടുകൾ ഉപയോഗിച്ച് പരീക്ഷിക്കുക, വിപുലമായ ടെക്നിക്കുകൾ പര്യവേക്ഷണം ചെയ്യുക, അനുദിനം വികസിച്ചുകൊണ്ടിരിക്കുന്ന വെബ് ഡെവലപ്‌മെന്റ് ലോകത്തിന് സംഭാവന നൽകുക.

കൂടുതൽ പഠിക്കാനുള്ള ഉറവിടങ്ങൾ:

• MDN വെബ് ഡോക്സ്: CSS ഗ്രിഡ് ലേഔട്ട്
• CSS-ട്രിക്കുകൾ: ഗ്രിഡിനായുള്ള ഒരു സമ്പൂർണ്ണ ഗൈഡ്
• ഗ്രിഡ് ബൈ എക്സാമ്പിൾ