گاهی یک آیتم باید بیش از یک خانه شبکه رو بگیره. grid-column جای شروع و پایان اون آیتم رو روی خطوط عمودی شبکه تعیین می‌کنه. در شبکه دو ستونه سه خط مرزی داریم: ابتدای ستون اول، مرز بین دو ستون و انتهای ستون دوم. مقدار 1 / 3 یعنی آیتم از خط اول تا خط سوم ادامه پیدا کنه و هر دو ستون رو بپوشونه.
در مثال، یک اعلان از ابتدا تا انتهای شبکه کشیده می‌شه. مقدار -1 خط آخر شبکه صریح رو نشون می‌ده و برای پوشش کامل مفیده. توی تمرین خواسته روشن‌تره و از شماره خطوط مشخص استفاده می‌کنیم. خطای رایج نوشتن width بزرگ روی عنوانه؛ اون کار فقط جعبه رو بزرگ می‌کنه و الزاماً خانه بعد رو برایش رزرو نمی‌کنه. با grid-column خود شبکه از فضای اشغال‌شده خبر داره و آیتم‌های بعدی رو درست می‌چیند. قانون را روی عنوان بنویس، نه روی والد؛ والد مسئول تعریف ستون‌هاست و آیتم مسئول جای خودش.
✍️ مثال حل‌شده:
<div class="board"><h3>اطلاعیه</h3><div>خبر</div><div>زمان</div></div>
<style>.board { display:grid; grid-template-columns:120px 120px; } .board h3 { grid-column:1 / -1; }</style>
حالا نوبت توئه: شبکه .layout باید display:grid، دو ستون ۲۰۰ پیکسلی و gap:16px داشته باشد. عنوان .wide باید با grid-column:1 / 3 هر دو ستون را بپوشاند؛ دو کارت بعدی هرکدام یک خانه بمانند. تعداد سه فرزند مستقیم و متن‌ها را حفظ کن؛ عرض دستی جایگزین تعیین خطوط نباشد. اندازه ستون‌ها را دقیقاً با grid-template-columns:200px 200px و مقدارهای پیکسلی جداگانه بنویس؛ از fr یا repeat در پاسخ این تمرین استفاده نکن.
فعالیت شما
شبکه .layout باید display:grid، دو ستون ۲۰۰ پیکسلی و gap:16px داشته باشد. عنوان .wide باید با grid-column:1 / 3 هر دو ستون را بپوشاند؛ دو کارت بعدی هرکدام یک خانه بمانند. تعداد سه فرزند مستقیم و متن‌ها را حفظ کن؛ عرض دستی جایگزین تعیین خطوط نباشد. اندازه ستون‌ها را دقیقاً با grid-template-columns:200px 200px و مقدارهای پیکسلی جداگانه بنویس؛ از fr یا repeat در پاسخ این تمرین استفاده نکن.