CSS கிரிட் ஏரியாக்கள்: பொருள்சார் லேஅவுட் பெயரிடல் மற்றும் ரெஸ்பான்சிவ் வடிவமைப்பு தேர்ச்சி

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

அடிப்படையைப் புரிந்துகொள்ளுதல்: CSS கிரிட் லேஅவுட்

கிரிட் ஏரியாக்களுக்குள் நாம் செல்வதற்கு முன், CSS கிரிட் லேஅவுட்டின் அடிப்படைக் கருத்துக்களைப் புரிந்துகொள்வது அவசியம். கிரிட் லேஅவுட் என்பது ஒரு இரு பரிமாண லேஅவுட் அமைப்பாகும், இது ஒரு வலைப்பக்கத்தை தனித்தனி வரிசைகள் மற்றும் நெடுவரிசைகளாகப் பிரிக்க உங்களை அனுமதிக்கிறது, பின்னர் அந்தப் பிரிவுகளுக்குள் உள்ளடக்கத்தைத் துல்லியமாக வைக்கிறது. முதன்மையாக ஒரு பரிமாண லேஅவுட் அமைப்பாக (வரிசை அல்லது நெடுவரிசை) இருக்கும் Flexbox போலல்லாமல், கிரிட் சிக்கலான, பக்க-நிலை லேஅவுட்களை நிர்வகிப்பதில் சிறந்து விளங்குகிறது.

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

• கிரிட் கண்டெய்னர்: display: grid; அல்லது display: inline-grid; பயன்படுத்தப்படும் உறுப்பு. இந்த உறுப்பு அனைத்து நேரடி கிரிட் ஐட்டங்களுக்கும் பெற்றோர் ஆகிறது.
• கிரிட் ஐட்டம்: ஒரு கிரிட் கண்டெய்னரின் நேரடி குழந்தைகள். இவைதான் கிரிட்டிற்குள் அமைக்கப்பட்டிருக்கும் உறுப்புகள்.
• கிரிட் லைன்: கிரிட் கட்டமைப்பை உருவாக்கும் கிடைமட்ட மற்றும் செங்குத்து பிரிக்கும் கோடுகள்.
• கிரிட் டிராக்: இரண்டு அடுத்தடுத்த கிரிட் கோடுகளுக்கு இடையிலான இடம், இது ஒரு வரிசை அல்லது நெடுவரிசையாக இருக்கலாம்.
• கிரிட் செல்: கிரிட்டின் மிகச்சிறிய அலகு, ஒரு கிரிட் வரிசை மற்றும் ஒரு கிரிட் நெடுவரிசையின் சந்திப்பு.
• கிரிட் ஏரியா: நான்கு கிரிட் கோடுகளால் உருவாக்கப்பட்ட ஒரு செவ்வகப் பகுதி, இது ஒன்று அல்லது அதற்கு மேற்பட்ட கிரிட் ஐட்டங்களை வைக்கப் பயன்படுத்தப்படலாம்.

CSS கிரிட் ஏரியாக்களை அறிமுகப்படுத்துதல்: பெயரிடலின் சக்தி

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

கிரிட் ஏரியாக்களை இயக்கும் முக்கிய பண்புகள்:

• grid-template-areas: பெயரிடப்பட்ட கிரிட் ஏரியாக்களைக் குறிப்பிடுவதன் மூலம் கிரிட்டின் லேஅவுட்டை வரையறுக்கிறது.
• grid-area: ஒரு கிரிட் ஐட்டத்தை பெயரிடப்பட்ட கிரிட் ஏரியாவிற்கு ஒதுக்குகிறது.

grid-template-areas மூலம் லேஅவுட்களை வரையறுத்தல்

