M

MLOG

தமிழ்

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

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

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

CSS கிரிட் ஏரியாஸ் என்றால் என்ன?

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

இதை உங்கள் வலைப்பக்கத்திற்கான ஒரு தளத் திட்டத்தை வரைவது போல நினைத்துப் பாருங்கள். நீங்கள் "header", "navigation", "main", "sidebar", மற்றும் "footer" போன்ற பகுதிகளை வரையறுத்து, பின்னர் உங்கள் உள்ளடக்கத்தை இந்த முன்னரே வரையறுக்கப்பட்ட பகுதிகளில் வைக்கலாம்.

பெயரிடப்பட்ட கிரிட் பகுதிகளைப் பயன்படுத்துவதன் நன்மைகள்

CSS கிரிட் ஏரியாஸின் அடிப்படை தொடரியல்

பெயரிடப்பட்ட கிரிட் பகுதிகளை வரையறுப்பதற்கான முக்கிய property grid-template-areas ஆகும். இந்த property, குறிப்பிட்ட பகுதிகளுக்கு elements-ஐ ஒதுக்க grid-area உடன் இணைந்து பயன்படுத்தப்படுகிறது.

இதோ அடிப்படை தொடரியல்:

.grid-container {
 display: grid;
 grid-template-areas:
  "header header header"
  "nav main aside"
  "footer footer footer";
}

.header {
 grid-area: header;
}

.nav {
 grid-area: nav;
}

.main {
 grid-area: main;
}

.aside {
 grid-area: aside;
}

.footer {
 grid-area: footer;
}

இந்த எடுத்துக்காட்டில், grid-template-areas property ஒரு 3x3 கிரிட் லேஅவுட்டை வரையறுக்கிறது. ஒவ்வொரு வரிசையும் கிரிட்டில் ஒரு வரிசையைக் குறிக்கிறது, மேலும் ஒரு வரிசைக்குள் உள்ள ஒவ்வொரு வார்த்தையும் ஒரு நெடுவரிசையைக் குறிக்கிறது. ஒவ்வொரு செல்லுக்கும் ஒதுக்கப்பட்ட பெயர்கள் (எ.கா., "header", "nav", "main") தனிப்பட்ட elements-க்கு பயன்படுத்தப்படும் grid-area property-உடன் ஒத்துப்போகின்றன.

CSS கிரிட் ஏரியாஸின் நடைமுறை எடுத்துக்காட்டுகள்

CSS கிரிட் ஏரியாஸின் சக்தி மற்றும் நெகிழ்வுத்தன்மையை விளக்க சில நடைமுறை எடுத்துக்காட்டுகளை ஆராய்வோம்.

எடுத்துக்காட்டு 1: அடிப்படை வலைத்தள லேஅவுட்

ஒரு header, navigation, main content area, sidebar, மற்றும் footer கொண்ட ஒரு பொதுவான வலைத்தள லேஅவுட்டைக் கவனியுங்கள். CSS கிரிட் ஏரியாஸைப் பயன்படுத்தி அதை எவ்வாறு செயல்படுத்தலாம் என்பது இங்கே:

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

.grid-container {
 display: grid;
 grid-template-columns: 1fr 3fr 1fr; /* தேவைக்கேற்ப நெடுவரிசை அகலங்களை சரிசெய்யவும் */
 grid-template-rows: auto auto 1fr auto; /* தேவைக்கேற்ப வரிசை உயரங்களை சரிசெய்யவும் */
 grid-template-areas:
  "header header header"
  "nav main aside"
  "footer footer footer";
 height: 100vh; /* கிரிட் முழு திரையையும் எடுத்துக்கொள்ள இது முக்கியம் */
}

.header {
 grid-area: header;
 background-color: #eee;
 padding: 1em;
}

.nav {
 grid-area: nav;
 background-color: #ddd;
 padding: 1em;
}

.main {
 grid-area: main;
 background-color: #ccc;
 padding: 1em;
}

.aside {
 grid-area: aside;
 background-color: #bbb;
 padding: 1em;
}

.footer {
 grid-area: footer;
 background-color: #aaa;
 padding: 1em;
 text-align: center;
}

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

எடுத்துக்காட்டு 2: ரெஸ்பான்சிவ் லேஅவுட் சரிசெய்தல்

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

@media (max-width: 768px) {
 .grid-container {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto;
  grid-template-areas:
  "header"
  "nav"
  "main"
  "aside"
  "footer";
 }
}

இந்த மீடியா வினவலில், 768px-க்கும் குறைவான திரைகளை நாங்கள் இலக்கு வைக்கிறோம். கிரிட் லேஅவுட்டை ஒரு ஒற்றை நெடுவரிசைக்கு மாற்றியுள்ளோம், header, navigation, main content, sidebar, மற்றும் footer-ஐ செங்குத்தாக அடுக்கியுள்ளோம். இது grid-template-areas property-ஐ மாற்றுவதன் மூலம் அடையப்படுகிறது.

எடுத்துக்காட்டு 3: ஒன்றுடன் ஒன்று சேரும் பகுதிகளுடன் சிக்கலான லேஅவுட்

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

.grid-container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: auto 1fr auto;
 grid-template-areas:
  "banner banner banner"
  "main main aside"
  "footer footer footer";
}

