உங்கள் தளவமைப்புகளை எளிதாக்குங்கள்: CSS கிரிட்டின் மறைமுகப் பெயரிடப்பட்ட கோடுகளின் மந்திரம்

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

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

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

ஒரு விரைவு நினைவுபடுத்தல்: கிரிட் கோடுகளைப் புரிந்துகொள்ளுதல்

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

இந்த கோடு எண்களைப் பயன்படுத்தி நீங்கள் கிரிட்டில் உருப்படிகளை வைக்கலாம்:

            .container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.item {
  grid-column-start: 2;
  grid-column-end: 3;
}
            

              
                Copy
              
            
          

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

            .container {
  display: grid;
  grid-template-columns: [page-start] 1fr [main-start] 2fr [main-end] 1fr [page-end];
}

.item {
  grid-column-start: main-start;
  grid-column-end: main-end;
  /* Shorthand: grid-column: main-start / main-end; */
}
            

              
                Copy
              
            
          

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

சவால்: மீண்டும் மீண்டும் வரும் கிரிட்கள் மற்றும் பெயரிடல் மிகை

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

            .container {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr [col-end]);
}
            

              
                Copy
              
            
          

இந்த குறியீடு `col-start` என்று பெயரிடப்பட்ட பன்னிரண்டு கோடுகளையும், `col-end` என்று பெயரிடப்பட்ட பன்னிரண்டு கோடுகளையும் உருவாக்குகிறது. ஒரு குறிப்பிட்ட ஒன்றைக் குறிக்க, நீங்கள் ஒரு எண்ணைச் சேர்க்க வேண்டும் (எ.கா., `grid-column: col-start 3;`). இது எண் அடிப்படையிலான இடமளிப்பின் சில பலவீனங்களைத் திரும்பக் கொண்டுவருகிறது. அர்த்தமுள்ள பெயர்களைத் தானாகவே பெறுவதற்கு ஒரு வழி இருந்திருந்தால் என்ன, குறிப்பாக உங்கள் பக்கத்தின் உயர்-நிலை கட்டமைப்புக்கு? இதுதான் மறைமுகப் பெயரிடப்பட்ட கோடுகள் தீர்க்கும் பிரச்சினை.

மந்திரத்தின் மையம்: `grid-template-areas`-இல் இருந்து வரும் மறைமுகக் கோடுகள்

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

ஒரு உன்னதமான பக்க தளவமைப்பைப் பார்ப்போம்:

            .page-wrapper {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
            

              
                Copy
              
            
          

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

• `foo-start` (தொடக்க நெடுவரிசைக் கோட்டிற்கு)
• `foo-end` (முடிவு நெடுவரிசைக் கோட்டிற்கு)
• `foo-start` (தொடக்க வரிசைக் கோட்டிற்கு)
• `foo-end` (முடிவு வரிசைக் கோட்டிற்கு)

இதை எங்கள் எடுத்துக்காட்டில் பயன்படுத்தும்போது, CSS கிரிட் பின்வரும் கோடுகளை நமக்காக, முற்றிலும் தானாகவே உருவாக்கியுள்ளது:

• நெடுவரிசைக் கோடுகள்: `header-start`, `sidebar-start`, `main-start`, `footer-start`, `header-end`, `main-end`, `footer-end`, `sidebar-end`. இவற்றில் சில ஒரே இயற்பியல் கிரிட் கோட்டைக் குறிக்கும் (எ.கா., `sidebar-end` மற்றும் `main-start` ஒரே கோடு).
• வரிசைக் கோடுகள்: `header-start`, `sidebar-start`, `main-start`, `footer-start`, `header-end`, `sidebar-end`, `main-end`, `footer-end`.

இந்த தானியங்கிக் கோடுகளைப் பயன்படுத்துவது எப்படி

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

            .notification-banner {
  grid-column: main-start / main-end;
  grid-row: header-end / header-end;
  /* Place it just below the header, within the main column area */
}
            

              
                Copy
              
            
          

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

உலகளாவிய பயன்பாட்டு வழக்குகள்: மறைமுகக் கோடுகளை நடைமுறைக்குக் கொண்டு வருதல்

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

எடுத்துக்காட்டு 1: ஒரு பன்மொழி இ-காமர்ஸ் தயாரிப்பு அட்டை

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

நாங்கள் `grid-template-areas` உடன் அட்டையின் உள் கட்டமைப்பை வரையறுக்கலாம்:

            .product-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "image image"
    "title price"
    "desc desc"
    "button button";
}

