M

MLOG

தமிழ்

CSS Grid-இன் உள்ளார்ந்த அளவுச் சொற்களான min-content, max-content, மற்றும் fit-content() ஐப் பயன்படுத்தி, அனைத்து சாதனங்களிலும் சிரமமின்றி மாற்றியமைக்கக்கூடிய, ஆற்றல்மிக்க, உள்ளடக்கத்தை அறியும் அமைப்புகளை உருவாக்குங்கள்.

CSS Grid-இன் ஆற்றலைத் திறத்தல்: உள்ளார்ந்த அளவிடுதல் மற்றும் உள்ளடக்க அடிப்படையிலான அமைப்புகளில் ஒரு ஆழமான பார்வை

வலை மேம்பாட்டின் பரந்த மற்றும் வளர்ந்து வரும் உலகில், உறுதியான மற்றும் நெகிழ்வான அமைப்புகளை உருவாக்குவது ஒரு முதன்மையான சவாலாக உள்ளது. CSS Grid Layout ஒரு மாற்றத்தக்க தீர்வாக உருவெடுத்துள்ளது, இது இரு பரிமாண பக்க அமைப்புகளின் மீது முன்னெப்போதும் இல்லாத கட்டுப்பாட்டை வழங்குகிறது. பல டெவலப்பர்கள் பிக்சல்கள் அல்லது ems போன்ற நிலையான அலகுகள் அல்லது fr போன்ற நெகிழ்வான அலகுகளைப் பயன்படுத்தி வெளிப்படையான கிரிட் ட்ராக் அளவிடுதலை அறிந்திருந்தாலும், CSS Grid-இன் உண்மையான சக்தி அதன் உள்ளார்ந்த அளவிடுதல் திறன்களில் உள்ளது. இந்த அணுகுமுறை, கிரிட் ட்ராக்குகளின் அளவு அவற்றின் உள்ளடக்கத்தால் தீர்மானிக்கப்படும், இது குறிப்பிடத்தக்க வகையில் நெகிழ்வான மற்றும் உள்ளடக்கத்தை அறியும் வடிவமைப்புகளை அனுமதிக்கிறது. CSS Grid-இன் உள்ளார்ந்த அளவுச் சொற்களான min-content, max-content, மற்றும் fit-content() உடன் உள்ளடக்க அடிப்படையிலான அமைப்புகளின் உலகிற்கு வரவேற்கிறோம்.

உள்ளார்ந்த அளவிடுதலைப் புரிந்துகொள்ளுதல்: முக்கிய கருத்து

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

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

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

1. min-content: கச்சிதமான ஆற்றல் மையம்

min-content என்றால் என்ன?

min-content என்ற முக்கியச் சொல், ஒரு கிரிட் பொருள் அதன் எந்த உள்ளடக்கமும் அதன் எல்லைகளை மீறாமல் சுருங்கக்கூடிய மிகச்சிறிய அளவைக் குறிக்கிறது. உரை உள்ளடக்கத்திற்கு, இது பொதுவாக மிக நீளமான உடைக்க முடியாத சரத்தின் (எ.கா., ஒரு நீண்ட சொல் அல்லது URL) அகலம் அல்லது ஒரு தனிமத்தின் (படம் போன்றவை) குறைந்தபட்ச அகலம் ஆகும். உள்ளடக்கம் வரி மடிப்பு செய்ய முடிந்தால், min-content பொருளை முடிந்தவரை குறுகலாக மாற்றுவதற்கு வரி மடிப்புகள் எங்கு ஏற்படும் என்பதன் அடிப்படையில் அளவைக் கணக்கிடும்.

min-content உரையுடன் எவ்வாறு செயல்படுகிறது

ஒரு பத்தி உரையைக் கவனியுங்கள். இந்த பத்தியைக் கொண்ட ஒரு கிரிட் ட்ராக்கிற்கு நீங்கள் min-content ஐப் பயன்படுத்தினால், அந்த ட்ராக் உடைக்க முடியாத மிக நீளமான சொல் அல்லது எழுத்து வரிசையை સમાவிக்க போதுமான அகலமாக மாறும். மற்ற எல்லா வார்த்தைகளும் வரி மடிப்பு செய்யப்படும், இது மிகவும் உயரமான, குறுகிய நிரலை உருவாக்கும். ஒரு படத்திற்கு, இது பொதுவாக அதன் உள்ளார்ந்த அகலமாக இருக்கும்.

எடுத்துக்காட்டு 1: min-content உடன் அடிப்படை உரை நிரல்

.container {
    display: grid;
    grid-template-columns: min-content 1fr;
    gap: 10px;
}

