സിഎസ്എസ് സബ്ഗ്രിഡ്: നെസ്റ്റഡ് ഗ്രിഡ് ലേഔട്ട് ഇൻഹെറിറ്റൻസിൽ വൈദഗ്ദ്ധ്യം നേടാം

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

സബ്ഗ്രിഡിന്റെ ആവശ്യകത മനസ്സിലാക്കാം

സബ്ഗ്രിഡിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, അതെന്തുകൊണ്ട് ആവശ്യമാണെന്ന് മനസ്സിലാക്കേണ്ടത് പ്രധാനമാണ്. ഒരു പ്രധാന ഗ്രിഡ് പേജിന്റെ മൊത്തത്തിലുള്ള ഘടന നിർവചിക്കുന്ന ഒരു സാഹചര്യം പരിഗണിക്കുക. അതിലെ ഒരു ഗ്രിഡ് ഐറ്റത്തിനുള്ളിൽ, അതിന്റെ ഉള്ളടക്കത്തിന്റെ ലേഔട്ട് നിയന്ത്രിക്കാൻ മറ്റൊരു ഗ്രിഡ് ആവശ്യമാണ്. സബ്ഗ്രിഡ് ഇല്ലാതെ, നെസ്റ്റഡ് ഗ്രിഡിന്റെ ട്രാക്കുകൾ (വരികളും നിരകളും) പാരന്റ് ഗ്രിഡിന്റെ ട്രാക്കുകളുമായി വിന്യസിക്കുന്നത് ശ്രമകരവും ശ്രദ്ധാപൂർവ്വമായ കണക്കുകൂട്ടലുകളും മാനുവൽ ക്രമീകരണങ്ങളും ആവശ്യമായ ഒന്നാണ്.

ലേബലുകളും ഇൻപുട്ട് ഫീൽഡുകളുമുള്ള ഒരു ഫോം സങ്കൽപ്പിക്കുക. ഒന്നിലധികം വരികളിലായി ലേബലുകൾ അതത് ഇൻപുട്ട് ഫീൽഡുകളുമായി കൃത്യമായി വിന്യസിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു. സബ്ഗ്രിഡ് ഇല്ലാതെ ഇത് നേടാൻ, പാരന്റ് ഗ്രിഡിന്റെയും (ഫോം ഉൾക്കൊള്ളുന്നത്) നെസ്റ്റഡ് ഗ്രിഡിന്റെയും (ലേബലുകളും ഇൻപുട്ടുകളും ഉൾക്കൊള്ളുന്നത്) നിരകളുടെ വീതി കൃത്യമായി പൊരുത്തപ്പെടുത്തേണ്ടതുണ്ട്. ലേഔട്ടിന്റെ സങ്കീർണ്ണത കൂടുന്നതിനനുസരിച്ച് ഇത് കൂടുതൽ ബുദ്ധിമുട്ടായിത്തീരുന്നു.

നെസ്റ്റഡ് ഗ്രിഡിനെ അതിന്റെ പാരന്റ് ഗ്രിഡിന്റെ ട്രാക്ക് നിർവചനങ്ങൾ "ദത്തെടുക്കാൻ" പ്രാപ്തമാക്കുന്നതിലൂടെ സബ്ഗ്രിഡ് ഈ പ്രശ്നം പരിഹരിക്കുന്നു. ഇതിനർത്ഥം നെസ്റ്റഡ് ഗ്രിഡിന്റെ നിരകളും കൂടാതെ/അല്ലെങ്കിൽ വരികളും പാരന്റ് ഗ്രിഡിന്റെ നിരകളുമായും കൂടാതെ/അല്ലെങ്കിൽ വരികളുമായും നേരിട്ട് വിന്യസിക്കാൻ കഴിയും, ഇത് മാനുവൽ സിൻക്രൊണൈസേഷന്റെ ആവശ്യകത ഇല്ലാതാക്കുന്നു.

എന്താണ് സിഎസ്എസ് സബ്ഗ്രിഡ്?

