CSS Grid பெயரிடப்பட்ட பகுதி மரபுரிமை: தாய் கிரிட் பகுதிப் பரவலில் தேர்ச்சி பெறுதல்

CSS Grid Layout என்பது சிக்கலான மற்றும் பதிலளிக்கக்கூடிய வலை தளவமைப்புகளை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த கருவியாகும். இதன் மிக பயனுள்ள அம்சங்களில் ஒன்று பெயரிடப்பட்ட பகுதிகளை வரையறுக்கும் திறன் ஆகும், இது கிரிட்டில் கூறுகளை எளிதாக நிலைநிறுத்த உங்களை அனுமதிக்கிறது. பெயரிடப்பட்ட பகுதிகளின் அடிப்படைகள் நேரடியானவை என்றாலும், அவை மரபுரிமை மூலம் குறிப்பாக உள்ளமைக்கப்பட்ட கிரிட்களுடன் எவ்வாறு தொடர்பு கொள்கின்றன என்பதைப் புரிந்துகொள்வது, உங்கள் CSS குறியீட்டில் இன்னும் ಹೆಚ್ಚಿನ நெகிழ்வுத்தன்மையையும் பராமரிப்பையும் திறக்க முடியும். இந்த கட்டுரை CSS Grid பெயரிடப்பட்ட பகுதி மரபுரிமை மற்றும் தாய் கிரிட் பகுதிப் பரவல் பற்றி ஆழமாக ஆராய்கிறது, இந்த மேம்பட்ட நுட்பத்தில் தேர்ச்சி பெற உதவும் நடைமுறை உதாரணங்கள் மற்றும் சிறந்த நடைமுறைகளை வழங்குகிறது.

CSS Grid பெயரிடப்பட்ட பகுதிகள் என்றால் என்ன?

நாம் மரபுரிமை பற்றி ஆராய்வதற்கு முன், CSS Grid பெயரிடப்பட்ட பகுதிகள் என்றால் என்ன என்பதை விரைவாக நினைவு கூர்வோம். பெயரிடப்பட்ட பகுதிகள் என்பது grid-template-areas பண்பைப் பயன்படுத்தி நீங்கள் வரையறுக்கும் கிரிட்டிற்குள் உள்ள பகுதிகளாகும். நீங்கள் இந்தப் பகுதிகளுக்கு பெயர்களை ஒதுக்கி, பின்னர் குழந்தை கூறுகளை அந்த பெயரிடப்பட்ட பகுதிகளுக்குள் வைக்க grid-area பண்பைப் பயன்படுத்துகிறீர்கள்.

இதோ ஒரு எளிய உதாரணம்:

.container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  gap: 10px;
}

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

.nav {
  grid-area: nav;
  background-color: lightgreen;
  padding: 10px;
}

.main {
  grid-area: main;
  background-color: lightcoral;
  padding: 10px;
}

.aside {
  grid-area: aside;
  background-color: lightyellow;
  padding: 10px;
}

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

இந்த எடுத்துக்காட்டில், கண்டெய்னர் உறுப்பு மூன்று பத்திகள் மற்றும் மூன்று வரிசைகளைக் கொண்ட ஒரு கிரிட்டாக வரையறுக்கப்பட்டுள்ளது. grid-template-areas பண்பு ஐந்து பெயரிடப்பட்ட பகுதிகளை வரையறுக்கிறது: header, nav, main, aside, மற்றும் footer. ஒவ்வொரு குழந்தை உறுப்பும் அதன் தொடர்புடைய பகுதியில் grid-area பண்பைப் பயன்படுத்தி வைக்கப்படுகிறது.

கிரிட் பகுதி மரபுரிமையைப் புரிந்துகொள்ளுதல்

இப்போது, நீங்கள் உள்ளமைக்கப்பட்ட கிரிட்களைக் கொண்டிருக்கும்போது என்ன நடக்கும் என்று பார்ப்போம். CSS Grid-இன் ஒரு முக்கிய அம்சம் என்னவென்றால், grid-template-areas அறிவிப்புகள் மரபுரிமையாகப் பெறப்படுவதில்லை. இதன் பொருள், நீங்கள் ஒரு தாய் கிரிட்டில் பெயரிடப்பட்ட பகுதிகளை அறிவித்தால், அந்த பெயர்கள் குழந்தை கிரிட்களுக்கு தானாகப் பொருந்தாது.

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

