സിഎസ്എസ് സബ്ഗ്രിഡ്: നെസ്റ്റഡ് ലേഔട്ടുകളുടെ ശക്തി അഴിച്ചുവിടുന്നു

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

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

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

എന്തുകൊണ്ട് സബ്ഗ്രിഡ് ഉപയോഗിക്കണം?

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

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

ഇത് നടപ്പിലാക്കുന്നതിന് മുമ്പ്, ബ്രൗസർ കോംപാറ്റിബിലിറ്റി പരിശോധിക്കേണ്ടത് അത്യാവശ്യമാണ്. 2023-ന്റെ അവസാനത്തോടെ, ക്രോം, ഫയർഫോക്സ്, സഫാരി, എഡ്ജ് എന്നിവയുൾപ്പെടെയുള്ള ആധുനിക ബ്രൗസറുകളിൽ സബ്ഗ്രിഡിന് നല്ല പിന്തുണയുണ്ട്. എന്നിരുന്നാലും, ഏറ്റവും പുതിയ പിന്തുണ നില പരിശോധിക്കാൻ Can I use പോലുള്ള വെബ്സൈറ്റുകൾ ഉപയോഗിക്കുന്നത് എല്ലായ്പ്പോഴും ഒരു നല്ല ശീലമാണ്.

അടിസ്ഥാന സബ്ഗ്രിഡ് നടപ്പിലാക്കൽ

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

HTML ഘടന

ആദ്യം, നമ്മുടെ ഗ്രിഡിനായുള്ള അടിസ്ഥാന HTML ഘടന നിർവചിക്കാം.

            
<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">
    <div class="item-1">Item 1</div>
    <div class="item-2">Item 2</div>
    <div class="item-3">Item 3</div>
    <div class="item-4">Item 4</div>
  </div>
  <div class="footer">Footer</div>
</div>

            

              
                Copy
              
            
          

സിഎസ്എസ് സ്റ്റൈലിംഗ്

ഇനി, പാരന്റ് ഗ്രിഡും .content എലമെന്റിനുള്ളിലെ സബ്ഗ്രിഡും നിർമ്മിക്കാൻ ആവശ്യമായ സിഎസ്എസ് നിർവചിക്കാം.

            
.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  height: 100vh;
}

.header {
  grid-area: header;
  background-color: #eee;
  padding: 10px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #ddd;
  padding: 10px;
}

.content {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  background-color: #ccc;
  padding: 10px;
}

.item-1, .item-2, .item-3, .item-4 {
  background-color: #bbb;
  padding: 10px;
}

.footer {
  grid-area: footer;
  background-color: #eee;
  padding: 10px;
}

/* Define placement of items inside the .content subgrid */
.content {
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    display: grid;
}

.item-1 { grid-column: 1; grid-row: 1; }
.item-2 { grid-column: 2; grid-row: 1; }
.item-3 { grid-column: 1; grid-row: 2; }
.item-4 { grid-column: 2; grid-row: 2; }



            

              
                Copy
              
            
          

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

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

ട്രാക്കുകൾ സ്പാൻ ചെയ്യുന്നു

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

            
.item-1 {
  grid-column: 1 / span 2;
  grid-row: 1;
}

            

              
                Copy
              
            
          

ഈ കോഡ് .item-1-നെ സബ്ഗ്രിഡിന്റെ ആദ്യത്തെ രണ്ട് കോളങ്ങളിൽ വ്യാപിപ്പിക്കും.

പേരുള്ള ഗ്രിഡ് ലൈനുകൾ

കൂടുതൽ വ്യക്തതയ്ക്കും നിയന്ത്രണത്തിനും വേണ്ടി നിങ്ങൾക്ക് സബ്ഗ്രിഡിനൊപ്പം പേരുള്ള ഗ്രിഡ് ലൈനുകൾ ഉപയോഗിക്കാം. നിങ്ങളുടെ പാരന്റ് ഗ്രിഡിൽ പേരുള്ള ലൈനുകൾ ഉണ്ടെന്ന് കരുതുക:

            
.container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];
  grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  height: 100vh;
}

            

              
                Copy
              
            
          