സിഎസ്എസ് ഗ്രിഡ് ലേഔട്ട് സ്പെസിഫിക്കേഷന്റെ (ലെവൽ 2) ഉള്ളിലുള്ള ഒരു ഫീച്ചറാണ് സിഎസ്എസ് സബ്ഗ്രിഡ്. ഇത് ഒരു ഗ്രിഡ് ഐറ്റത്തെ ഒരു സബ്ഗ്രിഡായി സ്വയം നിർവചിക്കാൻ അനുവദിക്കുന്നു. ഒരു ഗ്രിഡ് ഐറ്റം ഒരു സബ്ഗ്രിഡാകുമ്പോൾ, അത് പാരന്റ് ഗ്രിഡിന്റെ ട്രാക്ക് സൈസിംഗ് അൽഗോരിതത്തിൽ പങ്കെടുക്കുന്നു. അടിസ്ഥാനപരമായി, ഇത് അതിന്റെ പാരന്റ് ഗ്രിഡിൽ നിന്ന് വരി കൂടാതെ/അല്ലെങ്കിൽ നിര നിർവചനങ്ങൾ ഇൻഹെറിറ്റ് ചെയ്യുന്നു, ഇത് പാരന്റ്, ചൈൽഡ് ഗ്രിഡ് ഘടനകൾക്കിടയിൽ തടസ്സമില്ലാത്ത വിന്യാസം സാധ്യമാക്കുന്നു.

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

• ഫോം ലേഔട്ടുകൾ: ലേബലുകളും ഇൻപുട്ട് ഫീൽഡുകളും കൃത്യമായി വിന്യസിക്കാൻ.
• കാർഡ് ലേഔട്ടുകൾ: ഒന്നിലധികം കാർഡുകളിലുടനീളം സ്ഥിരമായ സ്പേസിംഗും വിന്യാസവും ഉറപ്പാക്കാൻ.
• ഡാഷ്‌ബോർഡ് ലേഔട്ടുകൾ: സങ്കീർണ്ണമായ ഡാറ്റാ ഡിസ്‌പ്ലേകളോടെ ആകർഷകവും ഘടനാപരവുമായ ഡാഷ്‌ബോർഡുകൾ നിർമ്മിക്കാൻ.
• ഒരു പാരന്റ് ഗ്രിഡ് ഘടനയുമായി വിന്യസിക്കേണ്ട ആവർത്തന ഘടകങ്ങളുള്ള ഏതൊരു ലേഔട്ടും.

സിഎസ്എസ് സബ്ഗ്രിഡിന്റെ പ്രധാന ആശയങ്ങൾ

സബ്ഗ്രിഡ് ഫലപ്രദമായി ഉപയോഗിക്കുന്നതിന്, ഇനിപ്പറയുന്ന പ്രധാന ആശയങ്ങൾ മനസ്സിലാക്കേണ്ടത് അത്യാവശ്യമാണ്:

1. `grid-template-columns: subgrid;`, `grid-template-rows: subgrid;`

ഈ പ്രോപ്പർട്ടികളാണ് സബ്ഗ്രിഡിന്റെ കാതൽ. ഒരു ഗ്രിഡ് ഐറ്റത്തിൽ പ്രയോഗിക്കുമ്പോൾ, ഈ ഐറ്റം ഒരു സബ്ഗ്രിഡായി പ്രവർത്തിക്കണമെന്നും അതിന്റെ പാരന്റ് ഗ്രിഡിൽ നിന്ന് നിര കൂടാതെ/അല്ലെങ്കിൽ വരി നിർവചനങ്ങൾ ഇൻഹെറിറ്റ് ചെയ്യണമെന്നും ബ്രൗസറിനോട് പറയുന്നു. നിങ്ങളുടെ ലേഔട്ട് ആവശ്യകതകൾക്കനുസരിച്ച് നിരകൾക്കോ, വരികൾക്കോ, അല്ലെങ്കിൽ രണ്ടിനും `subgrid` ഉപയോഗിക്കാൻ നിങ്ങൾക്ക് തിരഞ്ഞെടുക്കാം.

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

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

.child {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: subgrid;
  /* Inherit column definitions from the parent */
}
            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, `.child` എന്നത് `.parent`-നുള്ളിലെ ഒരു ഗ്രിഡ് ഐറ്റമാണ്. `grid-template-columns: subgrid;` എന്ന് സെറ്റ് ചെയ്യുന്നതിലൂടെ, `.child` അതിന്റെ `.parent`-ൽ നിന്ന് നിര നിർവചനങ്ങൾ (അതായത്, `1fr 2fr 1fr`) ഇൻഹെറിറ്റ് ചെയ്യും.

