M

MLOG

தமிழ்

CSS Grid மற்றும் Flexbox-ன் ஆற்றலைத் திறந்திடுங்கள்! சிறந்த வலை வடிவமைப்பு மற்றும் மேம்பாட்டிற்கு ஒவ்வொரு லேஅவுட் முறையையும் எப்போது பயன்படுத்த வேண்டும் என்பதை அறிக.

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

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

அடிப்படைகளைப் புரிந்துகொள்வது

Flexbox என்றால் என்ன?

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

முக்கிய கருத்துகள்:

CSS Grid என்றால் என்ன?

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

முக்கிய கருத்துகள்:

Flexbox செயல்பாட்டில்: ஒரு-பரிமாண லேஅவுட்கள்

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

நேவிகேஷன் பார்கள்

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


<nav class="navbar">
  <a href="#" class="logo">Brand</a>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>


.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #f0f0f0;
}

.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin-left: 1rem;
}

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

கார்டு கூறுகள்

தயாரிப்புத் தகவல், வலைப்பதிவு இடுகைகள் அல்லது பயனர் சுயவிவரங்களைக் காண்பிக்கப் பயன்படும் கார்டுகள், Flexbox-ஆல் பயனடைகின்றன. நீங்கள் கார்டின் உள்ளடக்கத்தை (படம், தலைப்பு, விளக்கம், பொத்தான்கள்) செங்குத்தாக அல்லது கிடைமட்டமாக எளிதாக ગોઠવી શકો છો, స్థిరమైన இடைவெளி மற்றும் சீரமைப்பை உறுதி செய்யலாம்.


<div class="card">
  <img src="image.jpg" alt="Card Image">
  <div class="card-content">
    <h2>Card Title</h2>
    <p>This is a short description of the card content.</p>
    <button>Learn More</button>
  </div>
</div>


.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.card img {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 1rem;
}

இங்கே, Flexbox கார்டுக்குள் படம், தலைப்பு, விளக்கம் மற்றும் பொத்தானை செங்குத்தாக ગોઠવીస్తుంది. flex-direction: column; பயன்படுத்துவது உள்ளடக்கம் சரியாக அடுக்கி வைக்கப்படுவதை உறுதி செய்கிறது.

சம உயரப் பத்திகள்

சம உயரப் பத்திகளை அடைவது, ஒரு பொதுவான வடிவமைப்புத் தேவை, Flexbox உடன் எளிதானது. பெற்றோர் கன்டெய்னருக்கு display: flex; மற்றும் ஒவ்வொரு பத்திக்கும் flex: 1; பயன்படுத்துவதன் மூலம், அவை தானாகவே உயரமான பத்தியின் உயரத்திற்கு நீட்டிக்கப்படும்.


<div class="container">
  <div class="column">Column 1 - Some shorter content.</div>
  <div class="column">Column 2 - This column has more content. This column has more content. This column has more content. This column has more content.</div>
  <div class="column">Column 3</div>
</div>


.container {
  display: flex;
}

.column {
  flex: 1;
  padding: 1rem;
  border: 1px solid #eee;
}

flex: 1; பண்பு ஒவ்வொரு பத்தியும் சமமாக வளரச் சொல்கிறது, இதன் விளைவாக அவற்றின் உள்ளடக்க நீளத்தைப் பொருட்படுத்தாமல் சம உயரப் பத்திகள் உருவாகின்றன.

CSS Grid-ன் களம்: இரு-பரிமாண லேஅவுட்கள்

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

இணையதள லேஅவுட்கள் (தலைப்புகள், அடிக்குறிப்புகள், சைட்பார்கள்)

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


<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>


.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav nav nav"
    "sidebar main main"
    "footer footer footer";
  gap: 10px;
  height: 100vh; /* Ensure the grid covers the viewport height */
}

.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; }
.sidebar { grid-area: sidebar; background-color: #bbb; padding: 1em; }
.footer { grid-area: footer; background-color: #aaa; padding: 1em; }

/* Responsive adjustments */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr; /* Single column layout */
    grid-template-rows: auto auto 1fr auto auto; /* Add a row for the sidebar */
    grid-template-areas:
      "header"
      "nav"
      "main"
      "sidebar"
      "footer";
  }
}

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

சிக்கலான படிவங்கள்

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


<form class="grid-form">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea>
  <button type="submit">Submit</button>
</form>


.grid-form {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 1rem;
}

.grid-form label {
  text-align: right;
}

.grid-form button {
  grid-column: span 2; /* Span across both columns */
  text-align: center;
}

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

கேலரி லேஅவுட்கள்

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


<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
  <img src="image5.jpg" alt="Image 5">
  <img src="image6.jpg" alt="Image 6">
</div>


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

.gallery img {
  width: 100%;
  height: auto;
}

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); என்ற பண்பு, திரை அளவிற்கு ஏற்ப பத்திகளின் எண்ணிக்கையை தானாக சரிசெய்யும் ஒரு ரெஸ்பான்சிவ் கேலரியை உருவாக்குகிறது.

Flexbox எப்போது பயன்படுத்த வேண்டும்: விரைவு வழிகாட்டி

CSS Grid எப்போது பயன்படுத்த வேண்டும்: விரைவு வழிகாட்டி

Flexbox மற்றும் Grid-ஐ இணைத்தல்: ஒரு சக்திவாய்ந்த கலவை

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

உதாரணமாக, ஒரு இணையதளத்தின் அடிப்படை லேஅவுட்டை (தலைப்பு, நேவிகேஷன், முக்கிய உள்ளடக்கம், சைட்பார், அடிக்குறிப்பு) உருவாக்க நீங்கள் Grid-ஐப் பயன்படுத்தலாம். பின்னர், முக்கிய உள்ளடக்கப் பகுதிக்குள், நீங்கள் தொடர்ச்சியான கார்டுகளை ગોઠவிக்க அல்லது ஒரு படிவத்திற்குள் உள்ள உறுப்புகளை சீரமைக்க Flexbox-ஐப் பயன்படுத்தலாம்.

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

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

செயல்திறன் பரிசீலனைகள்

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

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

Flexbox மற்றும் Grid நவீன உலாவிகளில் சிறந்த ஆதரவைக் கொண்டுள்ளன. இருப்பினும், இணக்கத்தன்மை அட்டவணைகளை (எ.கா., Can I use... இணையதளத்தில்) சரிபார்ப்பது மற்றும் தேவைப்பட்டால் பழைய உலாவிகளுக்கு ஃபால்பேக் தீர்வுகளை வழங்குவது எப்போதும் ஒரு நல்ல யோசனை. பரந்த இணக்கத்தன்மைக்காக தானாக விற்பனையாளர் முன்னொட்டுகளைச் சேர்க்க Autoprefixer-ஐப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.

உலகம் முழுவதிலுமிருந்து நடைமுறை உதாரணங்கள்

வெவ்வேறு பிராந்தியங்களிலிருந்து எடுக்கப்பட்ட, நிஜ உலக இணையதளங்கள் மற்றும் பயன்பாடுகளில் Flexbox மற்றும் Grid எவ்வாறு பயன்படுத்தப்படுகின்றன என்பதற்கான சில உதாரணங்கள் இங்கே:

முடிவுரை: சரியான கருவியைத் தேர்ந்தெடுப்பது

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

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

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