.product-image { grid-area: image; }
.product-title { grid-area: title; }
.product-price { grid-area: price; }
.product-description { grid-area: desc; }
.add-to-cart-button { grid-area: button; }
            

              
                Copy
              
            
          

இப்போது, நீங்கள் தயாரிப்புத் தலைப்பின் தொடக்கத்துடன் சரியாகப் பொருந்தக்கூடிய ஒரு சிறிய "New!" பேட்ஜையும், விலையின் முடிவோடு பொருந்தக்கூடிய ஒரு "Sale" ஐகானையும் சேர்க்க வேண்டும் என்று கற்பனை செய்து பாருங்கள். நீங்கள் தானாக உருவாக்கப்பட்ட மறைமுகக் கோடுகளைப் பயன்படுத்தலாம்:

            .new-badge {
  grid-column-start: title-start;
  grid-row-start: title-start;
  /* Place it at the top-left corner of the title area */
}

.sale-icon {
  grid-column-end: price-end;
  grid-row-start: price-start;
  /* Place it at the top-right corner of the price area */
}
            

              
                Copy
              
            
          

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

எடுத்துக்காட்டு 2: ஒரு பதிலளிக்கக்கூடிய உலகளாவிய செய்தி இணையதளம்

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

டெஸ்க்டாப் தளவமைப்பு:

            .news-page {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-areas:
    "header header header"
    "left-rail main-story right-rail"
    "footer footer footer";
}

            

              
                Copy
              
            
          

மொபைல் தளவமைப்பு (ஒரு மீடியா வினவலுக்குள்):

            @media (max-width: 768px) {
  .news-page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main-story"
      "left-rail"
      "right-rail"
      "footer";
  }
}
            

              
                Copy
              
            
          

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

            .advertisement {
  grid-column: main-story-start / main-story-end;
  grid-row: main-story-start;
}

            

              
                Copy
              
            
          

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

மறைமுகப் பெயரிடப்பட்ட கோடுகளின் ஒட்டுமொத்த நன்மைகள்

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

• ஒப்பிடமுடியாத வாசிப்புத்திறன்: உங்கள் CSS உங்கள் தளவமைப்பின் நோக்கத்தின் உயர்-நிலை வரைபடமாக மாறுகிறது. `grid-column: sidebar-start / main-end;` என்பது மற்றொரு டெவலப்பருக்கு அந்த உறுப்பின் நோக்கத்தை உடனடியாகச் சொல்கிறது, அவர்களின் தாய்மொழி அல்லது திட்டத்துடனான பழக்கத்தைப் பொருட்படுத்தாமல்.
• தீவிர வலிமை: தளவமைப்புகள் மாற்றத்தை எதிர்க்கும் திறன் கொண்டவையாக மாறுகின்றன. ஒவ்வொரு தனி உருப்படியின் இடமளிப்பு விதிகளைப் புதுப்பிக்கத் தேவையில்லாமல், கிரிட் வரையறையில் நெடுவரிசைகளையும் வரிசைகளையும் சேர்க்கலாம், அகற்றலாம் அல்லது மறுவரிசைப்படுத்தலாம். `grid-template-areas` புதுப்பிக்கப்படும் வரை, மறைமுகக் கோடுகள் மாற்றியமைக்கப்படும்.
• எளிமைப்படுத்தப்பட்ட பதிலளிக்கக்கூடிய வடிவமைப்பு: செய்தி இணையதள எடுத்துக்காட்டில் காணப்படுவது போல, `grid-template-areas`-ஐ மறுவரையறை செய்வதன் மூலம் மீடியா வினவல்களில் முற்றிலும் மாறுபட்ட தளவமைப்புகளை உருவாக்கலாம். மறைமுக கோடு பெயர்களுடன் வைக்கப்பட்ட உருப்படிகள் புத்திசாலித்தனமாக மீண்டும் பாயும்.
• மேம்படுத்தப்பட்ட டெவலப்பர் அனுபவம் (DX): கோடுகளை எண்ணுவதை விட சொற்பொருள் பெயர்களுடன் வேலை செய்வது மிகவும் உள்ளுணர்வு மற்றும் பிழை குறைவாக உள்ளது. இது மேம்பாட்டை வேகப்படுத்துகிறது மற்றும் பிழைகளைக் குறைக்கிறது. நவீன உலாவி டெவலப்பர் கருவிகள் கிரிட் பகுதிகளுக்கு சிறந்த காட்சிப்படுத்திகளை வழங்குகின்றன, இது பிழைத்திருத்தத்தை எளிதாக்குகிறது.
• மேம்படுத்தப்பட்ட உலகளாவிய ஒத்துழைப்பு: வெவ்வேறு நாடுகள் மற்றும் நேர மண்டலங்களைச் சேர்ந்த டெவலப்பர்கள் ஒரு குறியீட்டுத் தளத்தில் பணிபுரியும்போது, பகிரப்பட்ட புரிதல் முக்கியமானது. சொற்பொருள் பெயர்கள் கலாச்சார மற்றும் மொழித் தடைகளைக் கடந்து தளவமைப்பு கட்டமைப்பிற்கு ஒரு பொதுவான சொற்களஞ்சியத்தை உருவாக்குகின்றன.

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

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