2. എക്സ്പ്ലിസിറ്റ്, ഇംപ്ലിസിറ്റ് ട്രാക്ക് സൈസിംഗ്

സബ്ഗ്രിഡ് ഉപയോഗിക്കുമ്പോൾ, നിങ്ങൾക്ക് സബ്ഗ്രിഡിനുള്ളിലെ ട്രാക്കുകളുടെ വലുപ്പം വ്യക്തമായി നിർവചിക്കാം, അല്ലെങ്കിൽ നിങ്ങൾക്ക് ഇംപ്ലിസിറ്റ് ട്രാക്ക് സൈസിംഗിനെ ആശ്രയിക്കാം. നിങ്ങൾ `grid-template-columns: subgrid;` എന്ന് വ്യക്തമാക്കുകയും പാരന്റ് ഗ്രിഡിന് നിർവചിക്കപ്പെട്ട നിര വലുപ്പങ്ങൾ ഉണ്ടാവുകയും ചെയ്താൽ, സബ്ഗ്രിഡ് ആ വലുപ്പങ്ങൾ ഇൻഹെറിറ്റ് ചെയ്യും. എന്നിരുന്നാലും, സബ്ഗ്രിഡ് പാരന്റ് ഗ്രിഡിലെ ഒന്നിലധികം വരികളിലോ നിരകളിലോ വ്യാപിക്കുകയാണെങ്കിൽ, ആ വ്യാപിച്ച ട്രാക്കുകൾ സബ്ഗ്രിഡിനുള്ളിൽ എങ്ങനെ വലുപ്പം നൽകണമെന്ന് നിങ്ങൾ നിർവചിക്കേണ്ടി വന്നേക്കാം.

3. `grid-column-start`, `grid-column-end`, `grid-row-start`, `grid-row-end`

ഈ പ്രോപ്പർട്ടികൾ പാരന്റ് ഗ്രിഡിനുള്ളിൽ സബ്ഗ്രിഡിന്റെ സ്ഥാനവും വ്യാപനവും നിർണ്ണയിക്കുന്നു. പാരന്റ് ഗ്രിഡിൽ സബ്ഗ്രിഡ് ഏതൊക്കെ വരികളും നിരകളും ഉൾക്കൊള്ളണമെന്ന് നിർവചിക്കാൻ നിങ്ങൾ ഈ പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കുന്നു. ഈ പ്രോപ്പർട്ടികൾ സബ്ഗ്രിഡിന്റെ ഇൻഹെറിറ്റ് ചെയ്ത ട്രാക്ക് നിർവചനങ്ങളുമായി എങ്ങനെ സംവദിക്കുന്നു എന്ന് മനസ്സിലാക്കേണ്ടത് പ്രധാനമാണ്.

ഉദാഹരണത്തിന്, ഒരു സബ്ഗ്രിഡ് പാരന്റ് ഗ്രിഡിൽ രണ്ട് നിരകൾ വ്യാപിക്കുകയാണെങ്കിൽ, അത് ആ രണ്ട് നിരകളുടെ വലുപ്പങ്ങൾ ഇൻഹെറിറ്റ് ചെയ്യുകയും അതിന്റെ ഉള്ളടക്കം അതനുസരിച്ച് വിതരണം ചെയ്യുകയും ചെയ്യും.

4. ഗ്രിഡ് ലൈനുകൾക്ക് പേര് നൽകൽ

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

            .parent {
  display: grid;
  grid-template-columns: [start] 1fr [content-start] 2fr [content-end] 1fr [end];
  grid-template-rows: auto auto;
}

.child {
  grid-column: content-start / content-end;
  grid-row: 1;
  display: grid;
  grid-template-columns: subgrid;
}
            

              
                Copy
              
            
          