நாம் உண்மையில் விவாதிக்கும் "மரபுரிமை" என்பது, காட்சி நிலைத்தன்மையையும் தளவமைப்பு கட்டமைப்பையும் பராமரிக்க, ஒரு குழந்தை கிரிட்டிற்குள் ஒரு தாய் கிரிட்டின் பெயரிடப்பட்ட பகுதி கட்டமைப்பை *பரப்பலாம்* அல்லது *பிரதிபலிப்பலாம்* என்ற யோசனை ஆகும். இது தாயின் பகுதி அமைப்பிற்கு பொருந்தும் வகையில் குழந்தையின் grid-template-areas-ஐ மீண்டும் வரையறுப்பதன் மூலம் நிறைவேற்றப்படுகிறது.

தாய் கிரிட் பகுதிப் பரவல்: தளவமைப்பு கட்டமைப்பை மீண்டும் உருவாக்குதல்

நாம் ஆராயப்போகும் முக்கிய நுட்பம் *தாய் கிரிட் பகுதிப் பரவல்* ஆகும். இது ஒரு குழந்தை கிரிட்டின் grid-template-areas-ஐ அதன் தாய் கிரிட்டின் கட்டமைப்போடு பொருந்தும்படி வெளிப்படையாக மீண்டும் வரையறுப்பதை உள்ளடக்குகிறது. இது CSS Grid-இன் நெகிழ்வுத்தன்மையிலிருந்து பயனடையும் அதே வேளையில், உங்கள் வலைத்தளத்தின் வெவ்வேறு பிரிவுகளில் ஒரு நிலையான தோற்றத்தையும் உணர்வையும் உருவாக்க ஒரு வழியை வழங்குகிறது.

உதாரணம்: ஒரு கிரிட்டிற்குள் ஒரு அட்டை கூறு

உங்களிடம் CSS Grid உடன் வரையறுக்கப்பட்ட ஒரு பக்க தளவமைப்பு இருப்பதாக வைத்துக்கொள்வோம், மேலும் கிரிட் பகுதிகளில் ஒன்றில், நீங்கள் பல அட்டை கூறுகளைக் காட்ட விரும்புகிறீர்கள். ஒவ்வொரு அட்டையிலும் ஒரு தலைப்பு, உள்ளடக்கம் மற்றும் அடிக்குறிப்பு இருக்க வேண்டும், இது ஒட்டுமொத்த பக்க தளவமைப்பைப் போன்றே அமைக்கப்பட்டிருக்க வேண்டும்.

.page-container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  gap: 20px;
}

.page-header {
  grid-area: header;
  background-color: #eee;
  padding: 15px;
  text-align: center;
}

.page-nav {
  grid-area: nav;
  background-color: #ddd;
  padding: 15px;
}

.page-main {
  grid-area: main;
  display: grid; /* Make the main area a grid container */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive card layout */
  gap: 20px;
  padding: 15px;
}

.page-aside {
  grid-area: aside;
  background-color: #ddd;
  padding: 15px;
}

.page-footer {
  grid-area: footer;
  background-color: #eee;
  padding: 15px;
  text-align: center;
}

/* Card component styles */
.card {
  display: grid; /* Make the card a grid container */
  grid-template-columns: 1fr;  /* Single column layout within the card */
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "card-header"
    "card-content"
    "card-footer";
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.card-header {
  grid-area: card-header;
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}

.card-content {
  grid-area: card-content;
  margin-bottom: 10px;
}

.card-footer {
  grid-area: card-footer;
  text-align: right;
  border-top: 1px solid #ccc;
  padding-top: 5px;
}

  
Header
  
  

    

      
Card Header 1
      
Card content goes here.
      
Footer
    

    

      
Card Header 2
      
Another card with some content.
      
Footer
    
  
  
  

இந்த எடுத்துக்காட்டில், .page-main என்பது அட்டை கூறுகளைக் காண்பிக்கும் ஒரு கிரிட் கண்டெய்னராகும். ஒவ்வொரு .card உறுப்பும் ஒரு கிரிட் கண்டெய்னராகும். .card ஆனது தாய் .page-container-ஐ விட வேறுபட்ட பகுதி பெயர்களைப் (card-header, card-content, card-footer) பயன்படுத்தி அதன் உள் தளவமைப்பை வரையறுக்க grid-template-areas-ஐப் பயன்படுத்துகிறது என்பதைக் கவனியுங்கள். இந்தப் பகுதிகள் முற்றிலும் சுதந்திரமானவை.

கட்டமைப்பைப் பிரதிபலித்தல்: பக்கப்பட்டியுடன் உதாரணம்

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

.article-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "article-header article-header"
    "article-nav article-main"
    "article-footer article-footer";
  gap: 10px;
}

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

