சிஎஸ்எஸ் சப் கிரிட்: நெஸ்டட் லேஅவுட்களின் சக்தியை வெளிக்கொணர்தல்

சிஎஸ்எஸ் கிரிட் வலைதள லேஅவுட்டில் ஒரு புரட்சியை ஏற்படுத்தியுள்ளது, இது இணையற்ற நெகிழ்வுத்தன்மையையும் கட்டுப்பாட்டையும் வழங்குகிறது. இருப்பினும், நெஸ்டட் கிரிட்களை நிர்வகிப்பது சில நேரங்களில் சிரமமாக மாறும். இங்குதான் சிஎஸ்எஸ் சப் கிரிட் உதவிக்கு வருகிறது. சப் கிரிட் ஒரு கிரிட் ஐட்டத்தை அதன் பெற்றோர் கிரிட்டின் டிராக் அளவை மரபுரிமையாகப் பெற அனுமதிக்கிறது, இது சிக்கலான லேஅவுட்களை எளிதாக்குகிறது மற்றும் உங்கள் கோடை மேலும் பராமரிக்கக்கூடியதாக ஆக்குகிறது. இந்த கட்டுரை, சிஎஸ்எஸ் சப் கிரிட்டைப் புரிந்துகொள்வதற்கும் செயல்படுத்துவதற்கும் ஒரு விரிவான வழிகாட்டியை வழங்குகிறது, இதில் அனைத்து நிலை டெவலப்பர்களுக்கும் நடைமுறை உதாரணங்கள் மற்றும் நுண்ணறிவுகள் உள்ளன.

சிஎஸ்எஸ் சப் கிரிட் என்றால் என்ன?

சப் கிரிட் என்பது சிஎஸ்எஸ் கிரிட்டின் ஒரு அம்சமாகும், இது ஒரு கிரிட் ஐட்டத்தை தானே ஒரு கிரிட்டாக மாற உதவுகிறது, அதன் பெற்றோர் கிரிட்டால் வரையறுக்கப்பட்ட வரிசை மற்றும் நெடுவரிசை டிராக்குகளை மரபுரிமையாகப் பெறுகிறது. இதன் பொருள், ஒவ்வொரு நெஸ்டட் கிரிட்டிலும் டிராக் அளவுகளை வெளிப்படையாக வரையறுக்காமல், பல நெஸ்டட் கிரிட்களில் உள்ளடக்கத்தை நீங்கள் சீரமைக்க முடியும். இதை, பெற்றோர் கிரிட்டின் கட்டமைப்பை அதன் பிள்ளைகளுக்குள் விரிவுபடுத்துவதற்கான ஒரு வழியாக நினையுங்கள், இது மிகவும் ஒருங்கிணைந்த மற்றும் சீரான லேஅவுட்டை உருவாக்குகிறது.

சப் கிரிட்டை ஏன் பயன்படுத்த வேண்டும்?

• எளிமைப்படுத்தப்பட்ட லேஅவுட்கள்: சப் கிரிட் நெஸ்டட் கிரிட்களின் சிக்கலைக் குறைக்கிறது, உங்கள் சிஎஸ்எஸ் கோடை தூய்மையாகவும் புரிந்துகொள்ள எளிதாகவும் ஆக்குகிறது.
• சீரான சீரமைப்பு: பல அடுக்கு நெஸ்டிங்கில் உள்ளடக்கத்தை எளிதாக சீரமைத்து, பார்வைக்கு ஈர்க்கக்கூடிய மற்றும் தொழில்முறை வடிவமைப்பை உறுதிசெய்கிறது.
• மேம்படுத்தப்பட்ட பராமரிப்புத்தன்மை: பெற்றோர் கிரிட்டில் செய்யப்படும் மாற்றங்கள் தானாகவே சப் கிரிட்களுக்கு பரவுகின்றன, பல இடங்களில் கைமுறையாக சரிசெய்யும் தேவையை குறைக்கிறது.
• மேம்படுத்தப்பட்ட ரெஸ்பான்சிவ்னஸ்: சப் கிரிட் ரெஸ்பான்சிவ் வடிவமைப்பு கொள்கைகளுடன் தடையின்றி செயல்படுகிறது, லேஅவுட் முறிவுகளை ஏற்படுத்தாமல் வெவ்வேறு திரை அளவுகளுக்கு லேஅவுட்களை மாற்றியமைக்கிறது.

உலாவி இணக்கத்தன்மை