ഈ സാഹചര്യത്തിൽ, `.child` ഘടകം പാരന്റ് ഗ്രിഡിലെ `content-start` ലൈനിൽ നിന്ന് `content-end` ലൈൻ വരെ വ്യാപിക്കുന്നു. അതിന്റെ നിരകൾ ഇപ്പോൾ ഈ ലൈനുകൾക്കിടയിൽ നിർവചിച്ചിട്ടുള്ള വലുപ്പങ്ങൾ ഇൻഹെറിറ്റ് ചെയ്യുന്നു.

സിഎസ്എസ് സബ്ഗ്രിഡ് നടപ്പിലാക്കൽ: ഒരു പ്രായോഗിക ഉദാഹരണം

വിന്യസിച്ച ലേബലുകളും ഇൻപുട്ട് ഫീൽഡുകളുമുള്ള ഒരു ഫോം നിർമ്മിക്കുന്ന ഒരു പ്രായോഗിക ഉദാഹരണത്തിലൂടെ സബ്ഗ്രിഡ് വിശദീകരിക്കാം.

HTML ഘടന:

            <div class="form-container">
  <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>
</div>
            

              
                Copy
              
            
          

സബ്ഗ്രിഡ് ഉപയോഗിച്ചുള്ള സിഎസ്എസ് സ്റ്റൈലിംഗ്:

            .form-container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Define column widths for label and input */
  grid-gap: 10px;
  max-width: 500px;
  margin: 0 auto;
}

.form-row {
  display: grid;
  grid-template-columns: subgrid;
  /* Inherit column definitions from .form-container */
}

label {
  text-align: right;
  padding-right: 10px;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
}

/* Optional: Style the grid lines for debugging */
.form-container, .form-row {
    /* outline: 1px solid red; */ /* Helpful for visualizing grid structure */
}

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, `.form-container` ആണ് പാരന്റ് ഗ്രിഡ്. ഇത് രണ്ട് നിരകൾ നിർവചിക്കുന്നു: ഒന്ന് ലേബലുകൾക്കും മറ്റൊന്ന് ഇൻപുട്ട് ഫീൽഡുകൾക്കും. ഓരോ `.form-row` ഘടകവും `.form-container`-നുള്ളിലെ ഒരു ഗ്രിഡ് ഐറ്റമാണ്, കൂടാതെ ഇത് `.form-container`-ൽ നിന്ന് നിര നിർവചനങ്ങൾ ഇൻഹെറിറ്റ് ചെയ്യുന്ന ഒരു സബ്ഗ്രിഡ് ആയും നിർവചിച്ചിരിക്കുന്നു. ഇത് ലേബലുകളും ഇൻപുട്ട് ഫീൽഡുകളും എല്ലാ വരികളിലും കൃത്യമായി വിന്യസിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുന്നു, ഇത് വൃത്തിയുള്ളതും ചിട്ടയുള്ളതുമായ ഒരു ഫോം ലേഔട്ട് സൃഷ്ടിക്കുന്നു.

വിപുലമായ സബ്ഗ്രിഡ് ടെക്നിക്കുകൾ

1. സബ്ഗ്രിഡ് ഉപയോഗിച്ച് ട്രാക്കുകൾ വ്യാപിപ്പിക്കൽ

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

            .parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-gap: 10px;
}

.child {
  grid-column: 2 / 4; /* Spans two columns in the parent */
  grid-row: 2;
  display: grid;
  grid-template-columns: subgrid;
  /* Inherits column definitions from columns 2 and 3 of the parent */
}
            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, `.child` പാരന്റ് ഗ്രിഡിന്റെ 2-ഉം 3-ഉം നിരകൾ വ്യാപിക്കുന്നു. `.child`-നുള്ളിലെ സബ്ഗ്രിഡ് ആ രണ്ട് നിരകളുടെയും സംയോജിത വീതി ഇൻഹെറിറ്റ് ചെയ്യും.

2. സബ്ഗ്രിഡും `grid-template-areas`-ഉം സംയോജിപ്പിക്കൽ

`grid-template-areas` നിങ്ങളുടെ ഗ്രിഡിന്റെ ഘടന ദൃശ്യപരമായി നിർവചിക്കാൻ ഒരു മാർഗം നൽകുന്നു. വളരെ ചിട്ടയുള്ളതും പരിപാലിക്കാൻ എളുപ്പമുള്ളതുമായ ലേഔട്ടുകൾ സൃഷ്ടിക്കാൻ നിങ്ങൾക്ക് ഇത് സബ്ഗ്രിഡുമായി സംയോജിപ്പിക്കാൻ കഴിയും.

            .parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "header header header"
    "sidebar content sidebar";
}