.article-nav {
  grid-area: article-nav;
  background-color: #e0e0e0;
  padding: 10px;
}

.article-main {
  grid-area: article-main;
  padding: 10px;
}

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

HTML-இல், உங்களிடம் இது போன்ற ஒன்று இருக்கும்:

  

    
Article Header
    
    
Article Content
    
  

இங்கே, .article-container ஆனது ஒரு பொதுவான பக்க தளவமைப்பு கட்டமைப்பை (தலைப்பு, நவ், மெயின், அடிக்குறிப்பு) பிரதிபலிக்கும் வகையில் grid-template-areas-ஐ மீண்டும் வரையறுக்கிறது. பெயர்கள் வேறுபட்டிருந்தாலும் (வெறுமனே header என்பதற்குப் பதிலாக article-header), *அமைப்பு* தாய் தளவமைப்பைப் போலவே உள்ளது.

தாய் கிரிட் பகுதிப் பரவலுக்கான சிறந்த நடைமுறைகள்

• பொருளுள்ள பெயரிடும் மரபுகளைப் பயன்படுத்துங்கள்: "card-" அல்லது "article-" போன்ற முன்னொட்டுகளைப் பயன்படுத்த *தேவையில்லை* என்றாலும், அது மிகவும் பரிந்துரைக்கப்படுகிறது. பெயரிடப்பட்ட பகுதிகளின் சூழலைத் தெளிவாகக் குறிக்கும் பெயர்களைத் தேர்ந்தெடுக்கவும். இது குழப்பத்தைத் தவிர்த்து உங்கள் CSS-ஐ மேலும் படிக்கக்கூடியதாக மாற்றுகிறது.
• நிலைத்தன்மையைப் பேணுங்கள்: கிரிட் பகுதிகளைப் பரப்பும் போது, ஒட்டுமொத்த கட்டமைப்பில் நிலைத்தன்மைக்காக பாடுபடுங்கள். தாய் கிரிட்டில் ஒரு தலைப்பு, முக்கிய உள்ளடக்கம் மற்றும் அடிக்குறிப்பு இருந்தால், குறிப்பிட்ட உள்ளடக்கம் வேறுபட்டாலும், குழந்தை கிரிட்டில் அந்த கட்டமைப்பைப் பிரதிபலிக்க முயற்சிக்கவும்.
• ஆழமான உள்ளமைப்பைத் தவிர்க்கவும்: CSS Grid ஆழமான உள்ளமைப்பை அனுமதிக்கும் அதே வேளையில், அதிகப்படியான உள்ளமைவு உங்கள் குறியீட்டைப் புரிந்துகொள்வதற்கும் பராமரிப்பதற்கும் கடினமாக்கும். சிக்கலான சூழ்நிலைகளுக்கு எளிமையான தளவமைப்பு நுட்பங்கள் பொருத்தமானதாக இருக்குமா என்று கருதுங்கள்.
• உங்கள் குறியீட்டை ஆவணப்படுத்துங்கள்: உங்கள் CSS Grid தளவமைப்புகளை, குறிப்பாக பெயரிடப்பட்ட பகுதிகள் மற்றும் பரவல் நுட்பங்களைப் பயன்படுத்தும் போது தெளிவாக ஆவணப்படுத்துங்கள். ஒவ்வொரு பகுதியின் நோக்கத்தையும் அது ஒட்டுமொத்த தளவமைப்புடன் எவ்வாறு தொடர்புடையது என்பதையும் விளக்குங்கள். பெரிய திட்டங்களுக்கு அல்லது ஒரு குழுவில் பணிபுரியும் போது இது குறிப்பாக உதவியாக இருக்கும்.
• CSS மாறிகள் (தனிப்பயன் பண்புகள்) பயன்படுத்தவும்: மேலும் சிக்கலான தளவமைப்புகளுக்கு, கிரிட் பகுதி பெயர்களைச் சேமிக்க CSS மாறிகளைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள். இது பெயர்களை ஒரே இடத்தில் எளிதாகப் புதுப்பிக்க உங்களை அனுமதிக்கிறது மற்றும் அவை உங்கள் குறியீடு முழுவதும் பிரதிபலிக்கப்படும்.

