FA-TOOLS — Header Component
DIRECT LINE 09202232789

آموزش استفاده از CSS Subgrid برای تراز کردن فرم‌ها و کامپوننت‌های پیچیده

🗺️ نقشه راه: Subgrid در یک نگاه

رفیق برنامه‌نویس، آماده‌ای تا چیدمان‌های پیچیده‌ات رو متحول کنی؟ Subgrid یه ابزار فوق‌العاده‌ست که اومده تا دردسرهای تراز کردن عناصر داخلیِ گرید رو تموم کنه. بیا ببینیم قراره چی یاد بگیریم:

  • ✅
    Subgrid چیه؟ – معرفی این رفیق جدیدمون و اینکه چرا بهش نیاز داریم.
  • 💡
    چطور کار می‌کنه؟ – قوانین بازی و سینتکس (Syntax) ساده‌اش.
  • 🚀
    کاربردها: – تراز کردن فرم‌ها و کامپوننت‌های تو در تو (Nested) بدون عرق ریختن!
  • 🛠️
    مثال‌های عملی: – از صفر تا صد با کدنویسی، از HTML تا CSS.
  • ❓
    عیب‌یابی: – راه حل مشکلات رایج و چالش‌ها.

با این نقشه راه، قراره از یه چیدمان بهم ریخته به یه طراحی تمیز و دقیق برسیم. بزن بریم!

سلام رفیق برنامه‌نویس! اگه تا حالا با CSS Grid کار کرده باشی، می‌دونی چقدر قدرتمنده. می‌تونه چیدمان‌های پیچیده رو برات مثل آب خوردن بسازه. اما حتماً با این مشکل هم برخورد کردی که وقتی یه عنصر رو داخل یه سلول Grid قرار می‌دی و اون عنصر خودش یه Grid جداگانه داره، دیگه نمی‌تونی آیتم‌های داخلی اون رو با Grid اصلی تراز کنی. اینجا بود که دغدغه‌ای بزرگ برای توسعه‌دهنده‌ها شکل گرفت! همین الان می‌تونی برای ابزارهای حرفه‌ای‌تر برنامه‌نویسی و کدهای آماده جذاب، یه سر به فروشگاه ابزارهای ما بزنی و از کلی اسنیپت و سورس مفید بهره‌مند بشی.

Subgrid اومده تا این مشکل رو برای همیشه حل کنه. با Subgrid، یه عنصر گرید شده می‌تونه ردیف‌ها و ستون‌های گرید والدش رو به ارث ببره و آیتم‌های داخلی خودش رو دقیقاً با همون خطوط تراز کنه. یعنی دیگه لازم نیست برای هر لایه، محاسبات جداگانه و پیچیده انجام بدی. این یعنی طراحی‌های رسپانسیو (Responsive) و تمیز، بدون نیاز به کلی کد اضافی و هک‌های CSS. این قابلیت مخصوصاً وقتی به کار می‌اد که داری روی فرم‌های طولانی، کامپوننت‌های کارتی (Card Components) تو در تو یا داشبوردهای شلوغ کار می‌کنی. آماده‌ای که وارد دنیای هیجان‌انگیز Subgrid بشیم و چیدمان‌هات رو یک پله ارتقا بدی؟

Subgrid چیه و چرا باید ازش استفاده کنیم؟

قبل از Subgrid، اگه یه عنصر رو display: grid; می‌کردیم، می‌تونستیم اون رو توی یکی از سلول‌های گرید والدش قرار بدیم. اما اگه اون عنصر خودش هم یه گرید داخلی داشت، آیتم‌های داخلش فقط نسبت به خودش تراز می‌شدن. یعنی خطوط گرید داخلی و خارجی کاملاً مستقل از هم بودن. این وضعیت باعث می‌شد برای تراز کردن دقیق عناصر در سطوح مختلف، مجبور به استفاده از مارجین‌های منفی، پوزیشن‌های مطلق، یا حتی محاسبات جاوااسکریپتی بشیم که همه اینا کد رو پیچیده و نگهداریش رو سخت‌تر می‌کرد.

🧐 مشکل قبل از Subgrid