செயல்படுத்துதலுக்குள் நுழைவதற்கு முன், உலாவி இணக்கத்தன்மையை சரிபார்ப்பது அவசியம். 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; பண்புகள் சப் கிரிட்டிற்கு பெற்றோர் கிரிட்டிலிருந்து டிராக் அளவை மரபுரிமையாகப் பெற அறிவுறுத்துகின்றன. உள்ளடக்கப் பகுதி இப்போது பிரதான கண்டெய்னர் கிரிட்டில் வரையறுக்கப்பட்ட டிராக் அளவிற்கு இணங்குகிறது, சப் கிரிட்டிற்கு எந்த வெளிப்படையான அமைப்புகளும் தேவையில்லை. இது சைட்பார் மற்றும் உள்ளடக்கப் பகுதிக்குள் உள்ள ஐட்டம்களுக்கு இடையில் சரியான சீரமைப்பை உறுதி செய்கிறது.

மேம்பட்ட சப் கிரிட் நுட்பங்கள்

டிராக்குகளை விரிவுபடுத்துதல் (Spanning)

சப் கிரிட், ஒரு வழக்கமான கிரிட்டைப் போலவே, சப் கிரிட்டிற்குள் உள்ள ஐட்டம்களை பல டிராக்குகளில் விரிவுபடுத்தவும் அனுமதிக்கிறது. இது சிக்கலான லேஅவுட்களை உருவாக்குவதில் இன்னும் ಹೆಚ್ಚಿನ நெகிழ்வுத்தன்மையை வழங்குகிறது.

.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; /* பெற்றோர் கிரிட்டில் டிராக் அளவுகளை வரையறுத்தல் */
    gap: 10px;
}

இங்கே, .form-row உறுப்புகள் சப் கிரிட்டைப் பயன்படுத்தி லேபிள்களையும் உள்ளீட்டு புலங்களையும் அனைத்து வரிசைகளிலும் சீராக சீரமைக்கின்றன. டிராக் அளவுகள் பெற்றோர் கிரிட்டில் (.form-grid) வரையறுக்கப்பட்டுள்ளன, இது ஒரு சீரான தோற்றத்தை உறுதி செய்கிறது.

சிறந்த நடைமுறைகள் மற்றும் கருத்தில் கொள்ள வேண்டியவை

• ஒரு திடமான கிரிட் அடித்தளத்துடன் தொடங்குங்கள்: சப் கிரிட்டை செயல்படுத்துவதற்கு முன், உங்கள் பெற்றோர் கிரிட் நன்கு வரையறுக்கப்பட்டதாகவும் ரெஸ்பான்சிவாகவும் இருப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.
• பெயரிடப்பட்ட கிரிட் கோடுகளைப் பயன்படுத்துங்கள்: பெயரிடப்பட்ட கிரிட் கோடுகள், குறிப்பாக சிக்கலான லேஅவுட்களில், வாசிப்புத்திறனையும் பராமரிப்புத்திறனையும் மேம்படுத்துகின்றன.
• முழுமையாக சோதிக்கவும்: உங்கள் சப் கிரிட் லேஅவுட்களை வெவ்வேறு உலாவிகள் மற்றும் சாதனங்களில் சோதித்து சீரான ரெண்டரிங்கை உறுதிசெய்யுங்கள்.
• அணுகல்தன்மையைக் கருத்தில் கொள்ளுங்கள்: சொற்பொருள் HTML ஐப் பயன்படுத்துவதன் மூலமும் பொருத்தமான ARIA பண்புகளை வழங்குவதன் மூலமும் உங்கள் சப் கிரிட் லேஅவுட்கள் ஊனமுற்ற பயனர்களுக்கு அணுகக்கூடியதாக இருப்பதை உறுதி செய்யுங்கள்.
• சப் கிரிட்டை அதிகமாகப் பயன்படுத்த வேண்டாம்: சப் கிரிட் சக்தி வாய்ந்ததாக இருந்தாலும், அது எப்போதும் சிறந்த தீர்வு அல்ல. குறைவான சிக்கலான லேஅவுட்களுக்கு ஃப்ளெக்ஸ்பாக்ஸ் அல்லது வழக்கமான கிரிட் போன்ற எளிமையான மாற்றுகளைக் கருத்தில் கொள்ளுங்கள்.

சப் கிரிட் vs. வழக்கமான சிஎஸ்எஸ் கிரிட்