CSS மாறிகளைப் பயன்படுத்துவதற்கான உதாரணம்:

:root {
  --header-area: header;
  --nav-area: nav;
  --main-area: main;
  --aside-area: aside;
  --footer-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "var(--header-area) var(--header-area) var(--header-area)"
    "var(--nav-area) var(--main-area) var(--aside-area)"
    "var(--footer-area) var(--footer-area) var(--footer-area)";
  gap: 10px;
}

.header {
  grid-area: var(--header-area);
}

/* And similarly for other elements */

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

அணுகல்தன்மை பரிசீலனைகள்

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

• சொற்பொருள் HTML: உங்கள் உள்ளடக்கத்திற்கு கட்டமைப்பையும் அர்த்தத்தையும் வழங்க சொற்பொருள் HTML கூறுகளை (எ.கா., <header>, <nav>, <main>, <aside>, <footer>) பயன்படுத்தவும். இது ஸ்கிரீன் ரீடர்கள் மற்றும் பிற உதவித் தொழில்நுட்பங்கள் தளவமைப்பைப் புரிந்துகொள்ள உதவுகிறது.
• தருக்க மூல வரிசை: HTML மூலத்தில் உள்ள கூறுகளின் வரிசை பொதுவாக உள்ளடக்கத்தின் தருக்க வாசிப்பு வரிசையைப் பிரதிபலிக்க வேண்டும். CSS Grid கூறுகளை பார்வைக்கு மறுசீரமைக்க முடியும், ஆனால் உதவித் தொழில்நுட்பங்களை நம்பியுள்ள பயனர்களுக்கு மூல வரிசை இன்னும் அர்த்தமுள்ளதாக இருக்க வேண்டும்.
• விசைப்பலகை வழிசெலுத்தல்: அனைத்து ஊடாடும் கூறுகளும் (எ.கா., இணைப்புகள், பொத்தான்கள், படிவ புலங்கள்) விசைப்பலகை வழிசெலுத்தல் வழியாக அணுகக்கூடியவை என்பதை உறுதிப்படுத்தவும். கூறுகள் கவனத்தைப் பெறும் வரிசையைக் கட்டுப்படுத்த tabindex பண்பைப் பயன்படுத்தவும்.
• வண்ண வேறுபாடு: குறைந்த பார்வை உள்ள பயனர்களுக்கு உள்ளடக்கத்தைப் படிக்கக்கூடியதாக மாற்ற, உரைக்கும் பின்னணிக்கும் இடையில் போதுமான வண்ண வேறுபாட்டை வழங்கவும். உங்கள் வண்ண சேர்க்கைகள் அணுகல்தன்மை தரநிலைகளை (WCAG) பூர்த்தி செய்கின்றனவா என்பதை உறுதிப்படுத்த வண்ண வேறுபாடு சரிபார்ப்பைப் பயன்படுத்தவும்.
• பதிலளிக்கக்கூடிய வடிவமைப்பு: வெவ்வேறு திரை அளவுகள் மற்றும் சாதனங்களுக்கு ஏற்றவாறு பதிலளிக்கக்கூடிய தளவமைப்புகளை உருவாக்கவும். கிரிட் தளவமைப்பை சரிசெய்யவும், உள்ளடக்கம் சிறிய திரைகளில் பயன்படுத்தக்கூடியதாக இருப்பதை உறுதிசெய்யவும் மீடியா வினவல்களைப் பயன்படுத்தவும்.

முடிவுரை

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