.sidebar {
    background-color: #e0f2f7; /* Light blue */
    padding: 15px;
    border-radius: 8px;
}

.main-content {
    background-color: #fff3e0; /* Light orange */
    padding: 15px;
    border-radius: 8px;
}

<div class="container">
    <div class="sidebar">
        <h3>Navigation</h3>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Services & Solutions</a></li>
            <li><a href="#">Contact Information</a></li>
        </ul>
    </div>
    <div class="main-content">
        <h2>Welcome to Our Global Platform</h2>
        <p>This platform provides comprehensive resources for professionals worldwide. We believe in fostering collaboration and innovation across diverse cultural backgrounds.</p>
        <p>Explore our extensive documentation and support articles for an optimal experience. Our mission is to empower individuals and organizations globally.</p>
    </div>
</div>

இந்த எடுத்துக்காட்டில், வழிசெலுத்தலைக் கொண்டிருக்கும் முதல் நிரல், அதன் பட்டியல் பொருட்களுக்குள் உள்ள மிக நீளமான உடைக்க முடியாத உரை சரத்தின் (எ.கா., "Contact Information") அகலத்திற்கு சுருங்கும். இது வழிசெலுத்தல் முடிந்தவரை கச்சிதமாக இருப்பதை உறுதி செய்கிறது, அதே நேரத்தில் முக்கிய உள்ளடக்கம் மீதமுள்ள இடத்தை (1fr) எடுத்துக்கொள்ள அனுமதிக்கிறது.

min-content-இன் பயன்பாடுகள்

min-content உடன் கவனிக்க வேண்டியவை

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

2. max-content: விரிவான பார்வை

max-content என்றால் என்ன?

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

max-content உரையுடன் எவ்வாறு செயல்படுகிறது

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

எடுத்துக்காட்டு 2: தலைப்புக்கு max-content உடன் தலைப்புப் பட்டி

.header-grid {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    align-items: center;
    gap: 20px;
    background-color: #e8f5e9; /* Light green */
    padding: 15px 25px;
    border-radius: 8px;
}

.logo {
    font-size: 1.8em;
    font-weight: bold;
    color: #2e7d32; /* Dark green */
}

.page-title {
    font-size: 1.5em;
    text-align: center;
    white-space: nowrap; /* Ensures title stays on one line */
    overflow: hidden; /* Hides overflow if space is too small */
    text-overflow: ellipsis; /* Adds ellipsis for hidden overflow */
    color: #388e3c;
}

.user-info {
    text-align: right;
    font-style: italic;
    color: #43a047;
}

<div class="header-grid">
    <div class="logo">GlobalCo.</div>
    <div class="page-title">Comprehensive International Business Dashboard</div>
    <div class="user-info">Welcome, Mr. Singh</div>
</div>

இந்த சூழ்நிலையில், `page-title` நிரல் 1fr என அமைக்கப்பட்டுள்ளது, ஆனால் `logo` மற்றும் `user-info` நிரல்கள் max-content ஆகும். இதன் பொருள், லோகோ மற்றும் பயனர் தகவல் தங்களுக்குத் தேவையான இடத்தை மட்டுமே எடுத்துக்கொள்ளும், அவை வரி மடிப்பு செய்யப்படாமல் இருப்பதை உறுதிசெய்கிறது, மற்றும் தலைப்பு மீதமுள்ள இடத்தை நிரப்பும். `.page-title`-க்கு white-space: nowrap; மற்றும் text-overflow: ellipsis; ஐச் சேர்த்துள்ளோம், இது max-content நேரடியாகப் பயன்படுத்தப்படாத போதும், ஒரு உருப்படி ஒரே வரியில் இருக்க வேண்டும் என்று நீங்கள் விரும்பினால், அல்லது 1fr நிரல் தலைப்புக்கு மிகவும் சிறியதாகிவிட்டால் உள்ளடக்கத்தை எவ்வாறு நிர்வகிப்பது என்பதைக் காட்டுகிறது.