grid-template-areas பண்புதான் மேஜிக் நடக்கும் இடம். இது உங்கள் CSS-க்குள் உங்கள் கிரிட் கட்டமைப்பை பார்வைக்குரியதாகக் காட்ட அனுமதிக்கிறது. தனித்தனி ஸ்டிரிங் மதிப்புகள் மூலம் வரிசைகளை வரையறுக்கிறீர்கள், மேலும் ஒவ்வொரு ஸ்டிரிங்கிற்குள்ளும் மேற்கோள் காட்டப்பட்ட பெயர்களைப் பயன்படுத்தி நெடுவரிசைகளை வரையறுக்கிறீர்கள். ஒரு காலியான ஸ்டிரிங் ('') அல்லது ஒரு புள்ளி (.) ஆக்கிரமிக்கப்படாத கிரிட் செல்லைக் குறிக்கப் பயன்படுத்தப்படலாம்.

ஒரு பொதுவான வலைதள லேஅவுட்டைக் கருத்தில் கொள்வோம்:

HTML கட்டமைப்பு:

            <div class="grid-container">
  <header class="header">Header</header>
  <nav class="nav">Navigation</nav>
  <main class="main">Main Content</main>
  <aside class="sidebar">Sidebar</aside>
  <footer class="footer">Footer</footer>
</div>
            

              
                Copy
              
            
          

grid-template-areas உடன் CSS:

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

.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில்:

• நம்மிடம் இரண்டு நெடுவரிசைகள் (1fr மற்றும் 3fr) மற்றும் மூன்று வரிசைகள் (auto, 1fr, auto) கொண்ட ஒரு கிரிட் கண்டெய்னர் உள்ளது.
• grid-template-areas பண்பு, இந்த பெயரிடப்பட்ட பகுதிகள் கிரிட் செல்களை எவ்வாறு ஆக்கிரமிக்கும் என்பதை பார்வைக்குரியதாக வரைபடமாக்குகிறது. முதல் ஸ்டிரிங் `"header header"` 'header' பகுதி முதல் வரிசையில் உள்ள இரண்டு நெடுவரிசைகளையும் பரவுகிறது என்பதைக் குறிக்கிறது.
• இரண்டாவது ஸ்டிரிங் `"nav main"` 'nav'-ஐ முதல் நெடுவரிசையிலும், 'main'-ஐ இரண்டாவது வரிசையின் இரண்டாவது நெடுவரிசையிலும் வைக்கிறது.
• மூன்றாவது ஸ்டிரிங் `"sidebar main"` 'sidebar'-ஐ முதல் நெடுவரிசையிலும், மீண்டும் 'main'-ஐ மூன்றாவது வரிசையின் இரண்டாவது நெடுவரிசையிலும் வைக்கிறது. 'main' இங்கே இரண்டு வரிசைகளை எப்படி பரவுகிறது என்பதைக் கவனியுங்கள்.
• இறுதி ஸ்டிரிங் `"footer footer"` 'footer' பகுதிக்காக கடைசி வரிசையில் உள்ள இரண்டு நெடுவரிசைகளையும் பரவுகிறது.

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

கிரிட் ஏரியாக்களுக்கு ஏன் பெயரிட வேண்டும்? பொருள்சார் நன்மை

கிரிட் ஏரியாக்களின் உண்மையான சக்தி அவற்றின் பொருள்சார் அர்த்தத்தில் உள்ளது. 'header', 'nav', 'main', 'sidebar', மற்றும் 'footer' போன்ற பெயர்களை ஒதுக்குவதன் மூலம், நீங்கள் எலிமெண்ட்டுகளை நிலைநிறுத்துவது மட்டுமல்லாமல்; உங்கள் வலைப்பக்கத்தின் கட்டடக்கலை மண்டலங்களை வரையறுக்கிறீர்கள். இது பல ஆழ்ந்த நன்மைகளைக் கொண்டுள்ளது:

1. மேம்பட்ட வாசிப்புத்தன்மை: உங்கள் CSS-ஐ மதிப்பாய்வு செய்யும்போது, HTML கட்டமைப்பைப் பார்க்காமலேயே, லேஅவுட்டின் ஒவ்வொரு பகுதியும் என்ன பங்கு வகிக்கிறது என்பது உடனடியாகத் தெளிவாகிறது. இது குழு ஒத்துழைப்பு மற்றும் நீண்ட கால திட்டப் பராமரிப்பிற்கு விலைமதிப்பற்றது.
2. மேம்பட்ட பராமரிப்புத்தன்மை: உங்கள் லேஅவுட்டை மறுசீரமைக்க அல்லது ஒரு கூறுகளை நகர்த்த வேண்டுமானால், சிக்கலான வரிசை எண்கள் அல்லது ஸ்பேனிங் கணக்கீடுகளைச் சரிசெய்யத் தேவையில்லாமல், ஒரு எலிமெண்ட்டின் grid-area பண்பை மறுஒதுக்கீடு செய்வதன் மூலம் அதைச் செய்ய முடியும்.
3. பொருள்சார் தெளிவு: பெயர்கள் நோக்கம் கொண்ட உள்ளடக்கம் மற்றும் செயல்பாட்டைப் பிரதிபலிக்கின்றன, இது காட்சி லேஅவுட்டை HTML எலிமெண்ட்டுகளின் அடிப்படை பொருள்சார் அர்த்தத்துடன் சீரமைக்கிறது.
4. எளிதான மறுசீரமைப்பு: லேஅவுட் கட்டமைப்பை மாற்றுவது grid-template-areas-ஐ மறுவரையறை செய்வதாக மாறுகிறது, இது தனிப்பட்ட கிரிட் ஐட்டம் இடங்களை மாற்றுவதை விட பார்வைக்குரிய மற்றும் உள்ளுணர்வு செயல்முறையாகும்.

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

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "main sidebar"  /* Changed order here */
    "footer footer";
  gap: 20px;
  height: 100vh;
}

/* The grid-area assignments for the items remain the same */
.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }

            

              
                Copy
              
            
          

இந்த மாற்றியமைக்கப்பட்ட எடுத்துக்காட்டில், 'main' மற்றும் 'sidebar' ஆகியவற்றின் நிலைகளை மாற்றுவதற்காக grid-template-areas வரையறை புதுப்பிக்கப்பட்டுள்ளது. முக்கியமாக, சைல்டு எலிமெண்ட்டுகளின் grid-area ஒதுக்கீடுகள் மாறவில்லை, இது இந்த பொருள்சார் அணுகுமுறையின் சக்தியை நிரூபிக்கிறது.

கிரிட் ஏரியாக்களுடன் ரெஸ்பான்சிவ் வடிவமைப்புகளை உருவாக்குதல்

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

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

            /* Mobile-first approach */
.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto auto;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "sidebar"
    "footer";
  gap: 15px;
  height: auto; /* Allow height to adjust naturally */
}

.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }

/* Tablet and Desktop adjustments */
@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header header"
      "nav main"
      "sidebar main"
      "footer footer";
    gap: 20px;
    height: 100vh;
  }

  /* Re-assigning grid-area is often not needed here if the names are consistent,
     but it's good to be aware that you *can* change them if necessary.
     In this case, the names are just rearranged in the template areas. */
}

            

              
                Copy
              
            
          

இந்த ரெஸ்பான்சிவ் எடுத்துக்காட்டில்:

• இயல்புநிலை (மொபைல்-ஃபர்ஸ்ட்) ஸ்டைல்கள் ஒரு ஒற்றை-நெடுவரிசை லேஅவுட்டை வரையறுக்கின்றன, அங்கு ஒவ்வொரு பெயரிடப்பட்ட ஏரியாவும் அதன் சொந்த வரிசையை ஆக்கிரமிக்கிறது.
• 768px மற்றும் அதற்கு மேற்பட்டவற்றில் உள்ள ஒரு மீடியா குவெரி, எங்கள் ஆரம்ப டெஸ்க்டாப் எடுத்துக்காட்டைப் போலவே, மிகவும் சிக்கலான, பல-நெடுவரிசை லேஅவுட்டை உருவாக்க grid-template-areas-ஐ மறுவரையறை செய்கிறது.