1. பெயர் மோதல்களைத் தவிர்க்கவும்: மறைமுகக் கோடு பெயர்கள் வெளிப்படையானவற்றுடன் மோதக்கூடும் என்பதை அறிந்திருங்கள். உங்களிடம் `main` என்று பெயரிடப்பட்ட ஒரு பகுதி இருந்தால், நீங்கள் வெளிப்படையாக `main-start` என்ற பெயரில் ஒரு கோட்டை உருவாக்குவதைத் தவிர்க்க வேண்டும். விவரக்குறிப்பு இதற்கு விதிகளைக் கொண்டுள்ளது, ஆனால் குழப்பத்தைத் தடுக்க தெளிவான பெயரிடல் மரபைப் பராமரிப்பது நல்லது.
2. `grid-template-areas`-ஐப் படிக்கக்கூடியதாக வைத்திருங்கள்: மிகவும் நுணுக்கமான ASCII கலையை உருவாக்க இது கவர்ச்சிகரமானதாக இருந்தாலும், மிகவும் சிக்கலான `grid-template-areas` வரையறைகளைப் பிரிப்பது கடினமாகிவிடும். உங்கள் பகுதிகளை ஒரு தர்க்கரீதியான, கூறு மட்டத்தில் வைத்திருங்கள்.
3. உலகளாவிய உலாவி ஆதரவு: இது CSS கிரிட் லெவல் 1 விவரக்குறிப்பின் ஒரு முக்கிய அம்சமாகும். இது அனைத்து நவீன எவர்கிரீன் உலாவிகளிலும் (Chrome, Firefox, Safari, Edge) முழுமையாக ஆதரிக்கப்படுகிறது, இது உலகளாவிய பார்வையாளர்களைக் குறிவைக்கும் உற்பத்தி வலைத்தளங்களுக்கு பாதுகாப்பான மற்றும் நம்பகமான தேர்வாக அமைகிறது.
4. டெவலப்பர் கருவிகளைப் பயன்படுத்தவும்: சந்தேகத்தில் இருக்கும்போது, உங்கள் உலாவியின் இன்ஸ்பெக்டரைப் பயன்படுத்தவும். இது கிரிட், பகுதிகள் மற்றும் அனைத்து பெயரிடப்பட்ட கோடுகளையும் (வெளிப்படையான மற்றும் மறைமுகமானவை) பார்வைக்கு மேல் வைக்கும், உங்கள் தளவமைப்பின் கட்டமைப்பில் உடனடித் தெளிவை வழங்கும்.

முடிவுரை: தானியங்கியைத் தழுவுங்கள்

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

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

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