திருத்தம் மற்றும் தெளிவுபடுத்தல்: மேற்கண்ட எடுத்துக்காட்டில், `page-title` div `1fr` நிரலில் உள்ளது, `max-content` நிரலில் அல்ல. நாம் நடு நிரலை max-content என அமைத்திருந்தால், "Comprehensive International Business Dashboard" என்ற தலைப்பு நடு நிரலை மிகவும் அகலமாக மாற்றியிருக்கும், இது முழு `header-grid`-க்கும் வழிதல் ஏற்படக்கூடும். இது max-content வரி மடிப்பைத் தடுத்தாலும், ஒட்டுமொத்த அமைப்பிற்குள் கவனமாக நிர்வகிக்கப்படாவிட்டால் கிடைமட்ட ஸ்க்ரோலிங்கிற்கு வழிவகுக்கும் என்பதை எடுத்துக்காட்டுகிறது. பக்க உறுப்புகளில் max-content ஐப் பயன்படுத்துவது, நடுப்பகுதி மீதமுள்ள இடத்தை மாறும் வகையில் எடுத்துக்கொள்ள அனுமதிக்கிறது என்பதே இந்த எடுத்துக்காட்டின் நோக்கம்.

max-content-இன் பயன்பாடுகள்

max-content உடன் கவனிக்க வேண்டியவை

max-content ஐப் பயன்படுத்துவது, உள்ளடக்கம் மிகவும் நீளமாகவும் வியூபோர்ட் குறுகலாகவும் இருந்தால் கிடைமட்ட ஸ்க்ரோல்பார்களுக்கு வழிவகுக்கும். சிறிய திரைகளில் பதிலளிக்கக்கூடிய அமைப்புகளை உடைக்கும் அதன் திறனைப் பற்றி எச்சரிக்கையாக இருப்பது முக்கியம். இது குறுகியதாக இருக்கும் என்று உத்தரவாதம் அளிக்கப்பட்ட அல்லது வழிந்து செல்லும், வரி மடிப்பு செய்யாத நடத்தை வெளிப்படையாக விரும்பப்படும் உள்ளடக்கத்திற்கு இது சிறந்தது.

3. fit-content(): புத்திசாலித்தனமான கலப்பினம்

fit-content() என்றால் என்ன?

fit-content() செயல்பாடு உள்ளார்ந்த அளவிடுதல் முக்கியச் சொற்களில் மிகவும் நெகிழ்வானதும் சுவாரஸ்யமானதுமாகும். இது min-content மற்றும் max-content ஆகிய இரண்டின் நன்மைகளையும் ஒருங்கிணைக்கும் ஒரு மாறும் அளவிடுதல் பொறிமுறையை வழங்குகிறது, அதே நேரத்தில் ஒரு அதிகபட்ச விரும்பத்தக்க அளவைக் குறிப்பிடவும் உங்களை அனுமதிக்கிறது.

அதன் நடத்தையை இந்த சூத்திரத்தால் விவரிக்கலாம்: min(max-content, max(min-content, <flex-basis>)).

அதை உடைத்துப் பார்ப்போம்:

சுருக்கமாக, fit-content() ஒரு உருப்படியை அதன் max-content அளவு வரை வளர அனுமதிக்கிறது, ஆனால் அது குறிப்பிட்ட `<flex-basis>` மதிப்பால் கட்டுப்படுத்தப்படுகிறது. உள்ளடக்கம் சிறியதாக இருந்தால், அது தனக்குத் தேவையானதை மட்டுமே எடுத்துக்கொள்கிறது (max-content போல). உள்ளடக்கம் பெரியதாக இருந்தால், வழிதலைத் தடுக்க அது சுருங்குகிறது, ஆனால் அதன் min-content அளவிற்குக் கீழே ஒருபோதும் சுருங்காது. இது பதிலளிக்கக்கூடிய அமைப்புகளுக்கு நம்பமுடியாத அளவிற்கு பல்துறைத்திறன் வாய்ந்ததாக ஆக்குகிறது.

எடுத்துக்காட்டு 3: fit-content() உடன் பதிலளிக்கக்கூடிய கட்டுரை அட்டைகள்

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, fit-content(400px)));
    gap: 25px;
    padding: 20px;
    background-color: #f0f4c3; /* Light yellow-green */
    border-radius: 10px;
}

.card {
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden; /* Ensures content inside doesn't spill */
}

.card h3 {
    margin-top: 0;
    color: #558b2f;
}

.card p {
    font-size: 0.95em;
    color: #424242;
}

.card .button {
    display: inline-block;
    padding: 10px 15px;
    background-color: #7cb342; /* Medium green */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    margin-top: 15px;
}