.child {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  /* Inherits column definitions from the 'content' area in the parent */
}

            

              
                Copy
              
            
          

ഇവിടെ, `.child` ഘടകം പാരന്റ് ഗ്രിഡിന്റെ `content` ഏരിയയിൽ സ്ഥാപിച്ചിരിക്കുന്നു, അതിന്റെ സബ്ഗ്രിഡ് ആ ഏരിയയുടെ നിര നിർവചനങ്ങൾ ഇൻഹെറിറ്റ് ചെയ്യുന്നു.

3. `minmax()` ഫംഗ്ഷനോടൊപ്പം സബ്ഗ്രിഡ്

`minmax()` ഫംഗ്ഷൻ ഒരു ഗ്രിഡ് ട്രാക്കിന് കുറഞ്ഞതും കൂടിയതുമായ വലുപ്പം നിർവചിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഒരു സബ്ഗ്രിഡ് ട്രാക്ക് അതിൽ അടങ്ങിയിരിക്കുന്ന ഉള്ളടക്കം പരിഗണിക്കാതെ തന്നെ വളരെ ചെറുതോ വലുതോ ആകുന്നില്ലെന്ന് ഉറപ്പാക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുമ്പോൾ ഇത് ഉപയോഗപ്രദമാണ്.

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

.child {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: subgrid;
  /* Inherits the minmax() definition from the first column of the parent */
}
            

              
                Copy
              
            
          

ഈ സാഹചര്യത്തിൽ, പാരന്റ് ഗ്രിഡിന്റെ ആദ്യ നിരയ്ക്ക് കുറഞ്ഞത് 100px വീതിയും പരമാവധി 1fr വീതിയും ഉണ്ട്. സബ്ഗ്രിഡ് ഈ പരിധി ഇൻഹെറിറ്റ് ചെയ്യും, ഇത് അതിന്റെ ആദ്യ നിര എപ്പോഴും ഈ പരിധികൾ പാലിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുന്നു.

ബ്രൗസർ അനുയോജ്യതയും ഫാൾബാക്കുകളും

സബ്ഗ്രിഡ് ഒരു ശക്തമായ ഫീച്ചറാണെങ്കിലും, ബ്രൗസർ അനുയോജ്യത പരിഗണിക്കേണ്ടത് അത്യാവശ്യമാണ്. 2024-ന്റെ അവസാനത്തോടെ, Chrome, Firefox, Safari, Edge എന്നിവയുൾപ്പെടെ മിക്ക ആധുനിക ബ്രൗസറുകളും സിഎസ്എസ് സബ്ഗ്രിഡിനെ പിന്തുണയ്ക്കുന്നു. എന്നിരുന്നാലും, പഴയ ബ്രൗസറുകൾക്ക് പൂർണ്ണ പിന്തുണ ഉണ്ടാകണമെന്നില്ല.

എല്ലാ ബ്രൗസറുകളിലും സ്ഥിരമായ ഒരു ഉപയോക്തൃ അനുഭവം ഉറപ്പാക്കാൻ, ഇനിപ്പറയുന്ന തന്ത്രങ്ങൾ നടപ്പിലാക്കുന്നത് പരിഗണിക്കുക:

• ഫീച്ചർ ക്വറികൾ (`@supports`): ബ്രൗസർ സബ്ഗ്രിഡിനെ പിന്തുണയ്ക്കുന്നുണ്ടോ എന്ന് കണ്ടെത്താൻ ഫീച്ചർ ക്വറികൾ ഉപയോഗിക്കുക. പിന്തുണയ്ക്കുന്നുണ്ടെങ്കിൽ, സബ്ഗ്രിഡ് സ്റ്റൈലുകൾ പ്രയോഗിക്കുക; അല്ലെങ്കിൽ, Flexbox അല്ലെങ്കിൽ പരമ്പരാഗത ഗ്രിഡ് ലേഔട്ട് പോലുള്ള പഴയ സിഎസ്എസ് ടെക്നിക്കുകൾ ഉപയോഗിച്ച് ഒരു ഫാൾബാക്ക് ലേഔട്ട് നൽകുക.
• പോളിഫില്ലുകൾ: പഴയ ബ്രൗസറുകളിൽ സബ്ഗ്രിഡ് പിന്തുണ നൽകാൻ പോളിഫില്ലുകൾ ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക. എന്നിരുന്നാലും, പോളിഫില്ലുകൾ പേജിന്റെ ലോഡിംഗ് സമയവും സങ്കീർണ്ണതയും വർദ്ധിപ്പിക്കുമെന്ന് ഓർക്കുക.
• പ്രോഗ്രസീവ് എൻഹാൻസ്‌മെന്റ്: സബ്ഗ്രിഡ് ഇല്ലാതെയും നന്നായി പ്രവർത്തിക്കുന്ന തരത്തിൽ നിങ്ങളുടെ ലേഔട്ട് രൂപകൽപ്പന ചെയ്യുക. സബ്ഗ്രിഡിനെ പിന്തുണയ്ക്കുന്ന ബ്രൗസറുകൾക്കുള്ള ഒരു മെച്ചപ്പെടുത്തലായി ഉപയോഗിക്കുക, പഴയ ബ്രൗസറുകളിലെ ലേഔട്ട് തകർക്കാതെ മികച്ചതും കൂടുതൽ വിന്യസിച്ചതുമായ അനുഭവം നൽകുക.

            @supports (grid-template-columns: subgrid) {
  .form-row {
    display: grid;
    grid-template-columns: subgrid;
  }
}

@supports not (grid-template-columns: subgrid) {
  /* Fallback layout using Flexbox or older Grid techniques */
  .form-row {
    display: flex;
    align-items: center;
  }

  label {
    flex: 1;
    text-align: right;
    padding-right: 10px;
  }

  input[type="text"],
  input[type="email"],
  textarea {
    flex: 2;
    width: auto; /* Override width: 100% from the main CSS */
  }
}
            

              
                Copy
              
            
          

ഈ ഉദാഹരണം സബ്ഗ്രിഡിനെ പിന്തുണയ്ക്കാത്ത ബ്രൗസറുകൾക്കായി ഫ്ലെക്സ്ബോക്സ് അടിസ്ഥാനമാക്കിയുള്ള ഒരു ഫാൾബാക്ക് നൽകുന്നു, ഫോം പ്രവർത്തനക്ഷമവും കാഴ്ചയിൽ സ്വീകാര്യവുമാണെന്ന് ഉറപ്പാക്കുന്നു.

സിഎസ്എസ് സബ്ഗ്രിഡ് ഉപയോഗിക്കുന്നതിനുള്ള മികച്ച രീതികൾ

സബ്ഗ്രിഡിന്റെ പ്രയോജനങ്ങൾ പരമാവധിയാക്കാനും സാധ്യമായ അപകടങ്ങൾ ഒഴിവാക്കാനും, ഈ മികച്ച രീതികൾ പിന്തുടരുക:

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

സാധാരണ പിഴവുകളും ട്രബിൾഷൂട്ടിംഗും

സബ്ഗ്രിഡ് പല ലേഔട്ട് വെല്ലുവിളികളും ലളിതമാക്കുമ്പോൾ, ശ്രദ്ധിക്കേണ്ട ചില സാധാരണ പിഴവുകളുണ്ട്:

• തെറ്റായ `grid-column`, `grid-row` പ്ലേസ്മെന്റ്: `grid-column-start`, `grid-column-end`, `grid-row-start`, `grid-row-end` എന്നിവ ഉപയോഗിച്ച് സബ്ഗ്രിഡ് പാരന്റ് ഗ്രിഡിനുള്ളിൽ ശരിയായി സ്ഥാപിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക. തെറ്റായ പ്ലേസ്മെന്റ് അപ്രതീക്ഷിത ലേഔട്ട് ഫലങ്ങളിലേക്ക് നയിച്ചേക്കാം.
• വൈരുദ്ധ്യമുള്ള ട്രാക്ക് നിർവചനങ്ങൾ: സബ്ഗ്രിഡിന്റെ ട്രാക്ക് നിർവചനങ്ങൾ പാരന്റ് ഗ്രിഡിന്റേതുമായി വൈരുദ്ധ്യത്തിലാണെങ്കിൽ, ഫലങ്ങൾ പ്രവചനാതീതമാകാം. സബ്ഗ്രിഡ് ആവശ്യമുള്ള ട്രാക്ക് നിർവചനങ്ങൾ ഇൻഹെറിറ്റ് ചെയ്യുന്നുണ്ടെന്നും വൈരുദ്ധ്യമുള്ള സ്റ്റൈലുകൾ ഇല്ലെന്നും ഉറപ്പാക്കുക.
• `display: grid;` സെറ്റ് ചെയ്യാൻ മറക്കുന്നത്: പാരന്റ് ഗ്രിഡിലും സബ്ഗ്രിഡ് എലമെന്റിലും `display: grid;` സെറ്റ് ചെയ്യാൻ ഓർക്കുക. ഇത് കൂടാതെ, ഗ്രിഡ് ലേഔട്ട് ശരിയായി പ്രയോഗിക്കപ്പെടില്ല.
• അപ്രതീക്ഷിത ഓവർഫ്ലോ: ഒരു സബ്ഗ്രിഡ് ട്രാക്കിനുള്ളിലെ ഉള്ളടക്കം അതിന് അനുവദിച്ച സ്ഥലത്തേക്കാൾ കൂടുതലായാൽ, അത് ഓവർഫ്ലോ പ്രശ്നങ്ങൾക്ക് കാരണമാകും. സബ്ഗ്രിഡ് ട്രാക്കുകൾക്കുള്ളിലെ ഉള്ളടക്കം നിയന്ത്രിക്കാൻ `overflow: auto;` അല്ലെങ്കിൽ മറ്റ് ഓവർഫ്ലോ പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കുക.
• ബ്രൗസർ അനുയോജ്യത പ്രശ്നങ്ങൾ: എപ്പോഴും നിങ്ങളുടെ ലേഔട്ടുകൾ ഒന്നിലധികം ബ്രൗസറുകളിൽ പരീക്ഷിക്കുകയും സബ്ഗ്രിഡിനെ പിന്തുണയ്ക്കാത്ത പഴയ ബ്രൗസറുകൾക്കായി ഫാൾബാക്കുകൾ നൽകുകയും ചെയ്യുക.

യഥാർത്ഥ ലോകത്തിലെ ഉപയോഗങ്ങളും ഉദാഹരണങ്ങളും

യഥാർത്ഥ വെബ് ഡിസൈൻ സാഹചര്യങ്ങളുടെ ഒരു വലിയ ശ്രേണിയിൽ പ്രയോഗിക്കാൻ കഴിയുന്ന ഒരു വൈവിധ്യമാർന്ന ഉപകരണമാണ് സബ്ഗ്രിഡ്. ചില ഉദാഹരണങ്ങൾ ഇതാ:

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

സിഎസ്എസ് ലേഔട്ടിന്റെ ഭാവി: സബ്ഗ്രിഡിനപ്പുറം

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

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

ഈ ഉയർന്നുവരുന്ന സാങ്കേതികവിദ്യകളെക്കുറിച്ച് അറിഞ്ഞിരിക്കുന്നതിലൂടെ, നിങ്ങൾക്ക് വെബ് ഡിസൈനിന്റെ അതിരുകൾ ഭേദിക്കാനും കൂടുതൽ ആകർഷകവും ഉപയോക്തൃ-സൗഹൃദവുമായ അനുഭവങ്ങൾ സൃഷ്ടിക്കാനും കഴിയും.

ഉപസംഹാരം

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

കൂടുതൽ വിവരങ്ങൾക്കായി

• എംഡിഎൻ വെബ് ഡോക്സ്: സിഎസ്എസ് സബ്ഗ്രിഡ്
• സിഎസ്എസ് ഗ്രിഡ് ഗാർഡൻ: സിഎസ്എസ് ഗ്രിഡ് പഠിക്കാം
• സിഎസ്എസ് ഗ്രിഡിനൊരു സമ്പൂർണ്ണ വഴികാട്ടി: സിഎസ്എസ്-ട്രിക്സ്