در Grid هم gap فاصله بین خانه‌ها رو روی والد تنظیم می‌کنه. می‌تونی row-gap و column-gap رو جدا تعیین کنی یا از شکل کوتاه gap استفاده کنی. وقتی gap دو مقدار داره، عدد اول فاصله ردیف‌ها و عدد دوم فاصله ستون‌هاست. این ترتیب برای خیلی‌ها اول کار جابه‌جا می‌شه، چون عادت دارن اول به چپ و راست فکر کنن.
مثال فاصله عمودی شش و افقی چهارده پیکسلی می‌سازه. تمرین مقدارهای متفاوتی داره و کد اولیه این دو رو برعکس کرده. خطای رایج جبران فاصله اشتباه با margin روی کارت‌هاست؛ این کار فاصله لبه بیرونی رو هم درگیر می‌کنه و اصل خطای ظرف باقی می‌مونه. دو ستون ثابت اجازه می‌دن اثر فاصله افقی مستقل و روشن باشه. قبل از تغییر کد، مقدار فعلی هر جهت رو از شکل کوتاه بخون. لازم نیست عرض کارت‌ها، تعداد ستون‌ها یا متن‌ها رو عوض کنی؛ تنها فاصله تعریف‌شده در والد نیاز به اصلاح داره.
✍️ مثال حل‌شده:
<div class="gallery"><div>الف</div><div>ب</div><div>ج</div></div>
<style>.gallery { display:grid; grid-template-columns:100px 100px; gap:6px 14px; }</style>
حالا نوبت توئه: شبکه .gallery باید display:grid، دو ستون ۲۰۰ پیکسلی، row-gap:12px و column-gap:20px داشته باشد. چهار کارت آماده را نگه دار؛ دو عدد gap فعلی برعکس نوشته شده‌اند. از margin کارت‌ها برای شبیه‌سازی فاصله شبکه استفاده نکن. اندازه ستون‌ها را دقیقاً با grid-template-columns:200px 200px و مقدارهای پیکسلی جداگانه بنویس؛ از fr یا repeat در پاسخ این تمرین استفاده نکن.
فعالیت شما
شبکه .gallery باید display:grid، دو ستون ۲۰۰ پیکسلی، row-gap:12px و column-gap:20px داشته باشد. چهار کارت آماده را نگه دار؛ دو عدد gap فعلی برعکس نوشته شده‌اند. از margin کارت‌ها برای شبیه‌سازی فاصله شبکه استفاده نکن. اندازه ستون‌ها را دقیقاً با grid-template-columns:200px 200px و مقدارهای پیکسلی جداگانه بنویس؛ از fr یا repeat در پاسخ این تمرین استفاده نکن.