<div class="card-grid">
    <div class="card">
        <h3>Global Economic Outlook 2024</h3>
        <p>An in-depth analysis of global market trends, investment opportunities, and challenges for the upcoming year, featuring insights from leading economists across continents.</p>
        <a href="#" class="button">Read More</a>
    </div>
    <div class="card">
        <h3>Sustainable Innovations in Tech</h3>
        <p>Discover groundbreaking technologies from Asia to Europe that are paving the way for a more sustainable future, focusing on renewable energy and eco-friendly manufacturing.</p>
        <a href="#" class="button">Read More</a>
    </div>
    <div class="card">
        <h3>Cross-Cultural Communication Strategies for Remote Teams</h3>
        <p>Effective communication is vital. Learn how to bridge cultural gaps and enhance collaboration in dispersed teams spanning multiple time zones and diverse linguistic backgrounds.</p>
        <a href="#" class="button">Read More</a>
    </div>
    <div class="card">
        <h3>The Future of Digital Currencies</h3>
        <p>Explore the evolving landscape of digital currencies, their impact on traditional finance, and regulatory perspectives from different economic blocs worldwide.</p>
        <a href="#" class="button">Read More</a>
    </div>
</div>

இங்கே, grid-template-columns: repeat(auto-fit, minmax(250px, fit-content(400px))) பயன்படுத்தப்படுகிறது. இது மிகவும் சக்திவாய்ந்த கலவையாகும்:

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

fit-content()-இன் பயன்பாடுகள்

fit-content() உடன் கவனிக்க வேண்டியவை

fit-content() நம்பமுடியாத நெகிழ்வுத்தன்மையை வழங்குகிறது, ஆனால் அதன் மாறும் தன்மை சில நேரங்களில் அதன் min/max/flex-basis கணக்கீட்டில் உங்களுக்கு முழுமையாகப் பழக்கமில்லை என்றால், பிழைதிருத்தத்தை சற்று சிக்கலாக்கும். எதிர்பாராத வரி மடிப்பு அல்லது வெற்று இடங்களைத் தவிர்க்க உங்கள் `<flex-basis>` மதிப்பு நன்கு தேர்ந்தெடுக்கப்பட்டிருப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். இது பெரும்பாலும் வலுவான நடத்தைக்கு ஒரு `minmax()` செயல்பாட்டுடன் சிறப்பாகப் பயன்படுத்தப்படுகிறது.

உள்ளார்ந்த அளவிடுதல் vs. வெளிப்படையான மற்றும் நெகிழ்வான அளவிடுதல்

உள்ளார்ந்த அளவிடுதலை உண்மையாகப் பாராட்ட, அதை மற்ற பொதுவான CSS Grid அளவிடுதல் முறைகளுடன் ஒப்பிடுவது உதவியாக இருக்கும்:

CSS Grid-இன் வலிமை பெரும்பாலும் இந்த முறைகளை இணைப்பதில் உள்ளது. உதாரணமாக, `minmax()` அடிக்கடி உள்ளார்ந்த அளவிடுதலுடன் ஒரு நெகிழ்வான வரம்பை அமைக்கப் பயன்படுத்தப்படுகிறது, அதாவது `minmax(min-content, 1fr)`, இது ஒரு நிரலை குறைந்தபட்சம் அதன் உள்ளடக்கத்தின் குறைந்தபட்ச அளவாக இருக்க அனுமதிக்கிறது, ஆனால் அதிக இடம் இருந்தால் கிடைக்கக்கூடிய இடத்தை நிரப்ப விரிவடைகிறது.

மேம்பட்ட பயன்பாடுகள் மற்றும் சேர்க்கைகள்

மாறும் படிவ அமைப்புகள்

ஒரு படிவத்தைக் கற்பனை செய்து பாருங்கள், அங்கு லேபிள்கள் குறுகியதாக (எ.கா., "பெயர்") அல்லது நீளமாக (எ.கா., "விரும்பிய தொடர்பு முறை") இருக்கலாம். லேபிள் நிரலுக்கு min-content ஐப் பயன்படுத்துவது, அது எப்போதும் தேவையான இடத்தை மட்டுமே எடுத்துக்கொள்வதை உறுதிசெய்கிறது, বিশ্রী அகலமான லேபிள் நிரல்கள் அல்லது வழிதலைத் தடுக்கிறது, அதே நேரத்தில் உள்ளீட்டு புலங்கள் மீதமுள்ள இடத்தை எடுத்துக்கொள்ளலாம்.

.form-grid {
    display: grid;
    grid-template-columns: min-content 1fr;
    gap: 15px 20px;
    max-width: 600px;
    margin: 30px auto;
    padding: 25px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fcfcfc;
}

.form-label {
    text-align: right;
    padding-right: 10px;
    font-weight: bold;
    color: #333;
    align-self: center;
}

.form-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

