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

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

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

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

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

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

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

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

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

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

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

.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 استفاده می‌کنی.

.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;
}

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

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

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

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

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

.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;
}

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

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

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

.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;
}

جدول: مقایسه Grid معمولی و 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 چقدر می‌تونه چیدمان‌های پیچیده، مخصوصاً فرم‌ها و کامپوننت‌های تو در تو رو آسون کنه. این قابلیت، یکی از بزرگترین پیشرفت‌ها در زمینه CSS Layout بعد از Grid اولیه هستش و بهت اجازه می‌ده طراحی‌های هم‌تراز، ماژولار و بسیار تمیزتری داشته باشی. دیگه لازم نیست برای هم‌ترازی آیتم‌های داخلی گرید با گرید اصلی، کلی کد اضافی بنویسی یا خودتو اذیت کنی.

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

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

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

طراحی فرم‌های چندستونه و کامپوننت‌های کارت‌شکلِ هماهنگ، همیشه یکی از بزرگ‌ترین چالش‌های طراحان فرانت‌اند بوده است. حتماً برای شما هم پیش آمده که بخواهید برچسب‌ها (Labels) و فیلدهای ورودی در ردیف‌های مختلف یک فرم، کاملاً در یک راستا تراز شوند، اما به دلیل تفاوت در طول متنِ برچسب‌ها، همه‌چیز به‌هم‌ریخته است. در گذشته برای حل این مشکل مجبور بودیم از پهنای ثابت (Fixed Width) یا کدهای پیچیده جاوااسکریپت استفاده کنیم. اما حالا با معرفی CSS Subgrid، این کابوس برای همیشه به پایان رسیده است. در این مقاله به صورت کاملاً عملی و کاربردی یاد می‌گیریم چطور از این ابزار قدرتمند برای ساخت رابط‌های کاربری بی‌نقص استفاده کنیم.

۱. چرا به CSS Subgrid نیاز داریم؟ (مشکل فرم‌های سنتی)

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

زمانی که از ساختارهای تو در تو (Nested HTML) استفاده می‌کنید، هر گروه از المان‌ها (مانند یک ردیف فرم یا یک فیلد گروهی) به عنوان یک گرید کاملاً مستقل عمل می‌کند. این استقلال به این معنی است که ارتفاع یا عرضِ عناصر داخل گروه «الف» هیچ تاثیری بر اندازه عناصر داخل گروه «ب» ندارد. اینجاست که برای ایجاد تراز یکنواخت، کار سخت می‌شود. برای داشتن یک معماری تمیز، یادگیری ساختارهای مادر در تگ‌های HTML اولین قدم است تا بدانیم چگونه فرزندان را سازماندهی کنیم.

۲. مفهوم و نحوه کارکرد Subgrid به زبان ساده

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

این ویژگی فوق‌العاده کاربردی به طراح این امکان را می‌دهد که ساختار تو در توی HTML خود را حفظ کند (که برای دسترسی‌پذیری یا Accessibility عالی است) و در عین حال، کنترل بصری کاملی روی هم‌ترازی تمام اجزا در سراسر صفحه داشته باشد.

۳. آموزش گام‌به‌گام طراحی یک فرم پیچیده با Subgrid

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

گام اول: ایجاد ساختار HTML

ابتدا کد HTML زیر را می‌نویسیم. توجه کنید که هر فیلد درون یک تگ wrapper با کلاس .form-group قرار گرفته است تا ساختار معنایی حفظ شود. برای دیدن ابزارهای آنلاین بیشتر می‌توانید به بخش تکه‌کدهای برنامه‌نویسی مراجعه کنید.

<div class="form-container">
  <!-- ستون اول -->
  <div class="form-group">
    <label>نام و نام خانوادگی کامل کاربر:</label>
    <input type="text" placeholder="مثال: علی رضایی" />
    <span class="help-text">نام باید مطابق با شناسنامه باشد.</span>
  </div>

  <!-- ستون دوم -->
  <div class="form-group">
    <label>ایمیل:</label>
    <input type="email" placeholder="email@example.com" />
    <span class="help-text">برای ارسال تاییدیه.</span>
  </div>

  <!-- ستون سوم -->
  <div class="form-group">
    <label>شماره تماس همراه برای هماهنگی بیشتر:</label>
    <input type="tel" placeholder="09123456789" />
    <span class="help-text">کد تایید پیامک خواهد شد.</span>
  </div>