இந்த அணுகுமுறை திரை அளவின் அடிப்படையில் வியத்தகு லேஅவுட் மாற்றங்களை அனுமதிக்கிறது, இவை அனைத்தும் grid-template-areas பண்பு மூலம் நேர்த்தியாக நிர்வகிக்கப்படுகின்றன.

உங்கள் கிரிட் லேஅவுட்களை சர்வதேசமயமாக்குதல்

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

• வலமிருந்து-இடமாக (RTL) ஆதரவு: அரபு அல்லது ஹீப்ரு போன்ற வலமிருந்து இடமாகப் படிக்கும் மொழிகளில், HTML எலிமெண்ட்டில் direction பண்பை மாற்றும்போது நெடுவரிசைகளின் காட்சி வரிசை இயற்கையாகவே தலைகீழாக மாறும். கிரிட் ஏரியாக்கள் பொருள்சார் பெயர்களை லேஅவுட் ஸ்லாட்டுகளுடன் வரைபடமாக்குவதால், உங்கள் பெயரிடப்பட்ட ஏரியாக்கள் அவற்றின் பொருளைத் தக்க வைத்துக் கொள்ளும், ஆனால் அவற்றின் காட்சி இடம் தானாகவே சரிசெய்யப்படும். உதாரணமாக, LTR லேஅவுட்டில் இடதுபுறத்தில் இருந்த ஒரு 'sidebar', RTL லேஅவுட்டில் வலதுபுறத்தில் தோன்றும், nếu `grid-template-areas` கருத்தியல் ரீதியாக வரையறுக்கப்பட்டிருந்தால் மற்றும் முழுமையான இடது/வலது நிலைப்படுத்தலுடன் பிணைக்கப்படவில்லை என்றால்.
• மொழி விரிவாக்கம்: சில மொழிகளுக்கு மற்றவற்றை விட அதிக இடம் தேவைப்படுகிறது. நெடுவரிசைகளுக்கு fr அலகுகள் போன்ற நெகிழ்வான அலகுகளைப் பயன்படுத்துவதன் மூலமும், auto மூலம் வரிசைகளை வரையறுப்பதன் மூலமும், உங்கள் கிரிட் மாறுபட்ட உள்ளடக்க நீளங்களை மிகவும் நளினமாக இடமளிக்க முடியும். நீண்ட சொற்கள் அல்லது வாக்கியங்களைக் கொண்ட ஒரு மொழிக்கு ஒரு குறிப்பிட்ட லேஅவுட்டிற்கு குறிப்பிடத்தக்க சரிசெய்தல் தேவைப்பட்டால், அந்த மொழியியல் தேவைகளுக்காக குறிப்பாக grid-template-areas-ஐ மறுவரையறை செய்ய மீடியா குவெரிகளை (அல்லது ஃபீச்சர் குவெரிகளை கூட) பயன்படுத்தலாம்.
• படிநிலை பெயரிடல்: சிக்கலான லேஅவுட்களை வடிவமைக்கும்போது, அவற்றின் படிநிலை முக்கியத்துவம் அல்லது உள்ளடக்க வகையைப் பிரதிபலிக்கும் பகுதிகளுக்குப் பெயரிடுவதைக் கருத்தில் கொள்ளுங்கள், இது வெவ்வேறு கலாச்சார மற்றும் மொழியியல் சூழல்களில் புரிந்துகொள்ள உதவுகிறது. உதாரணமாக, 'content' என்பதற்குப் பதிலாக, 'primary-content' அல்லது 'secondary-content' பயன்படுத்தலாம்.

RTL கருத்தின் எடுத்துக்காட்டு:

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

HTML:

            <div class="app-layout">
  <nav class="main-nav">Navigation</nav>
  <main class="content-area">Main Content</main>
</div>
            

              
                Copy
              
            
          

CSS (LTR):

            .app-layout {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-template-areas:
    "nav content";
}
.main-nav { grid-area: nav; }
.content-area { grid-area: content; }

            

              
                Copy
              
            
          

CSS (RTL - HTML அல்லது body-க்கு `direction: rtl;` சேர்ப்பதன் மூலம் அடையப்படுகிறது):