تصور کن یه کانتینر (Container) اصلی داری که با Grid چند ستونه چیده شده. حالا داخل یکی از ستون‌های این کانتینر، یه کامپوننت کارت (Card Component) داری که اون هم خودش باید محتواش رو به صورت Grid چیدمان کنه (مثلاً عکس، عنوان، متن و دکمه). بدون Subgrid، ستون‌های داخلی کارت نمی‌تونن با ستون‌های گرید اصلی کانتینر هم‌تراز بشن. این یعنی اگه بخوای مثلاً عنوان همه کارت‌ها در یک خط عمودی قرار بگیره، کارت‌هایی که داخل ستون‌های مختلف Grid اصلی هستن، دیگه با هم تراز نیستن.

Subgrid دقیقاً اینجا وارد بازی می‌شه. وقتی به یه گرید داخلی می‌گی grid-template-columns: subgrid; یا grid-template-rows: subgrid;، اون گرید دیگه برای خودش خطوط جدیدی ایجاد نمی‌کنه، بلکه از خطوط گرید والدش برای تراز کردن آیتم‌های خودش استفاده می‌کنه. به این ترتیب، می‌تونی یه هماهنگی بی‌نظیر بین لایه‌های مختلف چیدمانت ایجاد کنی. این قابلیت خصوصاً برای چیدمان‌های ماژولار و سیستمی فوق‌العاده کاربردیه.

چطور با Subgrid کار کنیم؟ سینتکس و مفهوم پایه

استفاده از Subgrid خیلی هم سخت نیست و بیشتر شبیه به فعال کردن یه ویژگی جدیده. بیا باهم قدم به قدم پیش بریم.

۱. گرید والد (Parent Grid) رو بساز

اول از همه، یه کانتینر اصلی نیاز داری که display: grid; باشه و خطوط (Tracks) خودش رو تعریف کرده باشه. این خطوط، همون خطوطی هستن که Subgrid قراره ازشون به ارث ببره.

⚡ مثال HTML برای گرید والد

[Click to Copy]
<div class="parent-grid">
    <div class="grid-item">
        <!-- اینجا Subgrid ما قرار می‌گیره -->
        <div class="subgrid-container">
            <div class="subgrid-item">عنوان ۱</div>
            <div class="subgrid-item">متن ۱</div>
            <div class="subgrid-item">دکمه ۱</div>
        </div>
    </div>
    <div class="grid-item">
        <div class="subgrid-container">
            <div class="subgrid-item">عنوان ۲</div>
            <div class="subgrid-item">متن ۲</div>
            <div class="subgrid-item">دکمه ۲</div>
        </div>
    </div>
    <div class="grid-item">
        <div class="subgrid-container">
            <div class="subgrid-item">عنوان ۳</div>
            <div class="subgrid-item">متن ۳ طولانی‌تر</div>
            <div class="subgrid-item">دکمه ۳</div>
        </div>
    </div>
</div>

⚡ مثال CSS برای گرید والد

[Click to Copy]
.parent-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 ستون با عرض یکسان */
    gap: 20px; /* فاصله بین آیتم‌های گرید */
    padding: 20px;
    border: 2px solid #3498db;
    background-color: #ecf0f1;
}

.grid-item {
    background-color: #ffffff;
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 5px;
    /* این آیتم، خودش یه کانتینر Subgrid خواهد بود */
}

۲. گرید فرزند رو به Subgrid تبدیل کن

حالا نوبت اون عنصریه که داخل یکی از سلول‌های گرید والد قرار گرفته و می‌خوایم خودش هم یه گرید باشه، اما از خطوط والدش استفاده کنه. این عنصر رو display: grid; می‌کنی و بعد به جای تعریف ردیف‌ها یا ستون‌ها با fr یا px، از کلمه کلیدی subgrid استفاده می‌کنی.

⚡ مثال CSS برای Subgrid

در این مثال، .subgrid-container که داخل .grid-item (آیتم گرید والد) قرار گرفته، خودش یه گرید می‌شه و ستون‌های گرید والد رو به ارث می‌بره.

[Click to Copy]
.subgrid-container {
    display: grid;
    /* اینجاست که جادو اتفاق می‌افته! */
    grid-template-columns: subgrid; 
    /* اگر گرید والدت دارای ردیف هم هست، می‌تونی از 'grid-template-rows: subgrid;' هم استفاده کنی. */
    grid-column: 1 / span 3; /* یا هر تعداد ستونی که آیتم والد اشغال کرده */
    /* اینجا می‌گیم این Subgrid، سه ستون از گرید والدش رو اشغال کنه */
    
    gap: 5px; /* می‌تونی برای Subgrid هم گپ (gap) جداگانه داشته باشی */
    border: 1px dashed #6c757d;
    padding: 10px;
    margin-top: 10px;
}

