سه کارت کنار هم هستند، اما عنوان یکی دو خط شده و لینک‌های پایین آن‌ها در ارتفاع متفاوت قرار گرفته‌اند. هر کارت Grid مستقل خودش را دارد و اندازه ردیف‌هایش از کارت کناری خبر ندارد. Subgrid اجازه می‌دهد بخش‌های داخلی از trackهای مشخص Grid والد استفاده کنند. برای این هم‌ترازی، رابطه والد، آیتم و فرزندهای داخل آن باید درست ساخته شود؛ اضافه کردن یک مقدار CSS به ظرف نامناسب کافی نیست.
Grid تو در تو بدون Subgrid هم قابل ساخت است. تفاوت این است که grid داخلی معمولاً trackهای مستقل دارد. بنابراین عنوان «Grid تودرتو واقعی» نباید این برداشت را بسازد که روش قبلی غیرواقعی بوده است. Subgrid برای اشتراک ردیف یا ستون مفید است، نه برای حل همه مسائل چیدمان. ابتدا مشخص کنید کدام بخش‌ها باید هم‌تراز باشند و آیا این رابطه در همه اندازه‌ها لازم است.
اشتراک track با ارث‌بری همه Grid فرق دارد
راهنمای Subgrid در MDN استفاده از trackهای والد در محور انتخاب‌شده را توضیح می‌دهد. می‌توان rows، columns یا هر دو را subgrid کرد. این تصمیم به معنی ارث‌بری تمام ویژگی‌های والد نیست. محدوده‌ای که آیتم روی والد span کرده تعیین می‌کند چه trackهایی برای grid داخلی وجود دارند. رابطه مکانی بخشی از قرارداد است.
اگر کارت فقط یک track ردیف را اشغال کرده، انتظار سه ردیف مشترک بدون تعیین span مناسب نداریم. در نمونه، هر کارت سه ردیف را روی والد اشغال می‌کند و سه فرزند مستقیم دارد: عنوان، توضیح و لینک. این تعداد با markup هماهنگ است. افزودن فرزند چهارم نیاز به تصمیم درباره جایگذاری یا تعداد track دارد. قاعده نباید از تعداد واقعی محتوا جدا شود.
نمونه کامل سه کارت
کد زیر را در فایل subgrid-cards.html با UTF-8 ذخیره و به صورت HTML باز کنید. همه CSS در style همان فایل است و تصویر، JavaScript یا بسته خارجی ندارد. والد cards یک Grid سیال است. سه article با کلاس card فرزند مستقیم آن هستند. داخل هر کارت دقیقاً heading، paragraph و anchor وجود دارد. لینک‌ها به مقاله‌های موجود مجله می‌روند و عملیات دیگری ندارند.
<!doctype html><html lang="fa" dir="rtl"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ردیف‌های مشترک کارت</title><style>*{box-sizing:border-box}body{margin:0;background:#f2f4f7;color:#17243b;font-family:Tahoma,Arial,sans-serif;line-height:1.9}main{width:min(66rem,calc(100% - 2rem));margin:auto;padding-block:2rem}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1rem}.card{display:grid;grid-template-rows:auto 1fr auto;gap:1rem;padding:1rem;border:1px solid #94a4ba;background:white;border-radius:.6rem;min-width:0;overflow-wrap:anywhere}.card h2{font-size:1.2rem;margin:0}.card p{margin:0}.card a{color:#173f78;align-self:start}.card a:focus-visible{outline:3px solid #946000;outline-offset:3px}@supports(grid-template-rows:subgrid){.card{grid-row:span 3;grid-template-rows:subgrid}}</style></head><body><main><h1>سه کارت با بخش‌های متناظر</h1><section class="cards" aria-label="مقاله‌های طراحی"><article class="card"><h2>راهنمای ناوبری</h2><p>نام مقصد و مسیر فعال را روشن کنید.</p><a href="https://tarahestan.com/magazine/navigation-menu-design-principles">مطالعه ناوبری</a></article><article class="card"><h2>راهنمای طراحی جستجو و فیلتر با وضعیت‌های قابل فهم</h2><p>نتیجه خالی، انتظار و خطا باید از هم جدا باشند. انتخاب‌های فعال نیز باید برای مخاطب دیده شوند.</p><a href="https://tarahestan.com/magazine/search-filter-design-great-ux">مطالعه جستجو</a></article><article class="card"><h2>راهنمای اعلان</h2><p>پیام را با نتیجه واقعی عمل هماهنگ کنید.</p><a href="https://tarahestan.com/magazine/web-notification-alert-design">مطالعه اعلان</a></article></section></main></body></html>
حالت پایه برای هر کارت ردیف‌های مستقل auto، 1fr و auto دارد و خوانایی را حفظ می‌کند. در محیط دارای پشتیبانی، کارت span سه ردیف می‌گیرد و grid-template-rows آن subgrid می‌شود. کارت‌هایی که کنار هم در یک گروه ردیفی والد قرار می‌گیرند، بخش‌های متناظر را هم‌تراز می‌کنند. اگر فضا فقط یک ستون داشته باشد، همان قرارداد سه بخش حفظ می‌شود ولی مقایسه کنارهم وجود ندارد.
ردیف مشترک از محتوا اندازه می‌گیرد
ارتفاع عنوان در یک کارت می‌تواند بر track مشترک عنوان اثر بگذارد. این همان رابطه‌ای است که برای هم‌ترازی می‌خواهیم، اما باید با طول متن مناسب باشد. ارتفاع ثابت برای مجبور کردن عنوان‌ها به یک اندازه می‌تواند متن را قطع کند؛ Subgrid امکان دیگری فراهم می‌کند. اندازه track هنوز به الگوریتم Grid و قواعد والد مربوط است و نباید نتیجه‌ای جدا از آن فرض شود.
در نمونه، عنوان طولانی عمداً وجود دارد تا تفاوت محتوا معلوم شود. توضیح‌ها نیز طول یکسان ندارند. هم‌ترازی قرار نیست متن را خلاصه یا تعداد خط‌ها را برابر کند؛ بخش‌ها در trackهای مربوط قرار می‌گیرند. اگر یکی از کارت‌ها جزئیات بسیار زیادی داشته باشد، همه track مشترک ممکن است فضای زیادی بگیرد. در این موقعیت، اولویت و حجم محتوا را هم بررسی کنید.
ستون مشترک برای داده هم‌نام
در فرم یا خلاصه داده، labelها و مقدارها می‌توانند نیاز به ستون مشترک داشته باشند. Subgrid ستون‌ها می‌تواند این رابطه را با ساختار تو در تو حفظ کند. اما اگر داده جدول واقعی با مقایسه ردیفی است، انتخاب HTML معنایی هنوز مهم است. ابزار CSS نوع محتوا را تعیین نمی‌کند. فرم، جدول و فهرست باید با نیاز خواندن و تعامل مشخص شوند و سپس چیدمان هماهنگ بگیرند.
برای نمونه ستون تازه، باید HTML متناظر نیز ارائه شود. نوشتن grid-template-columns برابر subgrid بدون نمایش محدوده آیتم و تعداد بخش‌ها قابل اجرا نیست. توضیح دهید عنصر داخلی چند ستون والد را span کرده و فرزندها کجا قرار می‌گیرند. این مقاله نمونه اجرایی را به ردیف‌های کارت محدود کرده تا ساختار روشن بماند؛ کاربرد ستون نیاز به همان دقت در قرارداد دارد.
Gap و خط‌های نام‌دار
فاصله‌ها می‌توانند از والد اثر بگیرند یا در subgrid تغییر کنند، مطابق مرجع رسمی. این موضوع روی رابطه لبه و محتوای کارت اثر دارد. border و padding نیز باید با هدف هم‌ترازی هماهنگ باشند. اگر کارت‌ها padding متفاوت دارند، قرار گرفتن روی track مشترک الزاماً ظاهر برابر همه لبه‌ها را نمی‌سازد. قرارداد فاصله باید در سیستم طراحی مشخص باشد و تغییر موردی باعث اختلاف نامعلوم نشود.
خط‌های نام‌دار می‌توانند جایگذاری را خواناتر کنند، ولی نام و دامنه باید معلوم باشند. شماره‌گذاری داخلی را با شماره مطلق والد بی‌دلیل یکی ندانید. آیتم می‌تواند در محل متفاوتی از والد قرار گیرد و همچنان قرارداد داخلی خودش را داشته باشد. اگر چند لایه subgrid وجود دارد، نام‌گذاری و توضیح مسیر اهمیت بیشتری دارد. پیچیدگی باید به نیاز واقعی پاسخ دهد، نه صرف نمایش توان CSS.
Fallback باید کار را حفظ کند
در نمونه، @supports بهبود ردیف مشترک را جدا می‌کند. محیط فاقد پشتیبانی کارت‌های مستقل و قابل استفاده می‌بیند. اختلاف ارتفاع لینک‌ها در آن حالت محدودیت بصری است، نه از دست رفتن مقصد. اگر هم‌ترازی برای فهم داده ضروری است، fallback قوی‌تری لازم می‌شود. پشتیبانی را برای محیط‌های هدف از مرجع به‌روز بررسی کنید و فقط بر دستگاه نویسنده تکیه نکنید.
در بسیاری از کارت‌ها، Flexbox یا Grid مستقل می‌تواند کافی باشد. استفاده از Subgrid وقتی رابطه track مشترک لازم نیست، وابستگی به ساختار والد ایجاد می‌کند بدون اینکه نتیجه مهمی اضافه کند. راهنمای کارت درباره اطلاعات لازم و الگوهای نمایش توضیح دارد. ابتدا مسئله مقایسه و تعامل را مشخص کنید، سپس روش هم‌ترازی را انتخاب کنید.
واکنش‌گرایی و گروه‌های ردیفی
وقتی تعداد ستون‌ها تغییر می‌کند، گروه کارت‌هایی که track مشترک دارند هم می‌تواند تغییر کند. انتظار هم‌ترازی جهانی همه عنوان‌های تمام صفحه معمولاً هدف نیست؛ هم‌ترازی در گروه کنار هم معنی دارد. قاعده auto-fit در نمونه از فضای موجود استفاده می‌کند. حداقل عرض باید از محتوا بیاید و با عدد آموزشی مقاله به‌عنوان قانون همه پروژه‌ها برخورد نشود.
Container Query می‌تواند چیدمان داخلی را بر اساس فضای میزبان عوض کند، ولی باید رابطه آن با Subgrid معلوم باشد. اگر در یک حالت تعداد فرزندها یا محل آن‌ها تغییر می‌کند، track مشترک هم نیاز به قواعد متناظر دارد. راهنمای Container Queries درباره تفاوت میزبان و مؤلفه توضیح می‌دهد. دو ابزار می‌توانند مکمل باشند اما مسئولیت یکسانی ندارند.
ترتیب سند و تعامل
قرار دادن عنصر در track تازه ترتیب DOM را عوض نمی‌کند. اگر ظاهر از مسیر خواندن دور شود، استفاده با صفحه‌کلید ممکن است گیج‌کننده باشد. در نمونه، عنوان، توضیح و لینک به همان ترتیب در سند آمده‌اند. صرف هم‌تراز شدن لینک‌ها دلیل جابه‌جایی منطقی آن‌ها نیست. ساختار باید برای کسی که فقط متن را می‌خواند هم معنی روشن داشته باشد.
کارت دارای چند دکمه یا لینک، قرارداد پیچیده‌تری دارد. همه آن‌ها را در یک anchor بزرگ تو در تو قرار ندهید. نام مقصد و عمل باید قابل فهم بماند. تغییر قاب هنگام hover جای focus قابل مشاهده را نمی‌گیرد. راهنمای هدف انتخاب و نشانه به جدا کردن ظاهر و معنی کنترل کمک می‌کند. Subgrid فقط محل قرارگیری را تنظیم می‌کند.
اشکال‌های رایج در markup
اگر articleها داخل wrapperهای اضافی باشند، ممکن است دیگر همان آیتم مستقیم Grid نباشند. اضافه شدن یک div برای analytics یا ظاهر می‌تواند رابطه track را قطع کند. قبل از تغییر CSS، ساختار واقعی را با قرارداد مقایسه کنید. تعداد بخش‌ها، span و محور انتخاب‌شده باید هماهنگ باشند. class card به‌تنهایی تضمین نمی‌کند عنصر در موقعیت مورد نیاز قرار دارد.
متن خالی یا جزء حذف‌شده نیز به تصمیم نیاز دارد. آیا فضای آن track باید باقی بماند یا کارت شکل دیگری بگیرد؟ شرط ساختاری مانند :has می‌تواند در بعضی حالت‌ها ظاهر را تنظیم کند، ولی باید markup واقعی و دامنه شرط روشن باشد. راهنمای :has همین رابطه را توضیح می‌دهد. قاعده‌های متعدد بدون توضیح می‌توانند حالت‌های محتوا را پنهان کنند.
قرارداد قابل تحویل
نام والد، آیتم مستقیم، تعداد بخش‌های داخلی و محور subgrid را ثبت کنید. نمونه عنوان بلند، توضیح چندخطی و حالت یک‌ستونی را در مشخصات بیاورید. درباره fallback و نیاز محیط هدف صریح باشید. اگر یک تغییر ساختاری نیاز به CSS تازه دارد، همان تغییر باید در بسته واحد مرور شود. راهنمای چیدمان ذاتی مکمل انتخاب تعداد ستون است.
Subgrid برای حفظ رابطه هم‌ترازی در ساختار تو در تو راه مناسبی فراهم می‌کند. این رابطه زمانی پایدار است که trackهای والد، span آیتم و فرزندهای واقعی با هم هماهنگ باشند. مقدار CSS به‌تنهایی ساختار را اصلاح نمی‌کند. از مسئله مشخص شروع کنید و پایه خوانا را حفظ کنید تا بهبود هم‌ترازی، محتوا و مسیر تعامل را قابل اتکاتر کند و صرفاً قاب‌های ظاهراً منظم نسازد.
هنوز دیدگاهی ثبت نشده
اولین نفری باشید که نظر می‌دهد!