சப் கிரிட் மற்றும் சிஎஸ்எஸ் கிரிட் இரண்டும் சக்திவாய்ந்த லேஅவுட் கருவிகளாக இருந்தாலும், அவை வெவ்வேறு நோக்கங்களுக்கு உதவுகின்றன. வழக்கமான சிஎஸ்எஸ் கிரிட் ஒட்டுமொத்த பக்க லேஅவுட்களை உருவாக்குவதற்கும் உங்கள் உள்ளடக்கத்தின் அடிப்படை கட்டமைப்பை வரையறுப்பதற்கும் ஏற்றது. மறுபுறம், சப் கிரிட் நெஸ்டட் லேஅவுட்களை நிர்வகிப்பதற்கும் பல அடுக்கு நெஸ்டிங்கில் உள்ளடக்கத்தை சீரமைப்பதற்கும் மிகவும் பொருத்தமானது. சப் கிரிட்டை சிஎஸ்எஸ் கிரிட்டின் ஒரு நீட்டிப்பாக நினையுங்கள், இது சிக்கலான லேஅவுட் சூழ்நிலைகளை எளிதாக்குகிறது.

பொதுவான சிக்கல்களை சரிசெய்தல்

• சப் கிரிட் வேலை செய்யவில்லை: உங்கள் உலாவி இணக்கத்தன்மையை இருமுறை சரிபார்த்து, சப் கிரிட் உறுப்பில் grid-template-columns: subgrid; மற்றும்/அல்லது grid-template-rows: subgrid; என அமைப்பதன் மூலம் சப் கிரிட்டை இயக்கியுள்ளீர்கள் என்பதை உறுதிப்படுத்தவும்.
• சீரமைப்பு சிக்கல்கள்: உங்கள் பெற்றோர் கிரிட்டில் உள்ள டிராக் அளவுகள் சரியாக வரையறுக்கப்பட்டுள்ளதா என்பதையும், சப் கிரிட் ஐட்டம்கள் grid-column மற்றும் grid-row ஐப் பயன்படுத்தி சரியாக நிலைநிறுத்தப்பட்டுள்ளதா என்பதையும் சரிபார்க்கவும்.
• எதிர்பாராத லேஅவுட் முறிவுகள்: ஏதேனும் ரெஸ்பான்சிவ் வடிவமைப்பு சிக்கல்களைக் கண்டறிந்து சரிசெய்ய உங்கள் லேஅவுட்டை வெவ்வேறு திரை அளவுகளில் சோதிக்கவும்.

முடிவுரை

சிஎஸ்எஸ் சப் கிரிட் சிஎஸ்எஸ் கிரிட் கருவித்தொகுப்பிற்கு ஒரு மதிப்புமிக்க கூடுதலாகும், இது சிக்கலான நெஸ்டட் லேஅவுட்களை நிர்வகிக்கவும், பார்வைக்கு ஈர்க்கக்கூடிய, பராமரிக்கக்கூடிய மற்றும் ரெஸ்பான்சிவ் வலை வடிவமைப்புகளை உருவாக்கவும் ஒரு சக்திவாய்ந்த வழியை வழங்குகிறது. அடிப்படை கருத்துக்களைப் புரிந்துகொண்டு நடைமுறை எடுத்துக்காட்டுகளை ஆராய்வதன் மூலம், பாரம்பரிய சிஎஸ்எஸ் நுட்பங்களுடன் முன்பு கடினமாக அல்லது சாத்தியமற்றதாக இருந்த அதிநவீன லேஅவுட்களை உருவாக்க சப் கிரிட்டை நீங்கள் பயன்படுத்தலாம். சப் கிரிட்டை ஏற்றுக்கொண்டு உங்கள் வலை மேம்பாட்டு திட்டங்களில் புதிய சாத்தியங்களைத் திறக்கவும். சப் கிரிட், சிஎஸ்எஸ் கிரிட்டின் சக்தியை நெஸ்டட் உறுப்புகளுக்குள் உண்மையாக விரிவுபடுத்த உங்களை அனுமதிக்கிறது, இது அதிக கட்டுப்பாடு மற்றும் கோட் பராமரிப்புத்தன்மையை அனுமதிக்கிறது. அதனுடன் பரிசோதனை செய்து, சிக்கலான சிஎஸ்எஸ் லேஅவுட்களை எளிதாக்குவதில் உள்ள நன்மைகளை ஆராயுங்கள்.

மேலும் ஆதாரங்கள்

• MDN வலை ஆவணங்கள்: சிஎஸ்எஸ் சப் கிரிட்
• ஸ்மாஷிங் இதழ்: சிஎஸ்எஸ் கிரிட் சப் கிரிட்
• சிஎஸ்எஸ்-ட்ரிக்ஸ்: சிஎஸ்எஸ் கிரிட் சப் கிரிட்ஸ்