Grid برای چیدمان ردیف و ستون در کنار هم طراحی شده. با display:grid روی والد، فرزندهای مستقیم به آیتم‌های شبکه تبدیل می‌شن. می‌تونی اندازه ستون‌ها رو یک‌جا تعریف کنی تا کارت‌های ردیف‌های مختلف روی خطوط مشترک قرار بگیرن. این ویژگی برای فهرست پروژه‌ها یا بخش‌هایی که نظم دوبعدی دارن بسیار کاربردیه.
توی مثال دو ستون با عرض ثابت داریم و آیتم سوم در ردیف بعد قرار می‌گیره. تفاوت مهم اینه که مشخصات شبکه روی ظرف تعریف می‌شن، نه با عرض‌دادن تصادفی به هر کارت. خطای رایج نوشتن grid-template-columns بدون فعال‌کردن display:grid است؛ اسم ستون‌ها به‌تنهایی ظرف عادی رو به شبکه تبدیل نمی‌کنه. در این دوره هر تمرین سند مستقل داره، پس باید قانون ظرف رو در همون تمرین بنویسی و روی باقی‌ماندن تنظیم درس قبلی حساب نکنی. فعلاً اندازه‌های ثابت کمک می‌کنن خطوط شبکه رو واضح ببینی؛ در ادامه سهم‌بندی انعطاف‌پذیر رو هم معرفی می‌کنیم.
✍️ مثال حل‌شده:
<div class="shelf"><div>کتاب</div><div>دفتر</div><div>قلم</div></div>
<style>.shelf { display:grid; grid-template-columns:100px 100px; gap:10px; }</style>
حالا نوبت توئه: شبکه .grid-demo را بررسی کن: دو ستون ۱۲۰ پیکسلی و فاصله ده پیکسلی دارد و سه آیتم به ترتیب HTML در خانه‌ها قرار می‌گیرند. هدف این گام شناخت والد شبکه و ستون‌هایش است؛ ویژگی display:grid و grid-template-columns را در قانون ظرف پیدا کن.
فعالیت شما
شبکه .grid-demo را بررسی کن: دو ستون ۱۲۰ پیکسلی و فاصله ده پیکسلی دارد و سه آیتم به ترتیب HTML در خانه‌ها قرار می‌گیرند. هدف این گام شناخت والد شبکه و ستون‌هایش است؛ ویژگی display:grid و grid-template-columns را در قانون ظرف پیدا کن.