M

MLOG

తెలుగు

CSS సబ్‌గ్రిడ్‌ను అన్వేషించండి మరియు ఆధునిక వెబ్ డిజైన్ కోసం సంక్లిష్టమైన, రెస్పాన్సివ్, మరియు మెయింటెనబుల్ నెస్టెడ్ లేఅవుట్‌లను ఎలా సృష్టించాలో తెలుసుకోండి. అధునాతన గ్రిడ్ టెక్నిక్‌లలో నైపుణ్యం సాధించండి.

CSS సబ్‌గ్రిడ్: నెస్టెడ్ లేఅవుట్‌ల శక్తిని ఆవిష్కరించడం

CSS గ్రిడ్ వెబ్ లేఅవుట్‌లో విప్లవాత్మక మార్పులు తెచ్చింది, ఇది అసమానమైన సౌలభ్యాన్ని మరియు నియంత్రణను అందిస్తుంది. అయితే, నెస్టెడ్ గ్రిడ్‌లను నిర్వహించడం కొన్నిసార్లు కష్టంగా మారుతుంది. ఇక్కడే CSS సబ్‌గ్రిడ్ రక్షించడానికి వస్తుంది. సబ్‌గ్రిడ్ ఒక గ్రిడ్ ఐటమ్‌ను దాని పేరెంట్ గ్రిడ్ యొక్క ట్రాక్ సైజింగ్‌ను వారసత్వంగా పొందేందుకు అనుమతిస్తుంది, సంక్లిష్టమైన లేఅవుట్‌లను సరళీకరిస్తుంది మరియు మీ కోడ్‌ను మరింత మెయింటెనబుల్‌గా చేస్తుంది. ఈ వ్యాసం CSS సబ్‌గ్రిడ్‌ను అర్థం చేసుకోవడానికి మరియు అమలు చేయడానికి ఒక సమగ్ర మార్గదర్శినిని అందిస్తుంది, అన్ని స్థాయిల డెవలపర్‌ల కోసం ఆచరణాత్మక ఉదాహరణలు మరియు అంతర్దృష్టులతో పూర్తి చేయబడింది.

CSS సబ్‌గ్రిడ్ అంటే ఏమిటి?

సబ్‌గ్రిడ్ అనేది CSS గ్రిడ్ యొక్క ఒక ఫీచర్, ఇది ఒక గ్రిడ్ ఐటమ్‌ను స్వయంగా ఒక గ్రిడ్‌గా మార్చడానికి వీలు కల్పిస్తుంది, దాని పేరెంట్ గ్రిడ్ ద్వారా నిర్వచించబడిన రో మరియు కాలమ్ ట్రాక్‌లను వారసత్వంగా పొందుతుంది. దీని అర్థం మీరు ప్రతి నెస్టెడ్ గ్రిడ్‌లో ట్రాక్ సైజ్‌లను స్పష్టంగా నిర్వచించకుండా బహుళ నెస్టెడ్ గ్రిడ్‌ల అంతటా కంటెంట్‌ను సమలేఖనం చేయవచ్చు. దీనిని పేరెంట్ గ్రిడ్ యొక్క నిర్మాణాన్ని దాని పిల్లలలోకి విస్తరించే మార్గంగా భావించండి, ఇది మరింత సమన్వయ మరియు స్థిరమైన లేఅవుట్‌ను సృష్టిస్తుంది.

సబ్‌గ్రిడ్‌ను ఎందుకు ఉపయోగించాలి?

బ్రౌజర్ అనుకూలత

అమలులోకి దిగే ముందు, బ్రౌజర్ అనుకూలతను తనిఖీ చేయడం చాలా అవసరం. 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>

CSS స్టైలింగ్

ఇప్పుడు, పేరెంట్ గ్రిడ్ మరియు .content ఎలిమెంట్ లోపల సబ్‌గ్రిడ్‌ను సృష్టించడానికి CSS ను నిర్వచిద్దాం.


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

/* .content సబ్‌గ్రిడ్‌లోని ఐటమ్‌ల స్థానాన్ని నిర్వచించండి */
.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;
}