നിങ്ങളുടെ സബ്ഗ്രിഡിനുള്ളിൽ ഈ പേരുള്ള ലൈനുകൾ നിങ്ങൾക്ക് റെഫർ ചെയ്യാൻ കഴിയും:

            
.content {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.item-1 {
  grid-column: content-start / content-end;
  grid-row: content-start;
}

            

              
                Copy
              
            
          

ഇംപ്ലിസിറ്റ് ട്രാക്കുകൾ കൈകാര്യം ചെയ്യുന്നു

ഗ്രിഡ് ഐറ്റംസിന്റെ എണ്ണം പാരന്റ് ഗ്രിഡിൽ നിർവചിച്ചിട്ടുള്ള ട്രാക്കുകളുടെ എണ്ണത്തേക്കാൾ കൂടുതലാണെങ്കിൽ, സബ്ഗ്രിഡ് ഇംപ്ലിസിറ്റ് ട്രാക്കുകൾ സൃഷ്ടിക്കും. സാധാരണ സിഎസ്എസ് ഗ്രിഡിലെന്നപോലെ grid-auto-rows, grid-auto-columns എന്നീ പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് ഈ ഇംപ്ലിസിറ്റ് ട്രാക്കുകളുടെ വലുപ്പം നിങ്ങൾക്ക് നിയന്ത്രിക്കാൻ കഴിയും.

പ്രായോഗിക ഉദാഹരണങ്ങളും ഉപയോഗങ്ങളും

സങ്കീർണ്ണമായ ലേഔട്ടുകൾ സൃഷ്ടിക്കാൻ സബ്ഗ്രിഡ് എങ്ങനെ ഉപയോഗിക്കാം എന്നതിന്റെ ചില പ്രായോഗിക ഉദാഹരണങ്ങൾ നമുക്ക് പരിശോധിക്കാം.

സങ്കീർണ്ണമായ ഉൽപ്പന്നങ്ങളുടെ ലിസ്റ്റിംഗ്

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

            
<div class="product-grid">
  <div class="product">
    <img src="product1.jpg" alt="Product 1">
    <h3>Product Name 1</h3>
    <p>Description of product 1.</p>
    <span>$99.99</span>
  </div>
  <div class="product">
    <img src="product2.jpg" alt="Product 2">
    <h3>Product Name 2</h3>
    <p>Description of product 2.</p>
    <span>$129.99</span>
  </div>
</div>

            

              
                Copy
              
            
          

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

.product {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  border: 1px solid #ccc;
  padding: 10px;
}

.product > img {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: auto;
}

.product > h3 {
  grid-column: 1;
  grid-row: 2;
  margin-top: 10px;
}

.product > p {
  grid-column: 1;
  grid-row: 3;
  margin-top: 5px;
}

.product > span {
  grid-column: 1;
  grid-row: 4;
  margin-top: 10px;
  font-weight: bold;
}

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, .product എലമെന്റുകൾ സബ്ഗ്രിഡ് ഉപയോഗിച്ച് ചിത്രം, പേര്, വിവരണം, വില എന്നിവ എല്ലാ ഉൽപ്പന്നങ്ങളിലും ഒരേപോലെ വിന്യസിക്കുന്നു, അവയുടെ ഉള്ളടക്കത്തിന്റെ നീളം വ്യത്യസ്തമാണെങ്കിൽ പോലും. ഇത് വൃത്തിയുള്ളതും പ്രൊഫഷണലുമായ ഒരു അവതരണം ഉറപ്പാക്കുന്നു.

മാഗസിൻ ലേഔട്ട്

വ്യത്യസ്ത ഉള്ളടക്ക ബ്ലോക്കുകളുള്ള മാഗസിൻ-സ്റ്റൈൽ ലേഔട്ടുകൾ സൃഷ്ടിക്കുന്നത് വെല്ലുവിളി നിറഞ്ഞതാണ്. ലേഔട്ടിന്റെ വിവിധ ഭാഗങ്ങളിലുള്ള എലമെന്റുകളെ വിന്യസിക്കാൻ നിങ്ങളെ അനുവദിച്ചുകൊണ്ട് സബ്ഗ്രിഡ് ഈ പ്രക്രിയ ലളിതമാക്കുന്നു.

            
<div class="magazine-layout">
  <div class="main-article">
    <h2>Main Article Title</h2>
    <p>Main article content...</p>
  </div>
  <div class="sidebar-article">
    <h3>Sidebar Article Title</h3>
    <p>Sidebar article content...</p>
  </div>
  <div class="featured-image">
    <img src="featured.jpg" alt="Featured Image">
  </div>
</div>

            

              
                Copy
              
            
          

            
.magazine-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.main-article {
  grid-column: 1;
  grid-row: 1 / span 2;
  border: 1px solid #ccc;
  padding: 10px;
}

.sidebar-article {
  grid-column: 2;
  grid-row: 1;
  border: 1px solid #ccc;
  padding: 10px;
}

.featured-image {
  grid-column: 2;
  grid-row: 2;
  border: 1px solid #ccc;
  padding: 10px;
}

.magazine-layout > div {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

.magazine-layout h2, .magazine-layout h3 {
    grid-column: 1;
    grid-row: 1;
}

.magazine-layout p {
    grid-column: 1;
    grid-row: 2;
}

.magazine-layout img {
    grid-column: 1;
    grid-row: 1;
}


            

              
                Copy
              
            
          

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

ഫോം ലേഔട്ടുകൾ

ലേബലുകളും ഇൻപുട്ടുകളും ഒരേ നിരപ്പിൽ വരുന്ന സങ്കീർണ്ണമായ ഫോം ലേഔട്ടുകൾ സൃഷ്ടിക്കുന്നത് ബുദ്ധിമുട്ടാണ്. സബ്ഗ്രിഡ് ഇതിന് ലളിതമായ ഒരു പരിഹാരം നൽകുന്നു.

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

            

              
                Copy
              
            
          

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

.form-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.form-row label {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
  padding-right: 10px;
}

.form-row input, .form-row textarea {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
}


.form-grid {
    display: grid;
    grid-template-columns: 150px 1fr; /* Define track sizes in the parent grid */
    gap: 10px;
}


            

              
                Copy
              
            
          

ഇവിടെ, .form-row എലമെന്റുകൾ സബ്ഗ്രിഡ് ഉപയോഗിച്ച് എല്ലാ വരികളിലെയും ലേബലുകളും ഇൻപുട്ട് ഫീൽഡുകളും ഒരേ നിരപ്പിൽ വിന്യസിക്കുന്നു. ട്രാക്ക് വലുപ്പങ്ങൾ പാരന്റ് ഗ്രിഡിൽ (.form-grid) നിർവചിച്ചിരിക്കുന്നു, ഇത് ഒരേപോലെയുള്ള രൂപം ഉറപ്പാക്കുന്നു.

മികച്ച രീതികളും പരിഗണനകളും

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

സബ്ഗ്രിഡും സാധാരണ സിഎസ്എസ് ഗ്രിഡും

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

സാധാരണ പ്രശ്നങ്ങൾ പരിഹരിക്കുന്നു

• സബ്ഗ്രിഡ് പ്രവർത്തിക്കുന്നില്ല: നിങ്ങളുടെ ബ്രൗസർ കോംപാറ്റിബിലിറ്റി രണ്ടുതവണ പരിശോധിക്കുക, സബ്ഗ്രിഡ് എലമെന്റിൽ grid-template-columns: subgrid; കൂടാതെ/അല്ലെങ്കിൽ grid-template-rows: subgrid; സെറ്റ് ചെയ്തുകൊണ്ട് നിങ്ങൾ സബ്ഗ്രിഡ് പ്രവർത്തനക്ഷമമാക്കിയിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക.
• അലൈൻമെന്റ് പ്രശ്നങ്ങൾ: നിങ്ങളുടെ പാരന്റ് ഗ്രിഡിലെ ട്രാക്ക് വലുപ്പങ്ങൾ ശരിയായി നിർവചിച്ചിട്ടുണ്ടെന്നും സബ്ഗ്രിഡ് ഐറ്റംസ് grid-column, grid-row ഉപയോഗിച്ച് ശരിയായി സ്ഥാപിച്ചിട്ടുണ്ടെന്നും പരിശോധിക്കുക.
• അപ്രതീക്ഷിതമായ ലേഔട്ട് ബ്രേക്കുകൾ: റെസ്പോൺസീവ് ഡിസൈൻ പ്രശ്നങ്ങൾ തിരിച്ചറിയാനും പരിഹരിക്കാനും നിങ്ങളുടെ ലേഔട്ട് വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങളിൽ പരീക്ഷിക്കുക.

ഉപസംഹാരം

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

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

• MDN Web Docs: CSS Subgrid
• Smashing Magazine: CSS Grid Subgrid
• CSS-Tricks: CSS Grid Subgrids