கண்டெய்னர் அல்லது ஒரு மூதாதையர் மீது `direction: rtl;` பயன்படுத்தப்படும்போது:

            .app-layout {
  display: grid;
  grid-template-columns: 150px 1fr; /* Note: column widths behave differently in RTL */
  grid-template-areas:
    "nav content"; /* The semantic names still apply */
}
.main-nav { grid-area: nav; }
.content-area { grid-area: content; }

            

              
                Copy
              
            
          

ஒரு RTL சூழலில், உலாவி தானாகவே 1fr நெடுவரிசை இப்போது வலதுபுறத்திலும், 150px நெடுவரிசை இடதுபுறத்திலும் இருக்க வேண்டும் என்பதைப் புரிந்துகொள்கிறது. grid-template-areas வரையறை, அதன் பெயரிடப்பட்ட ஸ்லாட்டுகளுடன், அப்படியே உள்ளது, ஆனால் அந்த ஸ்லாட்டுகளின் காட்சி இடம் தலைகீழாக மாறுகிறது. 'nav' பகுதி இப்போது வலதுபுறத்திலும், 'content' இடதுபுறத்திலும் தோன்றும், RTL ஓட்டத்தின்படி.

மேம்பட்ட நுட்பங்கள் மற்றும் சிறந்த நடைமுறைகள்

கிரிட் ஏரியாக்கள் லேஅவுட்டை எளிதாக்கினாலும், அவற்றை மாஸ்டர் செய்வதற்கு சில மேம்பட்ட நுட்பங்களைப் புரிந்துகொள்வதும், சிறந்த நடைமுறைகளைக் கடைப்பிடிப்பதும் அடங்கும்:

1. சீரான பெயரிடல் மரபுகள்

உங்கள் கிரிட் ஏரியாக்களுக்கு தெளிவான மற்றும் சீரான பெயரிடல் மரபை நிறுவவும். இது இப்படி இருக்கலாம்:

• அனைத்தும் சிறிய எழுத்துகள்: header, main-content, side-nav
• பல-சொல் பெயர்களுக்கு ஹைபன்களைப் பயன்படுத்துதல்: hero-section, product-gallery
• area1, column-2 போன்ற பொதுவான பெயர்களைத் தவிர்ப்பது.

பராமரிப்புத்தன்மை மற்றும் குழு ஒத்துழைப்புக்கு சீரான தன்மை முக்கியம்.

2. காலி செல்களுக்கு புள்ளி (.) பயன்படுத்துதல்

உங்கள் கிரிட்டில் வேண்டுமென்றே எந்த பெயரிடப்பட்ட பகுதியாலும் ஆக்கிரமிக்கப்படாத இடைவெளிகள் இருக்கும்போது, இந்த காலி செல்களைக் குறிக்க புள்ளிகளை (.) பயன்படுத்தவும். இது grid-template-areas வரையறையை இன்னும் தெளிவாக்குகிறது.

            .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "header header ."
    "nav main ."
    "footer footer .";
}

            

              
                Copy
              
            
          

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

3. grid-area உடன் பல வரிசைகள் மற்றும் நெடுவரிசைகளை விரிவுபடுத்துதல்

grid-template-areas ஒட்டுமொத்த கட்டமைப்பை வரையறுத்தாலும், ஒரு கிரிட் ஐட்டத்தை வரையறுக்கப்பட்ட பெயரிடப்பட்ட பகுதிகளுக்குள் பல செல்கள் முழுவதும் விரிவுபடுத்த grid-area ஷார்ட்ஹேண்ட் பண்பையும் பயன்படுத்தலாம். இந்த பண்பு நான்கு மதிப்புகளை ஏற்கிறது: <row-start> <column-start> <row-end> <column-end>. இருப்பினும், பெயரிடப்பட்ட பகுதிகளுடன் பணிபுரியும்போது, நீங்கள் விரிவுபடுத்த விரும்பும் பகுதியின் தொடக்க மற்றும் இறுதி கோடுகளைக் குறிப்பிடுவதன் மூலம் இதை எளிதாக்கலாம், அல்லது நீங்கள் பல செல்களை விரிவுபடுத்த வரையறுத்த ஒரு பகுதியை நேரடியாகப் பெயரிடுவதன் மூலம்.