ఇంప్లిసిట్ ట్రాక్‌లను నిర్వహించడం

గ్రిడ్ ఐటమ్‌ల సంఖ్య పేరెంట్ గ్రిడ్‌లో నిర్వచించబడిన ట్రాక్‌ల సంఖ్యను మించిపోతే, సబ్‌గ్రిడ్ ఇంప్లిసిట్ ట్రాక్‌లను సృష్టిస్తుంది. మీరు సాధారణ CSS గ్రిడ్ లాగానే grid-auto-rows మరియు grid-auto-columns ప్రాపర్టీలను ఉపయోగించి ఈ ఇంప్లిసిట్ ట్రాక్‌ల సైజ్‌ను నియంత్రించవచ్చు.

ఆచరణాత్మక ఉదాహరణలు మరియు వినియోగ సందర్భాలు

అధునాతన లేఅవుట్‌లను రూపొందించడానికి సబ్‌గ్రిడ్‌ను ఎలా ఉపయోగించవచ్చో కొన్ని ఆచరణాత్మక ఉదాహరణలను అన్వేషిద్దాం.

సంక్లిష్ట ఉత్పత్తి జాబితా

బహుళ ఉత్పత్తి వివరాలను (చిత్రం, పేరు, వివరణ, ధర) స్థిరంగా మరియు సమలేఖనంగా ప్రదర్శించాలనుకుంటున్న ఉత్పత్తి జాబితాను ఊహించుకోండి. సబ్‌గ్రిడ్ దీన్ని సులభంగా సాధించడంలో సహాయపడుతుంది.


<div class="product-grid">
  <div class="product">
    <img src="product1.jpg" alt="ఉత్పత్తి 1">
    <h3>ఉత్పత్తి పేరు 1</h3>
    <p>ఉత్పత్తి 1 యొక్క వివరణ.</p>
    <span>$99.99</span>
  </div>
  <div class="product">
    <img src="product2.jpg" alt="ఉత్పత్తి 2">
    <h3>ఉత్పత్తి పేరు 2</h3>
    <p>ఉత్పత్తి 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>ప్రధాన వ్యాసం శీర్షిక</h2>
    <p>ప్రధాన వ్యాసం కంటెంట్...</p>
  </div>
  <div class="sidebar-article">
    <h3>సైడ్‌బార్ వ్యాసం శీర్షిక</h3>
    <p>సైడ్‌బార్ వ్యాసం కంటెంట్...</p>
  </div>
  <div class="featured-image">
    <img src="featured.jpg" alt="ఫీచర్డ్ ఇమేజ్">
  </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;
}

ఈ ఉదాహరణలో, ప్రధాన వ్యాసం, సైడ్‌బార్ వ్యాసం, మరియు ఫీచర్డ్ ఇమేజ్ అన్నీ ఒకే గ్రిడ్ నిర్మాణాన్ని పంచుకుంటాయి, వివిధ విభాగాలలో శీర్షికలు మరియు కంటెంట్ యొక్క స్థిరమైన సమలేఖనాన్ని నిర్ధారిస్తాయి. సబ్‌గ్రిడ్ వాడకం CSSను సులభతరం చేస్తుంది మరియు లేఅవుట్‌ను మరింత మెయింటెనబుల్‌గా చేస్తుంది.

ఫారం లేఅవుట్‌లు

సమలేఖనం చేయబడిన లేబుల్‌లు మరియు ఇన్‌పుట్‌లతో సంక్లిష్టమైన ఫారం లేఅవుట్‌లను సృష్టించడం కష్టంగా ఉంటుంది. సబ్‌గ్రిడ్ ఒక సూటిగా ఉండే పరిష్కారాన్ని అందిస్తుంది.


<form class="form-grid">
  <div class="form-row">
    <label for="name">పేరు:</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="form-row">
    <label for="email">ఈమెయిల్:</label>
    <input type="email" id="email" name="email">
  </div>
  <div class="form-row">
    <label for="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; /* పేరెంట్ గ్రిడ్‌లో ట్రాక్ సైజ్‌లను నిర్వచించండి */
    gap: 10px;
}

