M

MLOG

മലയാളം

സിഎസ്എസ് സബ്ഗ്രിഡ് ഉപയോഗിച്ച് ആധുനിക വെബ് ഡിസൈനിനായി സങ്കീർണ്ണവും, റെസ്പോൺസീവും, പരിപാലിക്കാൻ എളുപ്പമുള്ളതുമായ നെസ്റ്റഡ് ലേഔട്ടുകൾ എങ്ങനെ നിർമ്മിക്കാമെന്ന് പഠിക്കുക.

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

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

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

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

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

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

ഇത് നടപ്പിലാക്കുന്നതിന് മുമ്പ്, ബ്രൗസർ കോംപാറ്റിബിലിറ്റി പരിശോധിക്കേണ്ടത് അത്യാവശ്യമാണ്. 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>

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

ഇനി, പാരന്റ് ഗ്രിഡും .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; }

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

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

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

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


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

ഈ കോഡ് .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;
}

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


.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;
}

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

ഗ്രിഡ് ഐറ്റംസിന്റെ എണ്ണം പാരന്റ് ഗ്രിഡിൽ നിർവചിച്ചിട്ടുള്ള ട്രാക്കുകളുടെ എണ്ണത്തേക്കാൾ കൂടുതലാണെങ്കിൽ, സബ്ഗ്രിഡ് ഇംപ്ലിസിറ്റ് ട്രാക്കുകൾ സൃഷ്ടിക്കും. സാധാരണ സിഎസ്എസ് ഗ്രിഡിലെന്നപോലെ 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>


.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;
}

ഈ ഉദാഹരണത്തിൽ, .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>


.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;
}

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

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

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


<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>


.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;
}

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

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

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

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

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

ഉപസംഹാരം

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

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