.subgrid-item {
    background-color: #e0f2f7;
    padding: 8px;
    border: 1px solid #b3e5fc;
    border-radius: 3px;
    text-align: center;
    font-size: 0.9em;
}

نکته مهم: grid-column یا grid-row روی عنصر .subgrid-container، باید مشخص کنه که اون عنصر چه تعداد ستون (یا ردیف) از گرید والد رو اشغال کرده. این کار به Subgrid می‌فهمونه که قراره از کدوم بخش خطوط گرید والد استفاده کنه.

کاربردهای طلایی Subgrid: فرم‌ها و کامپوننت‌های تو در تو

حالا که با مفهوم Subgrid آشنا شدی، بیا ببینیم کجاها می‌تونه حسابی کارمون رو راحت کنه و چیدمان‌های پیچیده رو برامون شیرین‌تر کنه.

۱. تراز کردن فرم‌های پیچیده

فرم‌ها یکی از بهترین سناریوها برای Subgrid هستن. فرض کن یه فرم چند ستونه داری که هر سطرش شامل لیبل و اینپوت‌های مختلفه. اگه بخوای لیبل‌ها همه در یک ستون و اینپوت‌ها همه در ستون بعدی باشن، ولی هر گروه از لیبل و اینپوت خودشون داخل یه فیلدست (Fieldset) یا یه div جداگانه باشن، Subgrid معجزه می‌کنه.

🛠️ مثال: فرم با لیبل‌ها و اینپوت‌های هم‌تراز

[Click to Copy]
<form class="form-grid">
    <div class="form-group">
        <label for="name">نام:</label>
        <input type="text" id="name" placeholder="نام خود را وارد کنید">
    </div>
    <div class="form-group">
        <label for="email">ایمیل:</label>
        <input type="email" id="email" placeholder="ایمیل شما">
    </div>
    <div class="form-group">
        <label for="address">آدرس:</label>
        <input type="text" id="address" placeholder="آدرس پستی">
    </div>
    <button type="submit">ارسال فرم</button>
</form>

[Click to Copy]
.form-grid {
    display: grid;
    /* دو ستون برای کل فرم: یکی برای لیبل‌ها، یکی برای اینپوت‌ها */
    grid-template-columns: auto 1fr; 
    gap: 15px 10px; /* فاصله عمودی و افقی */
    max-width: 600px;
    margin: 30px auto;
    padding: 25px;
    border: 1px solid #b0c4de;
    border-radius: 8px;
    background-color: #e6eef6;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.form-group {
    display: grid; /* اینجا تبدیل به گرید داخلی میشه */
    grid-column: 1 / span 2; /* کل دو ستون گرید والد رو اشغال می‌کنه */
    grid-template-columns: subgrid; /* و خطوط گرید والد رو به ارث می‌بره */
    /* gap: 10px; نیازی به گپ داخلی نیست چون لیبل و اینپوت مستقیماً با گرید اصلی تراز میشن */
}

.form-group label {
    grid-column: 1; /* لیبل در ستون اول گرید والد قرار می‌گیره */
    font-weight: bold;
    color: #444;
    align-self: center; /* تراز عمودی در مرکز سلول */
}

.form-group input {
    grid-column: 2; /* اینپوت در ستون دوم گرید والد قرار می‌گیره */
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}

.form-grid button {
    grid-column: 2; /* دکمه در ستون دوم قرار می‌گیره */
    justify-self: end; /* تراز به سمت راست */
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
}

.form-grid button:hover {
    background-color: #218838;
}

تو این مثال، هر .form-group خودش یه گرید هست و grid-template-columns: subgrid; باعث می‌شه لیبل‌ها و اینپوت‌ها در تمام سطرها دقیقاً با خطوط گرید والد (.form-grid) هم‌تراز بشن. دیگه لازم نیست نگران طول لیبل‌ها یا بهم ریختگی چیدمان باشی.

برای دیدن نمونه‌های بیشتری از اسنیپت‌های CSS کاربردی، می‌تونی سری به اینجا بزنی.

۲. کامپوننت‌های کارتی (Card Components) و داشبوردها