'main' இரண்டு நெடுவரிசைகளை விரிவுபடுத்தும் இந்த லேஅவுட்டைக் கருத்தில் கொள்ளுங்கள்:

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

.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.footer { grid-area: footer; }

            

              
                Copy
              
            
          

இந்த வழக்கில், `main` பகுதி grid-template-areas பண்பிலேயே இரண்டு நெடுவரிசைகளை விரிவுபடுத்த வரையறுக்கப்பட்டுள்ளது. பெயரிடப்பட்ட பகுதிகளைப் பயன்படுத்தும்போது விரிவுபடுத்துதலை அடைய இதுவே மிகவும் பொருள்சார்ந்த வழியாகும்.

மாற்றாக, தேவைப்பட்டால் நீங்கள் வெளிப்படையான வரிசை எண்களைப் பயன்படுத்தலாம், ஆனால் இது பொருள்சார் நன்மையிலிருந்து விலகிச் செல்கிறது:

            /* Less semantic approach if names are available */
.main {
  grid-column: 2 / 4; /* Span from column line 2 to 4 */
  grid-row: 2 / 3;    /* Span from row line 2 to 3 */
}

            

              
                Copy
              
            
          

பரிந்துரை: சிறந்த பொருள்சார் தெளிவிற்காக எப்போதும் grid-template-areas-க்குள் நேரடியாக விரிவுபடுத்துதலை வரையறுக்க முயற்சிக்கவும்.

4. ஒன்றன் மீது ஒன்று படியும் பகுதிகள்

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

            .grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas:
    "hero-image"
    "hero-text";
}

.hero-image {
  grid-area: hero-image;
  background-image: url('path/to/image.jpg');
  background-size: cover;
}

.hero-text {
  grid-area: hero-text;
  align-self: center; /* Vertically center text */
  text-align: center;
  color: white;
}

/* To make them overlap visually on top of each other */
.hero-image {
  grid-area: 1 / 1 / 2 / 2; /* Explicitly place image in the first cell */
}

.hero-text {
  grid-area: 1 / 1 / 2 / 2; /* Place text in the same cell */
  align-self: center; 
  text-align: center;
}

            

              
                Copy
              
            
          

இரண்டு எலிமெண்ட்டுகளையும் ஒரே கிரிட் ஏரியாவிற்கு (அல்லது ஒன்றன் மீது ஒன்று படியும் ஏரியாக்களுக்கு) ஒதுக்குவதன் மூலம், .hero-text எலிமெண்ட் அதன் HTML மூலத்தில் பிந்தைய தோற்றம் காரணமாக .hero-image மீது அடுக்கப்படும். இது பார்வைக்கு ஈர்க்கும் லேஅவுட்களை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த நுட்பமாகும்.

5. டைனமிக் கிரிட் ஏரியா உருவாக்கம் (ஜாவாஸ்கிரிப்ட்)

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

உதாரணமாக, உங்களிடம் ஒரு கிரிட்டில் வைக்கப்பட வேண்டிய கூறுகள் தொகுப்பு இருந்தால், மற்றும் கூறுகளின் எண்ணிக்கை மாறினால், ஜாவாஸ்கிரிப்ட் grid-template-areas ஸ்டிரிங்கை உருவாக்க உதவும்.

பயன்பாட்டு நிலை: விட்ஜெட்களை மறுசீரமைக்கக்கூடிய ஒரு டாஷ்போர்டு.

ஜாவாஸ்கிரிப்ட் பின்வருவனவற்றைச் செய்யலாம்:

1. உள்ளூர் சேமிப்பகத்திலிருந்து விட்ஜெட்களின் வரிசையைப் படிக்கவும்.
2. அந்த வரிசையின் அடிப்படையில் டைனமிக்காக ஒரு grid-template-areas ஸ்டிரிங்கை உருவாக்கவும்.
3. இந்த ஸ்டிரிங்கை டாஷ்போர்டு கண்டெய்னருக்குப் பயன்படுத்தவும்.