</div>

گام دوم: تعریف گرید اصلی (Parent Grid)

حالا باید والد اصلی یعنی .form-container را به عنوان یک گرید سه ستونه تعریف کنیم. همچنین مشخص می‌کنیم که ردیف‌های ما به صورت ساب‌گرید رفتار کنند:

.form-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  background-color: #ffffff;
  padding: 24px;
  border-radius: 12px;
}

گام سوم: فعال کردن Subgrid روی فرزندان

اکنون بخش جادویی کار فرا می‌رسد. هر کدام از کلاس‌های .form-group قرار است در یک ستون گرید والد قرار بگیرند، اما خودشان به صورت داخلی باید ردیف‌های خود را تراز کنند. برای این کار کدهای زیر را به استایل خود اضافه می‌کنیم:

.form-group {
  display: grid;
  /* اختصاص دادن این آیتم به ۳ ردیف گرید اصلی */
  grid-row: span 3;
  /* فعال‌سازی ساب‌گرید برای ردیف‌ها */
  grid-template-rows: subgrid;
  gap: 8px;
}

با نوشتن کد بالا، مرورگر متوجه می‌شود که هر .form-group سه ردیف از گرید اصلی را اشغال می‌کند. از آنجایی که مقدار grid-template-rows برابر subgrid قرار گرفته، المان‌های داخلی آن (یعنی label، input و span) دقیقاً روی ردیف‌های تعریف‌شده در والد اصلی تراز خواهند شد. دیگر فرقی نمی‌کند که طول متن برچسب یک خط باشد یا دو خط؛ همه آن‌ها در ردیف اول، ورودی‌ها در ردیف دوم و توضیحات در ردیف سوم به طور کاملاً هماهنگ قرار می‌گیرند.

۴. مقایسه روش‌های هم‌ترازی (جدول کاربردی)

برای اینکه درک بهتری از ارزش فنی CSS Subgrid پیدا کنید، در جدول زیر روش‌های مختلف ترازنبدی را با هم مقایسه کرده‌ایم تا به سادگی بهترین گزینه را انتخاب کنید:

۵. تراز کردن کارت‌های محتوایی پیچیده

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

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

/* استایل کارت‌های محتوایی هم‌تراز */
.cards-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-template-rows: auto auto auto; /* سه بخش: هدر، بدنه، دکمه */
  gap: 30px;
}

.card-item {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
}

۶. سازگاری با مرورگرها و کدهای جایگزین (Fallback)

خوشبختانه امروزه تمامی مرورگرهای مدرن از جمله کروم، فایرفاکس، سافاری و اج به صورت کامل و ۱۰۰ درصدی از CSS Subgrid پشتیبانی می‌کنند. بنابراین با خیال راحت می‌توانید از آن در پروژه‌های صنعتی و تجاری خود استفاده کنید.

با این حال، برای اطمینان بیشتر و پشتیبانی از مرورگرهای فوق‌العاده قدیمی، می‌توانید از دستور @supports استفاده کنید تا در صورت عدم پشتیبانی، استایل‌های جایگزین به صورت خودکار اعمال شوند:

/* استایل پیش‌فرض برای مرورگرهای بسیار قدیمی */
.form-group {
  display: flex;
  flex-direction: column;
}

/* اعمال ساب‌گرید در صورت پشتیبانی مرورگر کاربر */
@supports (grid-template-rows: subgrid) {
  .form-group {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}

۷. عیب‌یابی سریع و رفع مشکلات رایج

حتی حرفه‌ای‌ترین طراحان هم در ابتدا ممکن است با چالش‌هایی روبرو شوند. در ادامه سه مشکل رایج در پیاده‌سازی ساب‌گرید و نحوه رفع سریع آن‌ها را آورده‌ایم:

۸. سوالات متداول (FAQ)

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