.banner {
 grid-area: banner;
 background-color: #888;
 color: white;
 padding: 2em;
 text-align: center;
}

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

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

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

வெற்று செல்களை குறிக்க "புள்ளி" குறியீட்டைப் பயன்படுத்துதல்

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

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

இந்த எடுத்துக்காட்டில், இரண்டாவது வரிசையில் உள்ள நடு செல் காலியாக விடப்பட்டுள்ளது, இது navigation மற்றும் sidebar-க்கு இடையில் ஒரு பார்வைக்குரிய இடைவெளியை உருவாக்குகிறது.

grid-template-areas-ஐ grid-template-columns மற்றும் grid-template-rows உடன் இணைத்தல்

grid-template-areas உங்கள் கிரிட்டின் கட்டமைப்பை வரையறுத்தாலும், grid-template-columns மற்றும் grid-template-rows-ஐப் பயன்படுத்தி நெடுவரிசைகள் மற்றும் வரிசைகளின் அளவை நீங்கள் இன்னும் வரையறுக்க வேண்டும். உங்கள் வடிவமைப்பு தேவைகளின் அடிப்படையில் பொருத்தமான அலகுகளை (எ.கா., fr, px, em, %) தேர்ந்தெடுப்பது முக்கியம்.

உதாரணமாக:

.grid-container {
 display: grid;
 grid-template-columns: 1fr 2fr 1fr; /* ரெஸ்பான்சிவ் நெடுவரிசைகளுக்கான பின்ன அலகுகள் */
 grid-template-rows: auto 1fr auto; /* header மற்றும் footer-க்கான தானியங்கு உயரம் */
 grid-template-areas:
  "header header header"
  "nav main aside"
  "footer footer footer";
}

கிரிட் உருப்படிகளுக்கு இடையில் இடைவெளி உருவாக்க grid-gap-ஐப் பயன்படுத்துதல்

grid-gap property கிரிட் உருப்படிகளுக்கு இடையில் எளிதாக இடைவெளியைச் சேர்க்க உங்களை அனுமதிக்கிறது. இது உங்கள் லேஅவுட்டின் பார்வைக்குரிய கவர்ச்சியையும் வாசிப்புத்திறனையும் மேம்படுத்தும்.

.grid-container {
 display: grid;
 grid-template-columns: 1fr 2fr 1fr;
 grid-template-rows: auto 1fr auto;
 grid-template-areas:
  "header header header"
  "nav main aside"
  "footer footer footer";
 grid-gap: 10px; /* கிரிட் உருப்படிகளுக்கு இடையில் 10px இடைவெளி சேர்க்கவும் */
}

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

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

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

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

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

CSS கிரிட் லேஅவுட்டிற்கான உலாவி இணக்கத்தன்மையைச் சரிபார்க்க Can I use... போன்ற கருவிகளைப் பயன்படுத்தலாம்.

நிஜ-உலக எடுத்துக்காட்டுகள் மற்றும் வழக்கு ஆய்வுகள்

நவீன வலை வடிவமைப்பில் CSS கிரிட் ஏரியாஸ் எவ்வாறு பயன்படுத்தப்படுகிறது என்பதற்கான சில நிஜ-உலக எடுத்துக்காட்டுகளைப் பார்ப்போம்.

எடுத்துக்காட்டு 1: ஒரு செய்தி வலைத்தளத்தை மறுவடிவமைப்பு செய்தல்

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

.news-container {
 display: grid;
 grid-template-columns: 2fr 1fr;
 grid-template-rows: auto 1fr auto;
 grid-template-areas:
  "featured featured"
  "main sidebar"
  "footer footer";
}

.featured {
 grid-area: featured;
}

.main {
 grid-area: main;
}

.sidebar {
 grid-area: sidebar;
}

.footer {
 grid-area: footer;
}

எடுத்துக்காட்டு 2: ஒரு போர்ட்ஃபோலியோ வலைத்தளத்தை உருவாக்குதல்

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

.portfolio-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 grid-template-rows: auto;
 grid-gap: 10px;
}

இங்கே, repeat(auto-fit, minmax(200px, 1fr)) ஒரு ரெஸ்பான்சிவ் கிரிட்டை உருவாக்குகிறது, இது கிடைக்கும் திரை இடத்தின் அடிப்படையில் நெடுவரிசைகளின் எண்ணிக்கையை தானாகவே சரிசெய்கிறது. minmax() செயல்பாடு ஒவ்வொரு சிறுபடமும் குறைந்தது 200px அகலமாக இருப்பதையும், மீதமுள்ள இடத்தை சமமாக நிரப்புவதையும் உறுதி செய்கிறது.

எடுத்துக்காட்டு 3: ஒரு இ-காமர்ஸ் தயாரிப்பு பக்கத்தை உருவாக்குதல்

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

.product-container {
 display: grid;
 grid-template-columns: 1fr 1fr;
 grid-template-rows: auto 1fr auto;
 grid-template-areas:
  "image description"
  "image details"
  " . cta";
}

.product-image {
 grid-area: image;
}

.product-description {
 grid-area: description;
}

.product-details {
 grid-area: details;
}

.call-to-action {
 grid-area: cta;
 text-align: right;
}

தவிர்க்க வேண்டிய பொதுவான தவறுகள்

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

முடிவுரை

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

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

மேலும் கற்றல் வளங்கள்:

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