تصور کن یه داشبورد داری با چند ردیف کارت اطلاعاتی. هر کارت خودش شامل تصویر، عنوان، توضیحات و چند دکمه عملگره. اگه بخوای عنوان همه کارت‌ها، توضیحات همه کارت‌ها و دکمه‌ها در یک راستا باشن (حتی اگه کارت‌ها در ستون‌های مختلف گرید اصلی باشن)، Subgrid بهترین راه حله.

🛠️ مثال: کارت‌های هم‌تراز

[Click to Copy]
<div class="dashboard">
    <div class="card">
        <img src="https://via.placeholder.com/150" alt="Card Image 1" class="card-image">
        <div class="card-content">
            <h3>عنوان کارت ۱</h3>
            <p>متن کوتاه برای توضیحات این کارت جذاب.</p>
            <a href="#" class="card-button">بیشتر بدانید</a>
        </div>
    </div>
    <div class="card">
        <img src="https://via.placeholder.com/150" alt="Card Image 2" class="card-image">
        <div class="card-content">
            <h3>عنوان کارت دوم با متن طولانی‌تر</h3>
            <p>اینجا توضیحات بیشتری داریم برای این کارت که ببینیم چطور Subgrid کمک می‌کنه.</p>
            <a href="#" class="card-button">دیدن جزئیات</a>
        </div>
    </div>
    <div class="card">
        <img src="https://via.placeholder.com/150" alt="Card Image 3" class="card-image">
        <div class="card-content">
            <h3>کارت ۳</h3>
            <p>متن خیلی کوتاهی برای تست تراز بندی. عالیه نه؟</p>
            <a href="#" class="card-button">برو بریم</a>
        </div>
    </div>
</div>

[Click to Copy]
.dashboard {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* سه ستون برای داشبورد اصلی */
    grid-template-rows: auto auto auto; /* سه ردیف برای محتوای کارت‌ها (عنوان، متن، دکمه) */
    gap: 20px;
    padding: 30px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: grid; /* هر کارت خودش یه گرید میشه */
    grid-column: span 1; /* یک ستون از گرید والد رو اشغال می‌کنه */
    grid-row: span 3; /* تمام ردیف‌های مربوط به محتوای کارت رو اشغال می‌کنه */
    grid-template-rows: subgrid; /* ردیف‌های گرید والد رو به ارث می‌بره */
    padding-bottom: 15px; /* کمی فضای خالی پایین کارت */
}

.card-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    grid-row: 1; /* تصویر در ردیف اول گرید اصلی قرار می‌گیره */
}

.card-content {
    padding: 0 20px; /* پدینگ برای محتوا داخل کارت */
    display: contents; /* مهم: این عنصر خودش محتوای گرید نیست، بلکه فرزندانش هستند */
}

.card-content h3 {
    grid-row: 2; /* عنوان در ردیف دوم گرید اصلی */
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 1.3em;
    color: #333;
}

.card-content p {
    grid-row: 3; /* متن در ردیف سوم گرید اصلی */
    margin-bottom: 15px;
    color: #555;
    font-size: 0.95em;
    line-height: 1.6;
}

.card-content .card-button {
    grid-row: 4; /* دکمه در ردیف چهارم گرید اصلی */
    display: inline-block;
    padding: 8px 15px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
    justify-self: start; /* تراز به سمت چپ */
    margin-left: 20px;
}

.card-content .card-button:hover {
    background-color: #0056b3;
}

تو این سناریو، .dashboard گرید اصلی ماست که سه ردیف و سه ستون رو تعریف کرده. هر .card خودش یه گرید هست که از ردیف‌های گرید والد با grid-template-rows: subgrid; استفاده می‌کنه. با این کار، عنوان، توضیحات و دکمه‌های هر سه کارت دقیقاً با هم در یک خط افقی قرار می‌گیرن، حتی اگه محتواشون اندازه‌های مختلفی داشته باشه.

اگه علاقه‌مند به یادگیری بیشتر در زمینه اسنیپت‌های HTML هستی، می‌تونی سری به این بخش بزنی.

جدول: مقایسه Grid معمولی و Subgrid

برای اینکه تفاوت رو بهتر لمس کنی، بیا یه مقایسه سریع داشته باشیم:

ویژگی CSS Grid (معمولی)
تعریف خطوط گرید داخلی هر گرید داخلی، خطوط (Tracks) خودش رو به صورت مستقل تعریف می‌کنه.
تراز با گرید والد آیتم‌های گرید داخلی، نمی‌تونن با خطوط گرید والد تراز بشن.
پیچیدگی چیدمان چندلایه برای تراز کردن عناصر در سطوح مختلف، نیاز به محاسبات دستی، margin/positionhack، یا جاوااسکریپت.
مدیریت چیدمان مدیریت سخت‌تر در چیدمان‌های پیچیده و رسپانسیو.

✨ جدول: مزایای Subgrid

این قابلیت جدید، همزمان با Grid معمولی مورد استفاده قرار می‌گیره تا قدرتش رو دو چندان کنه:

ویژگی CSS Subgrid
تعریف خطوط گرید داخلی خطوط گرید والد رو به ارث می‌بره و از اون‌ها برای تراز کردن آیتم‌هاش استفاده می‌کنه.
تراز با گرید والد آیتم‌های گرید داخلی، مستقیماً با خطوط گرید والد تراز میشن.
پیچیدگی چیدمان چندلایه سادگی بی‌نظیر در چیدمان‌های پیچیده و حفظ هم‌ترازی در تمام سطوح.
مدیریت چیدمان کد تمیزتر، نگهداری آسان‌تر و رسپانسیو بهتر.

نکات مهم و بهترین شیوه‌ها (Best Practices)

مثل هر قابلیت جدیدی، Subgrid هم نکات و بهترین شیوه‌های خودشو داره که بهتره حواسمون بهشون باشه:

۱. پشتیبانی مرورگرها

پشتیبانی از Subgrid در مرورگرها روز به روز بهتر می‌شه. فایرفاکس (Firefox) مدت‌هاست که ازش پشتیبانی می‌کنه و کروم (Chrome) و سافاری (Safari) هم به تازگی به جمع پشتیبانی‌کننده‌ها پیوستن. با این حال، همیشه خوبه که قبل از استفاده در پروژه‌های بزرگ و تولیدی، سایت Can I use… رو بررسی کنی تا مطمئن بشی مرورگرهای هدف پروژت این قابلیت رو پشتیبانی می‌کنن. برای مرورگرهایی که هنوز از Subgrid پشتیبانی نمی‌کنن، باید یه فال‌بک (Fallback) مناسب با استفاده از Grid عادی یا فلکس‌باکس (Flexbox) در نظر بگیری.

۲. استفاده هوشمندانه از Subgrid

Subgrid برای حل مشکلات تراز کردن در لایه‌های تو در تو طراحی شده. ازش در مواقعی استفاده کن که واقعاً به هم‌ترازی دقیق آیتم‌های داخلی با خطوط گرید والد نیاز داری. برای چیدمان‌های ساده‌تر که نیاز به این سطح از هماهنگی ندارن، گرید معمولی یا حتی فلکس‌باکس هنوز هم انتخاب‌های خوبی هستن. تمرکز روی کدهای آماده و اسنیپت‌های مناسب برای هر موقعیت می‌تونه سرعتت رو بالا ببره.

۳. ترکیب با Grid Areas

می‌تونی Subgrid رو با grid-template-areas ترکیب کنی تا چیدمان‌های خواناتر و قابل نگهداری‌تری بسازی. اینجوری می‌تونی برای هر بخش از گریدت یه اسم بذاری و با Subgrid، آیتم‌های داخلی اون بخش رو هم راحت‌تر تراز کنی. مثلاً در طراحی یک وبسایت، هدر و فوتر و سایدبار و صفحه اصلی همگی می‌توانند از این قاعده پیروی کنند.

عیب‌یابی سریع (Troubleshooting)

هیچ کاری بدون چالش نیست! اگه توی مسیر استفاده از Subgrid به مشکل خوردی، این بخش رو بخون.

⚠️ مشکل: Subgrid کار نمی‌کنه!

  • ❌
    راه حل ۱: مطمئن شو مرورگرت از Subgrid پشتیبانی می‌کنه. DevTools رو باز کن و ببین آیا خاصیت subgrid شناسایی شده یا نه.
  • ❌
    راه حل ۲: عنصر والد display: grid; هست؟ Subgrid فقط روی آیتم‌های گرید کار می‌کنه که خودشون در یک گرید والد قرار گرفتن.
  • ❌
    راه حل ۳: آیا grid-column یا grid-row روی عنصر Subgrid اعمال شده؟ باید مشخص کنی Subgrid از کدوم خطوط گرید والد استفاده کنه.
  • ❌
    راه حل ۴: تعداد خطوطی که Subgrid از والد به ارث می‌بره رو درست مشخص کردی؟ مثلاً اگه grid-column: 1 / span 3; رو روی آیتم گرید والد (که خودش Subgrid هست) اعمال می‌کنی، Subgrid دقیقاً سه خط رو از والدش به ارث می‌بره.