ఇక్కడ, .form-row ఎలిమెంట్లు లేబుల్‌లను మరియు ఇన్‌పుట్ ఫీల్డ్‌లను అన్ని రోలలో స్థిరంగా సమలేఖనం చేయడానికి సబ్‌గ్రిడ్‌ను ఉపయోగిస్తాయి. ట్రాక్ సైజ్‌లు పేరెంట్ గ్రిడ్‌లో (.form-grid) నిర్వచించబడ్డాయి, ఇది ఒకే విధమైన రూపాన్ని నిర్ధారిస్తుంది.

ఉత్తమ పద్ధతులు మరియు పరిగణనలు

సబ్‌గ్రిడ్ vs. సాధారణ CSS గ్రిడ్

సబ్‌గ్రిడ్ మరియు CSS గ్రిడ్ రెండూ శక్తివంతమైన లేఅవుట్ సాధనాలు అయినప్పటికీ, అవి వేర్వేరు ప్రయోజనాలకు ఉపయోగపడతాయి. సాధారణ CSS గ్రిడ్ మొత్తం పేజీ లేఅవుట్‌లను రూపొందించడానికి మరియు మీ కంటెంట్ యొక్క ప్రాథమిక నిర్మాణాన్ని నిర్వచించడానికి అనువైనది. మరోవైపు, సబ్‌గ్రిడ్ నెస్టెడ్ లేఅవుట్‌లను నిర్వహించడానికి మరియు బహుళ స్థాయిల నెస్టింగ్‌లో కంటెంట్‌ను సమలేఖనం చేయడానికి ఉత్తమంగా సరిపోతుంది. సబ్‌గ్రిడ్‌ను CSS గ్రిడ్ యొక్క విస్తరణగా భావించండి, ఇది సంక్లిష్టమైన లేఅవుట్ దృశ్యాలను సులభతరం చేస్తుంది.

సాధారణ సమస్యల పరిష్కారం

ముగింపు

CSS సబ్‌గ్రిడ్ CSS గ్రిడ్ టూల్‌కిట్‌కు ఒక విలువైన అదనంగా ఉంది, ఇది సంక్లిష్టమైన నెస్టెడ్ లేఅవుట్‌లను నిర్వహించడానికి మరియు దృశ్యపరంగా ఆకర్షణీయమైన, మెయింటెనబుల్, మరియు రెస్పాన్సివ్ వెబ్ డిజైన్‌లను రూపొందించడానికి ఒక శక్తివంతమైన మార్గాన్ని అందిస్తుంది. ప్రాథమిక భావనలను అర్థం చేసుకోవడం మరియు ఆచరణాత్మక ఉదాహరణలను అన్వేషించడం ద్వారా, మీరు సాంప్రదాయ CSS టెక్నిక్‌లతో గతంలో సాధించడం కష్టంగా లేదా అసాధ్యంగా ఉన్న అధునాతన లేఅవుట్‌లను నిర్మించడానికి సబ్‌గ్రిడ్‌ను ఉపయోగించవచ్చు. సబ్‌గ్రిడ్‌ను స్వీకరించండి మరియు మీ వెబ్ డెవలప్‌మెంట్ ప్రాజెక్ట్‌లలో కొత్త అవకాశాలను అన్‌లాక్ చేయండి. సబ్‌గ్రిడ్ మిమ్మల్ని CSS గ్రిడ్ యొక్క శక్తిని నెస్టెడ్ ఎలిమెంట్లలోకి నిజంగా విస్తరించడానికి అనుమతిస్తుంది, ఇది ఎక్కువ నియంత్రణ మరియు కోడ్ మెయింటెనబిలిటీకి వీలు కల్పిస్తుంది. దానితో ప్రయోగాలు చేయండి మరియు సంక్లిష్టమైన CSS లేఅవుట్‌లను సరళీకరించడంలో దాని ప్రయోజనాలను అన్వేషించండి.

మరిన్ని వనరులు