சக்திவாய்ந்ததாக இருந்தாலும், இது புத்திசாலித்தனமாகப் பயன்படுத்தப்பட வேண்டும், ஏனெனில் சிக்கலான டைனமிக் உருவாக்கம் சில சமயங்களில் பராமரிக்க முடியாத CSS-க்கு வழிவகுக்கும். முடிந்தவரை ஸ்டேடிக் CSS தீர்வுகளுக்கு முன்னுரிமை அளியுங்கள்.

பொதுவான இடர்பாடுகள் மற்றும் அவற்றை எவ்வாறு தவிர்ப்பது

கிரிட் ஏரியாக்கள் வழங்கும் தெளிவுடன் கூட, சில பொதுவான தவறுகள் ஏற்படலாம்:

• பொருந்தாத பெயர்கள்: grid-template-areas இல் பயன்படுத்தப்படும் ஒவ்வொரு பெயருக்கும் ஒரு தொடர்புடைய grid-area பண்பு ஒரு நேரடி சைல்டு எலிமெண்ட்டில் உள்ளதா என்பதை உறுதிப்படுத்தவும், மற்றும் நேர்மாறாகவும். எழுத்துப்பிழைகள் இங்கு அடிக்கடி ஏற்படும் குற்றவாளிகள்.
• சமநிலையற்ற ஏரியா வரையறைகள்: grid-template-areas இன் ஒவ்வொரு வரிசையிலும் வரையறுக்கப்பட்ட செல்களின் எண்ணிக்கை சீராக இருக்க வேண்டும். ஒரு வரிசையில் 3 நெடுவரிசைகள் வரையறுக்கப்பட்டிருந்தால், அந்த வரையறையில் உள்ள அனைத்து அடுத்தடுத்த வரிசைகளும் கருத்தியல் ரீதியாக 3 நெடுவரிசைகளைக் கொண்டிருக்க வேண்டும். ஒரு பெயரை ஒரு வரிசையில் இரண்டு முறை பயன்படுத்தினால், அந்தப் பெயர் இரண்டு செல்களை ஆக்கிரமிக்கிறது.
• மூல வரிசையைப் புறக்கணித்தல்: HTML மூலத்தில் உங்கள் கிரிட் ஐட்டங்களின் வரிசை அவற்றின் ஸ்டாக்கிங் சூழலையும், அணுகல்தன்மை கருவிகளுடன் அவை எவ்வாறு நடந்துகொள்கின்றன என்பதையும் பாதிக்கிறது என்பதை நினைவில் கொள்ளுங்கள். கிரிட் ஏரியாக்கள் காட்சி மறுசீரமைப்பை அனுமதித்தாலும், உங்கள் HTML-இல் உள்ள பொருள்சார் வரிசையைக் கருத்தில் கொள்ளுங்கள்.
• நிலையான அலகுகளை அதிகமாக நம்பியிருத்தல்: குறிப்பிட்ட நெடுவரிசை அகலங்கள் சில சமயங்களில் அவசியமானாலும், ரெஸ்பான்சிவ் மற்றும் மாற்றியமைக்கக்கூடிய லேஅவுட்களுக்கு fr அலகுகள் போன்ற நெகிழ்வான அலகுகளை விரும்புங்கள், குறிப்பாக மாறுபட்ட உரை நீளங்களைக் கொண்டிருக்கக்கூடிய உலகளாவிய உள்ளடக்கத்துடன் கையாளும்போது.
• display: grid;-ஐ மறந்துவிடுதல்: கிரிட் ஏரியா பண்புகள் செயல்பட கண்டெய்னரில் display: grid; அல்லது display: inline-grid; பயன்படுத்தப்பட்டிருக்க வேண்டும்.

முடிவுரை: நவீன வலைக்கான பொருள்சார் லேஅவுட்களை ஏற்றுக்கொள்வது

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

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

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

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