💡 نکته: برای دیباگ بهتر از DevTools استفاده کن

مرورگرهای مدرن مثل کروم و فایرفاکس، ابزارهای دیباگ فوق‌العاده‌ای برای CSS Grid دارن. می‌تونی خطوط گرید رو ببینی، نام مناطق گرید رو نمایش بدی و دقیقاً متوجه بشی Subgrid داره چطور کار می‌کنه و آیا خطوط رو به درستی به ارث برده یا نه. این قابلیت‌ها بهت کمک می‌کنه سریع‌تر مشکلت رو پیدا و حل کنی. همین‌طور می‌تونی برای کارهای جاوااسکریپت و اسنیپت‌های مربوط به اون، به این بخش و برای وردپرس به این صفحه مراجعه کنی. اگه به اسنیپت‌های پایتون هم نیاز داشتی، اینجا منتظرته.

حرف آخر

خب، رفیق برنامه‌نویس! دیدی که Subgrid چقدر می‌تونه چیدمان‌های پیچیده، مخصوصاً فرم‌ها و کامپوننت‌های تو در تو رو آسون کنه. این قابلیت، یکی از بزرگترین پیشرفت‌ها در زمینه CSS Layout بعد از Grid اولیه هستش و بهت اجازه می‌ده طراحی‌های هم‌تراز، ماژولار و بسیار تمیزتری داشته باشی. دیگه لازم نیست برای هم‌ترازی آیتم‌های داخلی گرید با گرید اصلی، کلی کد اضافی بنویسی یا خودتو اذیت کنی.

با تمرین و استفاده از مثال‌هایی که دیدیم، خیلی زود به Subgrid مسلط می‌شی و می‌تونی اون رو توی پروژه‌هات به کار ببری. فراموش نکن که همیشه از اسنیپت‌ها و کدهای آماده استفاده کنی تا سرعت توسعه‌ات بیشتر بشه و کد باکیفیت‌تری بنویسی. دنیای CSS هر روز داره پیشرفت می‌کنه و Subgrid یه قدم بزرگ در این راهه. پس ازش نهایت استفاده رو ببر و چیدمان‌های فوق‌العاده‌ای بساز!

اگه سوالی داری یا نیاز به راهنمایی بیشتری داری، همین الان می‌تونی با ما تماس بگیری: 09202232789.

پرسش‌های متداول (FAQ)

❓ Subgrid دقیقاً چیه؟

Subgrid قابلیتی در CSS Grid است که به یک آیتم گرید اجازه می‌دهد خطوط (Tracks) گرید والد خودش را به ارث ببرد و آیتم‌های داخلی خودش را با آن خطوط تراز کند. این کار به هم‌ترازی دقیق عناصر در چیدمان‌های چندلایه کمک می‌کند.

❓ چه زمانی باید از Subgrid استفاده کنم؟

وقتی که نیاز داری آیتم‌های داخلی یک کامپوننت (مثلاً عناصر داخل یک کارت یا فیلدهای یک فرم) با خطوط گرید اصلی و بیرونی هم‌تراز شوند. برای مثال، تراز کردن لیبل‌ها و اینپوت‌ها در فرم‌های پیچیده یا محتوای کارت‌ها در یک داشبورد.

❓ آیا Subgrid جایگزین CSS Grid معمولی است؟

خیر، Subgrid یک مکمل برای CSS Grid است. شما همچنان از display: grid; برای تعریف گرید استفاده می‌کنید، و سپس از grid-template-columns: subgrid; یا grid-template-rows: subgrid; برای به ارث بردن خطوط گرید والد استفاده می‌کنید.

❓ چطور مطمئن شوم مرورگر از Subgrid پشتیبانی می‌کند؟

می‌توانید به وب‌سایت caniuse.com مراجعه کرده و وضعیت پشتیبانی Subgrid در مرورگرهای مختلف را بررسی کنید. همچنین با ابزارهای توسعه‌دهنده (DevTools) مرورگر خود می‌توانید ویژگی‌های CSS را بازرسی کنید.

Table of Contents

آخرین نوشته‌ها

دسته‌ها