<div class="form-grid">
    <label for="name" class="form-label">Your Name:</label>
    <input type="text" id="name" class="form-input">

    <label for="email" class="form-label">Email Address:</label>
    <input type="email" id="email" class="form-input">

    <label for="pref-comm" class="form-label">Preferred Communication Method:</label>
    <select id="pref-comm" class="form-input">
        <option>Email</option>
        <option>Phone</option>
        <option>SMS/Text Message</option>
    </select>

    <label for="message" class="form-label">Your Message (Optional):</label>
    <textarea id="message" class="form-input" rows="4"></textarea>
</div>

fit-content() ஐ auto-fit/auto-fill உடன் இணைத்தல்

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

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, fit-content(300px)));
    gap: 15px;
    padding: 20px;
    background-color: #e3f2fd; /* Light blue */
    border-radius: 10px;
}

.gallery-item {
    background-color: #ffffff;
    border: 1px solid #c5e1a5; /* Light green border */
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.gallery-item img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 10px;
}

.gallery-item p {
    font-size: 0.9em;
    color: #546e7a;
    margin: 0;
}

<div class="gallery">
    <div class="gallery-item">
        <img src="https://via.placeholder.com/280x180/ADD8E6/000000?text=Cityscape" alt="Cityscape">
        <p>Urban Horizons</p>
    </div>
    <div class="gallery-item">
        <img src="https://via.placeholder.com/220x150/F08080/FFFFFF?text=Mountains" alt="Mountains">
        <p>Alpine Peaks</p>
    </div>
    <div class="gallery-item">
        <img src="https://via.placeholder.com/300x200/90EE90/000000?text=Forest" alt="Forest">
        <p>Enchanted Forest</p>
    </div>
    <div class="gallery-item">
        <img src="https://via.placeholder.com/250x170/FFA07A/000000?text=Ocean" alt="Ocean">
        <p>Coastal Serenity</p>
    </div>
    <div class="gallery-item">
        <img src="https://via.placeholder.com/270x190/87CEFA/000000?text=Desert" alt="Desert">
        <p>Desert Dunes</p>
    </div>
</div>

இங்கே, `auto-fill` (அல்லது `auto-fit`) முடிந்தவரை பல நிரல்களை உருவாக்குகிறது. ஒவ்வொரு நிரலின் அகலமும் `minmax(200px, fit-content(300px))` மூலம் கட்டுப்படுத்தப்படுகிறது, இது உருப்படிகள் குறைந்தபட்சம் 200px அகலமாக இருப்பதை உறுதிசெய்கிறது, மற்றும் அவற்றின் உள்ளார்ந்த உள்ளடக்க அளவு வரை விரிவடைகிறது, ஆனால் ஒருபோதும் 300px ஐத் தாண்டாது. இந்த அமைப்பு நிரல்களின் எண்ணிக்கையையும் அவற்றின் அகலத்தையும் கிடைக்கக்கூடிய இடத்தின் அடிப்படையில் மாறும் வகையில் சரிசெய்கிறது, இது எந்தவொரு வியூபோர்ட்டிற்கும் அதிக தகவமைப்பு அமைப்பை வழங்குகிறது.

உள்ளமைக்கப்பட்ட கிரிட்கள் மற்றும் உள்ளார்ந்த அளவிடுதல்

உள்ளார்ந்த அளவிடுதல் உள்ளமைக்கப்பட்ட கிரிட்களுக்குள் சமமாக பயனுள்ளதாக இருக்கும். உதாரணமாக, ஒரு முக்கிய கிரிட் min-content ஐப் பயன்படுத்தி ஒரு பக்கப் பட்டியை வரையறுக்கலாம், மேலும் அந்த பக்கப் பட்டிக்குள், ஒரு உள்ளமைக்கப்பட்ட கிரிட் `fit-content()` ஐப் பயன்படுத்தி அதன் சொந்த உள் உறுப்புகளை மாறும் வகையில் அமைக்கலாம். இந்த மட்டுத்தன்மை சிக்கலான, அளவிடக்கூடிய பயனர் இடைமுகங்களை உருவாக்குவதற்கான திறவுகோலாகும்.

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

உள்ளார்ந்த அளவிடுதலை எப்போது தேர்வு செய்வது

சாத்தியமான ஆபத்துகள் மற்றும் அவற்றை எவ்வாறு தணிப்பது

உள்ளார்ந்த அளவிடுதல் சிக்கல்களை பிழைதிருத்தம் செய்தல்

உலாவி டெவலப்பர் கருவிகள் உங்கள் சிறந்த நண்பன். ஒரு கிரிட் கொள்கலனை ஆய்வு செய்யும்போது:

முடிவுரை: CSS Grid உடன் உள்ளடக்க-முதல் அமைப்புகளைத் தழுவுதல்

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

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

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